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

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