ES6 on the Rocks

Content

1. Status
2. Features
3. Setup
4. Further steps

The
Current
Status

What do we have?

• Grunt-based build process
• ES5 in most browsers
• ES6 in modern browsers?

Current Support

• Not enough to seriously consider usage
• In fact we could add shims for some parts
• Powerful features left out :(

Current Support of Babel

• Enough to seriously consider usage
• Powerful features included

The
Best
Features

,which I have copied from 

https://github.com/lukehoban/es6features

Arrows

_.forEach(events, function(item) {
  if (!item.author) {
    item.author = profileResource.get({id: item.author_id});
  }
});

_.forEach(events, item => {
  if (!item.author) {
    item.author = profileResource.get({id: item.author_id});
  }
});

(share the this / like in coffee script)

Classes

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
  }
  update(camera) {
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Heavily discussed if this heaven or hell

Enhanced Object Literals

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Wow, I can update toString() and write the prototype directly

Oh, and dynamic properties

Template Strings

template: [
  '<div class="attachments" ng-if="attachment">',
    '<img class="attachments-selection" ng-src="{{ attachment.url }}">',
    '<span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>',
    '<div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">',
      '<img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >',
      '<span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>',
    '</div>',
  '</div>'
].join(''),

template: `<div class="attachments" ng-if="attachment">
    <img class="attachments-selection" ng-src="{{ attachment.url }}">
    <span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>
    <div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">
      <img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >
      <span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>
    </div>
  </div>`

no more ['<div>', '</div'>].join('')

Template Strings

template: [
  '<div class="attachments">',
  '<p> x is ' + x + '!</p>',
  '</div>'
].join(''),

template: `
  <div class="attachments">
    <p> x is ${ x }!</p>
  </div>`

In a non angular context

Deconstructing

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

Can you hear the haskell?

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

Array comprehensions

// Array comprehensions
var results = [
  for(c of customers)
    if (c.city == "Seattle")
      { name: c.name, age: c.age }
]

Well, kinda like in haskell

This is an experimental feature in babel

Default, Rest, Spread, let, const

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

Not the heroes we wanted, but the ones we needed

A cool shorthand, I don't know the name of

var foo = {
      background: '#263238'
    }, bar = {
      color: 'red'
    }, foobar = {foo, bar};

Iterators & Generators

I'll tell you as soon as I understand them....

Iterators & Generators

I'll tell you as soon as I understand them....

See you next campfire :)

Modules

// lib/mathplusplus.js
export * from "lib/math";
export const e = 2.71828182846;
export default function(x) {
    return Math.exp(x);
}

// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("2π = " + exp(pi, e));

like in AMD or Common.js <= default for babel

Module Loaders

System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");

Dynamic loading – ‘System’ is default loader

Create execution sandboxes - new Loader

Maps & Sets

// Sets
var s = new Set();
s.add("hi").add("bye").add("hi");
s.size === 2;
s.has("hi") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

And their weak counterparts

Because the object has no reference it will not be held in the set/map

Proxies

// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
  apply: function (receiver, ...args) {
    return 'I am the proxy';
  }
};

var p = new Proxy(target, handler);
p() === 'I am the proxy';

Also for objects

Other relevant features

• Unicode support
• Tail calls
• Math + Number + String API extension
• Subclassable buildins (Array, etc)
• Symbols
• Binary and Octal literals
• various cool new APIs (Promises, Fetch, etc)

The
Awesome
Setup

The

Gruntfile

Additions

• Babel watch task
• Babel dist task

Other changes

• run npm install --save-dev grunt-babel
• have fun with ES6

It's

Even
Better

Babel ♥ React + JSX