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"

ES2015 for Angular

By Elior Boukhobza

Made with Slides.com

ES2015 for Angular

  • 1,210

More from Elior Boukhobza