Using ES6 with

2015

Introduction

ES6 Support as of Sep 2015

Google Chrome/Opera: 58%
Mozilla Firefox: 71%
Internet Explorer " Edge": 68%
Safari ( Webkit): 65%
Node.JS: 17%
IO.JS: 44%
BabelJS: 72%

Source: http://kangax.github.io/compat-table/es6/

It's official!

What's new in ES6 ?

Classes

Modules

Arrow

functions

Template Strings

Constants

Symbols

Shorthand

Object literals

Collections

Promises

Destructuring

Default/Rest/

Spread parameters

Iterators

Generators

Proxies

Reflect API

Why using it?

Why not?

Very strong support even without transpilers
It's not a new language, you can still develop in plain old JS
Better be accustomed with it since more and more apps are written in ES2015
Good lot of features: arrow functions, template strings, array destructuring...
Transpilers are very easy to use and mostly transparent (except for big stuff such as modules and classes)

And within Angular?

Extends Angular capabilities with the new syntax features
New design patterns emerge
Prepare yourself with Angular 2.0

Features Overview

Arrow functions

Lambda syntax: (a, b) => a + b
Lexical scoping: no more need to do "var self = this"

// Expression bodies
var array = [1, 2, 3, 4];

var odds = array.filter(v => v % 2 == 1);
var squares = evens.map(v => v * v);

// Statement bodies
$.put(url, (response) => {
    $('#div').text(response.data);
    console.log(response);
});

$('#button').on('click', (e) => {
    e.preventDefault();
    console.log('clicked...');
})


// Lexical scope
MyClass.prototype.save = function () {
    setTimeout( () => {
        this.data = 'done'; // this is bound to MyClass, not to window
    }, 1000)
}

And in Angular?

// 1. Event callbacks
$scope.$on('selection:deselect:all', function (event, args) {
    changeAllRowsSelectState(false);
});

// 2. Set Timeout callbacks
setTimeout(function() { 
  window.onbeforeunload = onBeforeUnloadHandler;
}, 0);

// 3. Lexical scope using self
var self = this;
$http.post('/widgets').success(function (resp) {
    self.archive(row.id);
    // ...
})

// 1. Event callbacks
$scope.$on('selection:deselect:all', () => changeAllRowsSelectState(false));

// 2. Set Timeout Callbacks
setTimeout(() => window.onbeforeunload = onBeforeUnloadHandler);

// 3. Lexical scope
$http.post('/widgets').success( (resp) => this.archive(row.id) );  // no need for selfies

Enhanced objects

function Foo() {
    this.foo = 'foo';
}

var bar = 'foobar';

var myObject = {
  __proto__: Foo.prototype, // Set the object's prototype to be Foo's
  bar, // Shorthand for bar: bar
  toString () { return super.foo + this.bar }, // Shorthand methods
  ['prop_' + bar]: bar // Create a dynamic property of name "prop_foobar"
}

Setting the prototype at construction
Simpler property and method definition
Dynamic named property and methods
Support "super invocation"

And in Angular?

angular.module('dyApp').factory('EvaluatorsService', ['$http', '$q', function ($http, $q) {
    return {
        get: function (type) {
            // ...
        },

        archive: function (id) {
            // ...
        }
    }
}])

// ==>
angular.module('dyApp').factory('EvaluatorsService',  ['$http', '$q', ($http, $q) => {
    return {
        get (type) { // ... },
        archive (id) { // ... }
    }
}])

Enhanced objects

function Foo() {
    this.foo = 'foo';
}

var bar = 'foobar';

var myObject = {
  __proto__: Foo.prototype, // Set the object's prototype to be Foo's
  bar, // Shorthand for bar: bar
  toString () { return super.foo + this.bar }, // Shorthand methods
  ['prop_' + bar]: bar // Create a dynamic property of name "prop_foobar"
}

Setting the prototype at construction
Simpler property and method definition
Dynamic named property and methods
Support "super invocation"