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

Armeen Harwood picture Armeen Harwood · May 29, 2015 · Viewed 12.9k times · Source

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

Armeen Harwood picture Armeen Harwood · Jun 5, 2015

'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