Can anyone explain what es7 reflect-metadata is all about? - npm

Question

Been studying ES6, JSPM & angular2 for a week now and I found this repo ES6-loader
if we look at the index.html at the bottom script you'll see
System.import('reflect-metadata')
.then(function() {
return System.import('app/index');
})
.catch(console.log.bind(console));
This is using JSPM's systemjs polyfill to get ES6's import.
Question: What is the reflect-metadata really do in this situation? npm reflect-meta The more I read the documentation, the less I understand what it does?

Answer 1

'reflect-metadata' is a package that is a proposal for ES7. It allow for meta data to be included to a class or function; essentially it is syntax sugar.
Example.
Angular 2 ES6:
#Component({selector: "thingy"})
#View({template: "<div><h1>Hello everyone</h1></div>"})
class Thingy{};
As you can see there are no semicolons after #Component and #View. This is because they are essentially Chains of (meta)data on the class.
Now lets look at that same code in Angular 2 but in ES5:
function Thingy(){}
Thingy.annotations = [
new angular.ComponentAnnotation({
selector: "thingy"
}),
new angular.ViewAnnotation({
template: "<div><h1>Hello everyone</h1></div>"
})
];
As you can see the # symbol abstracts out alot of the annotations property of a class and makes it More D.R.Y.
Taking this one step further Angular team knows that annotations are a bit abstract for the new user. Moreover, the ES5 is just too verbose. which is why they made a.js which will make interfacing with annotations better:
Video to understand this