Brace yourselves, future is coming: ES6, AtScript and Angular 2.0
)
Recently, the first AngularJS conference in Europe, ng-europe, took place in Paris. The future of Angular and beyond was the main topic in all different kind of talks. How will the new JavaScript ES6 implemented in Angular 2.0 by the AngularJS Team?
Angular 1.3 is already out and mainly focuses on better performance. Compared to version 1.2, DOM manipulation is 4.4 times faster and there’s 73% less garbage to collect. At this moment the Angular team is working hard on implementing Angular 2.0. The core will heavily change and the power of ES6 will be all over the place.\[1\] That's why I will first give some information about ECMAScript 6 - the new version of JavaScript's core.
ES6 (ECMAScript 6)
"Harmony" (code name of JavaScript's ES6) is still work in progress, but the official release date should be in June 2015. The new version adds significant new syntax for writing complex applications, including classes and modules, but defines them semantically in the same terms as ES5 strict mode. Other new features include generators and generator expressions, arrow functions, binary data, collections (maps, sets and weak maps), promises and default parameters.
\[gist id=2cadbb7f2e37888ad322\]
The real question is: When can we use this new features? Now!? Browser vendors are working hard to implement this and the latest browsers are shipping big parts of the specification already. This website tracks the progress of the latest browsers. You can see a lot of red in this table - that's why Traceur (compiles ES6 to ES5) comes to the rescue. --> So that your code will work in all modern browsers!
In this talk, Erik from the AngularJS Team explains, which additional features of ES6 will be used in Angular 2.0 and how Traceur works. There is also a Chrome extension named "ES6 transpiler based on Traceur" where you can try out your latest ES6 code ;)
AtScript (Angular Language Extension)
The goal of AtScript is to enhance the JS language (and also make programming Angular better) with these missing features:
)
- Type annotations
- Allows tools & IDEs to be awesome (better code autocompletion)
- No more JSDoc comments
- Type Assertions => catches errors (both in code and in type annotations)
- Field annotations
- Generates the constructor of a class, see example below
- Metadata Annotations
- e.g.
@Description()right before a function - Will be used in Angular 2.0 for Dependency Injection or Component / Directive descriptions
- e.g.
- Type Introspection with Annotation Support
- Consistent API
[gist id=bc1fba8b34e18e82f6d1]
The conclusion of Misko Hevery in his talk about AtScript was that it is not a new language, it is simply this equation:
AtScript = ES6 + Types + Annotations + Introspections
Angular 2.0
)
RIP everything you know.
Although Angular will run on ES5 browsers (the current world), changes being made to the core Angular architecture will break every Angular application. I recommend watching this talk for details, which include removal of controllers, current directive definition syntax, $scope, and more.
“We're building AngularJS in ES6 now so you’ll have a framework that’s ready to take full advantage of ES6 as browsers add support,” says the team, though it will of course compile to ES5 code. You can easily write with TypeScript, ES6, ES5, CoffeeScript...whatever you like.
\[gist id=976aca18390315f8c26f\]
At present, you will get the best Angular experience by leveraging AtScript, due to its ability to automatically generate the metadata from language primitives, but it all translates to simple ES5 in the end.
So as we can see the whole web is evolving with ES6. As a front-end developer I think I will definitely not get bored any time soon in this bright-looking future ;)
References:
ES6 in Angular 2.0 by Erik Arvidsson at ng-europe 2014
ECMAScript 6 compatibility table
AtScript by Miško Hevery at ng-europe 2014
AtScript Primer (Draft - Angular Design Docs)
Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014
Interesting read: