How to start writing apps with ES6, Angular 1.x and JSPM

by Martin Micunda

blog: http://martinmicunda.com

github: martinmicunda

twitter: @martinmicunda

ECMAScript 6

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

ECMAScript 6

Lots of new features (modules, arrow function, generator, classes, promises etc.)
Features are frozen

ECMAScript 6

Lots of new features (modules, arrow function, generator, classes, promises etc.)
Features are frozen
ES6 is fully compatible with ES5

ECMAScript 6

Lots of new features (modules, arrow function, generator, classes, promises etc.)
Features are frozen
ES6 is fully compatible with ES5
End of 2014 - specification was finished

ECMAScript 6

Lots of new features (modules, arrow function, generator, classes, promises etc.)
Features are frozen
ES6 is fully compatible with ES5
End of 2014 - specification was finished
March 2015 - publication process starts

ECMAScript 6

Lots of new features (modules, arrow function, generator, classes, promises etc.)
Features are frozen
ES6 is fully compatible with ES5
End of 2014 - specification was finished
March 2015 - publication process starts
June 2015 - formal publication!

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

//------ 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

//------ 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

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

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.