AngularJS 1.3 and ES6 - how to use it already today

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:

https://github.com/jamm/AquilamusTest

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:

npm install karma-chrome-launcher --save-dev

We need traceur runtime in app:

bower install traceur --save

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:

Diff on GutHub

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.

Additional Links

Traceur

Video - Miško Hevery - Keynote on AtScript at ng-europe 2014  (slides)

How to not minify already minified on each "grunt build" in yeoman

Long title, yeah.

Let's speed-up Grunt a little

In some of my projects I use yeoman (generator-angular), and on each "grunt build" Grunt runs minification of all JS files from the 'vendor' list (and from 'scripts' also, but it's not a problem).

It takes a long time, especially if you use a lot of external modules.

But most of them already have minified versions, so why to waste a time to minify them again?

I've made Grunt to skip minification of 'vendor' block and it decreased time of 'grunt build' execution in 5 times.

But it wasn't easy (that's why I decided to write this article).

You can't just ask usemin to skip 'vendor', but you can ignore configuration, made by usemin for uglify. To do this, add 'onlyScripts' target to your uglify task:

    uglify:        {

      onlyScripts: {

        files:   [{

          dest: '<%= yeoman.dist %>/scripts/scripts.js',

          src:  ['.tmp/concat/scripts/scripts.js']

        }]

      }

    }

Also, now uglify will not copy your vendor.js from temporary folder, so add "vendorJS" section to "copy" task:

copy:

      //...

      vendorJS: {

        expand: true,

        cwd:    '.tmp/concat/scripts/',

        dest:   '<%= yeoman.dist %>/scripts/',

        src:    'vendor.js'

      }

Then, in "build" task, set target of uglify to 'onlyScripts' and copy vendor.js:

  grunt.registerTask('build', [

    'jshint',

    'clean:dist',

    //'wiredep',

    // ...

    'useminPrepare',

    //'concurrent:dist',

    'autoprefixer',

    'concat',

    'ngAnnotate',

    'copy:dist',

    'cssmin',

    'uglify:onlyScripts',

    'copy:vendorJS',

   // ...

  ]);

About commented out lines:

 "wiredep" - this task will replace all .min.js-links (in "vendors" block) to .js-links. We don't want to allow it (otherwise our vendor.js will be huge non-minified file).

 "concurrent:dist" - when this task is commented out, Grunt works much faster on MBP with 2 cores. I don't know why. Try it, maybe it will help you too.

Automation of Grunt builds in WebStorm/PHPStorm

It's very handy to use Yeoman and Grunt to build AngularJS (and not only) applications. And I'll write here how make it even more comfortable in JetBrains IDE.

Default installation of Yeoman is very good for development on localhost. But it's not always possible - some databases and services just can't be on localhost, even their mocks. For example: ActiveDirectory - I don't even want to imagine, how many time I'll spend to make small copy of AD on my localhost.

For deployment I use beanstalk - all I need to deploy on development server is press "git commit and push" button in IDE (I use PHPStorm because in my current projects backend is in PHP).
But before that, I have to run "grunt build" to put all results to the "dist" folder.

There is 2 ways to automate grunt builds in PHPStorm/WebStorm:

1) File Watchers - can be used, when repository contains only 1 application (because of "working directory" argument in the File Watcher settings);
2) Rebuild manually by running external tool from context menu or executing "grunt build" in console;

To run grunt build in Windows console:

1) add path to nodejs folder and %APPDATA%\Roaming\npm\ in your system PATH variable
2) open console in IDE (shift+ctrl+x)
3) if necessary, set working directory by "cd dir_name"
4) write "grunt.cmd build"

To create context menu "Grunt build" in Mac OS:

Settings -> External Tools -> +
Name: build
Group: Grunt
Program: grunt
Parameters: build
Working directory: $FileDir$

To create context menu "Grunt build" in Windows:

Settings -> External Tools -> +
Name: build
Group: Grunt
Program: grunt.cmd
Parameters: build
Working directory: $FileDir$

Now Grunt will rebuild our project, but it's not yet enough - names of some files will be changed and we'll
need to add these files to git (run "git add .").

To do this, I use grunt-exec. Run in apps folder:

npm install grunt-exec

then add to Gruntfile.js (before last '}' for instance):

grunt.loadNpmTasks('grunt-exec');

then create 'exec' task in grunt.initConfig:

exec: {

  git_add:{

    command: 'git add .',

    cwd: '<%= yeoman.dist %>'

  }  

},

now, to run this task in each build, add this line in list of

grunt.registerTask('build',

section. It will look something like that:

  grunt.registerTask('build', [

    'clean:dist',

    'useminPrepare',

    'concurrent:dist',

    'concat',

    'copy',

    'cdnify',

    'ngmin',

    'cssmin',

    'uglify',

    'rev',

    'usemin',

    'exec'

  ]);

That's all! :)