ES6, AtScript
Next version of Angular will use AtScript - superset of ES6 (upcoming version of JavaScript). So, if you write in ES5 (current version of JavaScript), you already write in AtScript, just without all of these optional additions - annotations, types and introspections. Yes, they will stay optional, but it's nice to have them.
We can't use AtScript in existing projects yet (and Angular 2 will be ready even later than AtScript), but we already can use ES6 with AngularJS 1.3, best Angular yet (current stable branch), with all cool things ES6 going to give us. Take it now! :)
How to
Update Feb 18, 2015:
Time goes and in few weeks after publishing this article, angular-gulp generator have implemented support of ES6. I highly recommend to use it instead of generator-angular, and all ES6 support will be provided "out of the box": https://github.com/Swiip/generator-gulp-angular
I'll show you how to do it on example of the project, bootstrapped by Yeoman's generator-angular. Maybe not top-notch folders structure, but easy to start with.
Source code of project:
Step 1 - install modules
When we have base of project, let's add components:
Grunt will transpile ES6 to ES5 (I know I know, Gulp is our new trend, but.. next time)
npm install grunt-traceur --save-dev
PhantomJS doesn't support ES5 even, so we will run unit tests in Chrome:
We need traceur runtime in app:
That's all.
Step 2 - Structure
In structure of this project most convenient place I found for ES6 files is /app/es6 - I just copied content of 'scripts' folder here. Now I can use watch, livereload, build project and run tests. Awesome.
Step 3 - Gruntfile
Example of Gruntfile.js
And what has been changed in file, generated by generator-angular:
We add new task, 'traceur' and add it to build, test, serve tasks.
Step 4 - Unit tests config
Pretty simple changes:
replace PhantomJS by Chrome (it will run without taking focus, in background) and add traceur.min.js link.
Step 5 - index.html
Just add link to traceur.min.js
Enjoy ES6!
Now you can use ES6 in your AngularJS project. For example, I use ES6 classes for Services, because I like it and it works :)
Traceur will compile AtScript in the same way it compile ES6 for us in this project, so it's nice to meet Traceur already now and start use advantages of new technologies.
Nice tut! Did you remove the scripts folder (or just leave it there)... or is the grunt task copying the contents to es6 each time?
ReplyDeleteIt's the Grunt task.
DeleteTime goes and in few weeks after publishing this article, angular-gulp generator have implemented support of ES6. I highly recommend to use it instead of generator-angular, and all ES6 support will be provided "out of the box": https://github.com/Swiip/generator-gulp-angular