29

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?

Armeen Moon
  • 18,061
  • 35
  • 120
  • 233
  • Not sure what index.html you mean, if it's the https://github.com/angular/quickstart/blob/master/index.html, then the reflect-metadata/Reflect.js is a library which enhances: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect which is being used sometimes in the code which the TypeScript compiler (tsc) spits out – dalvarezmartinez1 Dec 06 '16 at 13:05

1 Answers1

54

'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

Armeen Moon
  • 18,061
  • 35
  • 120
  • 233