/angular-es6-boilerplate

An opinionated angular boilerplate in the spirit of ng-boilerplate which uses traceur to allow for es6 features.

Primary LanguageJavaScript

ES6++ playground

This is an empty repo to make it easy to experiment with ES6. It also includes some additional features, such as annotations and run-time type checks. It is basically the setup we use on Angular v2, so you can check out some of the v2 repos such as di.js, templating or diary.js.

Initial setup

# Clone the repo...
git clone https://github.com/vojtajina/es6-playground.git
cd es6-playground

# Then, you need to install all the dependencies...
npm install

# If you wanna be able to use global commands `karma` and `gulp`...
npm install -g karma-cli
npm install -g gulp

Running the tests

karma start

Running in the browser

gulp build
gulp serve

# If you wanna Gulp to re-build on every change...
gulp watch

WTF is ES6?

Simply, the next version of JavaScript that contains some really cool features. You might check out some of these:

What are all the pieces involved?

Traceur

Transpiles ES6 code into regular ES5 (today's JavaScript) so that it can be run in a today browser.

RequireJS

Traceur is configured to transpile ES6 modules into AMD syntax and we use RequireJS to load the code in the browser.

Assert library

When typeAssertions: true option is used, Traceur generates run-time type assertions such as assert.type(x, Object). The assert library does the actual run-time check. Of course, you can use your own assert library.

The idea with type assertions is that you only use them during the development/testing and when deploying, you use typeAssertions: false.

Karma

Test runner that runs the tests in specified browsers, everytime you change a file.

Gulp

Task runner to make defining and running the tasks simpler.

And what the hell is the ++?

When developing Angular v2, we are using some additional features that are not in the ES6 specs...

1/ meta data annotations

class SomeAnnotation {}
class AnotherAnnotation {}

@SomeAnnotation
class Foo {
  constructor(@AnotherAnnotation bar) {}
}

This is a very similar syntax to annotations in Java/Dart. It is just a nice declarative way to put additional meta data on classes/functions/parameters.

When annotations: true, Traceur transpiles the above code code into something like this:

// ...

Foo.annotations = [new SomeAnnotation];
Foo.parameters = [[new AnotherAnnotation]];

Therefore you can easily achieve the same thing without transpiling the code. It just won't be as pretty ;-)

2/ type annotations

function request(url: String, data: Object, callback: Function) {
  // ...
}

The syntax is more-less the same as TypeScript.

When types: true, annotations: true, Traceur transpiles this code into something like this:

function request(url, data, callback) {
  // ...
}

// this code might change
request.parameters = [[String], [Object], [Function]];

When also typeAssertions: true, Traceur generates run-time assertions, such as:

function request(url, data, callback) {
  assert.argumentTypes(
    url, String,
    data, Object,
    callback, Function
  );
}