How to start writing apps with ES6 today

by Martin Micunda

blog: http://martinmicunda.com

github: martinmicunda

twitter: @martinmicunda

ECMAScript 2015 (ES6)

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

  • Features already appearing in browsers

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

  • Features already appearing in browsers

  • ES6 is fully compatible with ES5

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

  • Features already appearing in browsers

  • ES6 is fully compatible with ES5

  • End of 2014 - specification was finished

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

  • Features already appearing in browsers

  • ES6 is fully compatible with ES5

  • End of 2014 - specification was finished

  • March 2015 - publication process starts

ECMAScript 2015 (ES6)

  • ES7+ smaller, yearly scheduled releases

  • TC39 (ECMA Technical Committee 39)

  • Lots of new features (modules, arrow function, generator, classes, promises etc.)

  • Features are frozen

  • Features already appearing in browsers

  • ES6 is fully compatible with ES5

  • End of 2014 - specification was finished

  • March 2015 - publication process starts

  • June 2015 - formal publication!

ES6 Modules

ES6 Modules

  • The future replacement for the AMD and CommonJS module formats.

ES6 Modules

  • The future replacement for the AMD and CommonJS module formats.

  • The ES6 Specification defines two primary module features:

    • module syntax

    • module loader

ES6 Module Syntax

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

Named exports (several per module)

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Named exports (several per module)

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Named exports (several per module)

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Named exports (several per module)

Default exports (one per module)

//------ myFunc.js ------
export default function () { ... };

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Named exports (several per module)

Default exports (one per module)

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc()

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Named exports (several per module)

Default exports (one per module)

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc()

//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

ES6 Module Syntax

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Named exports (several per module)

Default exports (one per module)

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc()

//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

http://www.2ality.com/2014/09/es6-modules-final.html

Dr. Axel Rauschmayer

ES6 Module Loader

ES6 Module Loader

//------ module.js ------
export function square(x) {
    return x * x;
}

//------ index.html ------
<!doctype html>
    <script>
        System.import('module').then(function(module) {
          console.log(module.square(5));
        });
    </script>

ES6 Module Loader

//------ module.js ------
export function square(x) {
    return x * x;
}

//------ index.html ------
<!doctype html>
    <script>
        System.import('module').then(function(module) {
          console.log(module.square(5));
        });
    </script>

http://whatwg.github.io/loader/

ES6 TODAY

ES6 TODAY

May I use ES6 today?

 

 

ES6 TODAY

May I use ES6 today?

YES

 

 

ES6 TODAY

May I use ES6 today?

YES

How?

 

 

ES6 TODAY

May I use ES6 today?

YES

How?

ES6 Compilers (Traceur or 6to5)

ES6 Module Loader

SystemJS

JSPM

Shims

​​

Traceur

var seattlers = [
  for (c of customers) {
    if (c.city == "Seattle") {
      name: c.name,
      age: c.age
    }
  }
];

ES6

ES5

var seattlers = (function() {
  var c;
  var $__20 = 0,
      $__21 = [];
  for (var $__22 = customers[
      $traceurRuntime
      .toProperty(Symbol.iterator)](),
      $__23; !($__23 = $__22.next()).done;){
    c = $__23.value;
    if (c.city == "Seattle")
      $traceurRuntime
      .setProperty($__21, $__20++, {
        name: c.name,
        age: c.age
      });
  }
  return $__21;
}());

6to5

var seattlers = [
  for (c of customers) {
    if (c.city == "Seattle") {
      name: c.name,
      age: c.age
    }
  }
];

ES6

ES5

var seattlers = Array.from(customers)
  .filter(function (c) {
  return c.city == "Seattle";
}).map(function (c) {
  return {
    name: c.name,
    age: c.age
  };
});

ES6 Module Loader Polyfill

  • “Dynamically loads ES6 modules in browsers and NodeJS with support for loading existing and custom module formats through loader hooks.”

  • It follows JavaScript Loader Spec

SystemJS

  • “Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS”

  • map, paths and global shims (similar to requireJS)

  • plugins (CSS, JSON and images)

  • ES6 Module Loader polyfill + SystemJS = 16KB (minified and gzipped)

SystemJS

//------ hello-amd.js ------
define([], function() {
  return {
    say: function() {
      return 'AMD says HI!';
    }
  };
});

SystemJS

//------ hello-amd.js ------
define([], function() {
  return {
    say: function() {
      return 'AMD says HI!';
    }
  };
});

//------ hello-cjs.js ------
var obj = {
  say: function speak(msg) {
    return 'CommonJS says HI!';
  }
};
module.exports = obj;

SystemJS

//------ hello-amd.js ------
define([], function() {
  return {
    say: function() {
      return 'AMD says HI!';
    }
  };
});

//------ hello-cjs.js ------
var obj = {
  say: function speak(msg) {
    return 'CommonJS says HI!';
  }
};
module.exports = obj;

//------ hello-es6.js ------
export class Hello {
  say() {
    return 'ES6 says HI!';
  }
}

SystemJS

//------ hello-amd.js ------
define([], function() {
  return {
    say: function() {
      return 'AMD says HI!';
    }
  };
});

//------ hello-cjs.js ------
var obj = {
  say: function speak(msg) {
    return 'CommonJS says HI!';
  }
};
module.exports = obj;

//------ hello-es6.js ------
export class Hello {
  say() {
    return 'ES6 says HI!';
  }
}
//------ main.js ------
import { Hello } from './hello-es6'
import amd from './hello-amd'
import cjs from './hello-cjs'

// es6
var hello = new Hello()
console.log('es6 ' + hello.say());

// amd
console.log('amd ' + amd.say());

// commonjs
console.log('commonjs ' + cjs.say());

JSPM

  • It’s package manager with a CLI for the SystemJS, built on top of the dynamic ES6 module loader.

  • It creates bundle or a self-executing bundle.

  • It seems like what the NPM team recommended as a solution to front-end dependency management.

 

Shims

  • Promise()

  • Map()

  • Number.isNaN()

  • Object.is()

  • String.prototype.includes()

  • String.prototype.codePointAt()

  • Array.from()

  • Set()

  • and much more

 

Libraries: es6-shims, core.js (used by 6to5), es6-promise

ES6 Compatibility Table

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

Summary

Summary

  • For existing CommonJS projects - compile ES6 into CommonJS

 

Summary

  • For existing CommonJS projects - compile ES6 into CommonJS

  • For existing AMD projects - compile ES6 into AMD

 

Summary

  • For existing CommonJS projects - compile ES6 into CommonJS

  • For existing AMD projects - compile ES6 into AMD

  • New ES6 projects - ES6 Module Loader, SystemJS, JSPM, shims

 

Demo

https://github.com/martinmicunda/employee-scheduling-ui

Resources

ES6 Draft Specification

ES6 Features - Luke Hoban

Traceur Compiler

6to5 Compiler

ES6 Compatibility Table

Read Axel Rauschmayer Blog

Understanding ECMAScript 6 - Nicholas C. Zakas

Practical Workflows for ES6 Modules - Guy Bedford

ES6 Module Loader - Guy Bedford

SystemJS - Guy Bedford

JSPM - Guy Bedford

Thanks!

blog: http://martinmicunda.com

github: martinmicunda

twitter: @martinmicunda

Questions?