ES6 in Real Life

ES6 in Real Life

by @domenic

We do not yet know what we want

and yet we are responsible for what we are

var line = d3.svg.line()

.x(function (d) { return d.x; })

.y(function (d) { return d.y; });

var line = d3.svg.line()

.x(d => d.x)

.y(d => d.y);

this.xScale = d3.scale.linear()…;

this.yScale = d3.scale.linear()…;

this.line = d3.svg.line() .x(function (d) { return this.xScale(d.time); }) .y(function (d) { return this.yScale(d.price); });

this.xScale = d3.scale.linear()…;

this.yScale = d3.scale.linear()…;

this.line = d3.svg.line() .x(function (d) { return this.xScale(d.time); }.bind(this)) .y(function (d) { return this.yScale(d.price); }.bind(this));

this.xScale = d3.scale.linear()…;

this.yScale = d3.scale.linear()…;

var that = this;

this.line = d3.svg.line() .x(function (d) { return that.xScale(d.time); }) .y(function (d) { return that.yScale(d.price); });

this.xScale = d3.scale.linear()…;

this.yScale = d3.scale.linear()…;

this.line = d3.svg.line() .x(d => this.xScale(d.time)) .y(d => this.yScale(d.price));`

module.exports = Backbone.View.extend({

render: function () { this.$el.html('Hello, Domenic!'); }

});

module.exports = Backbone.View.extend({

initialize: function (options) { Backbone.View.prototype.initialize.apply(this, arguments); this.listenTo(this.model, 'change', this.render); },

render: function () { this.$el.html('Hello, ' + this.model.get('name') + '!'); }

});

module.exports = class extends Backbone.View {

constructor(options) { super(options); this.listenTo(this.model, 'change', this.render); }

render() { this.$el.html(`Hello, ${this.model.get('name')}!`); }

};

function getSampledData(allData, options) {

var startIndex = options && options.startIndex === undefined ? 0 : options.startIndex;

var endIndex = options && options.endIndex === undefined ? allData.length - 1 : options.endIndex;

// Actually use these…

}

function getSampledData(allData, { startIndex = 0, endIndex = allData.length - 1 } = {}) {

// Actually use these…

}

git.io/es6features

arrows

classes

enhanced object literals

template strings

destructuring

default + rest + spread

let + const

iterators + for..of

generators

comprehensions

unicode

modules

module loaders

map + set

weakmap + weakset

proxies

symbols

subclassable built-ins

promises

math + number +string + object APIs

binary and octal literals

reflect api

tail calls

Commitment is an act,

not a word.

Firefox features (enabled!)

for-of/iterables

generators

rest/spread

default params

arrow functions

numeric literals

collections

proxies

number APIs

string APIs

array APIs

v8 flags (in Node 0.11)

--harmony_typeof

--harmony_scoping

--harmony_modules

--harmony_symbols

--harmony_proxies

--harmony_collections

--harmony_observation

--harmony_generators

--harmony_iteration

--harmony_numeric_literals

--harmony_strings

--harmony_arrays

--harmony_maths

v8 flags (on in Chrome 35)

--harmony_promises

--harmony_weak_collections

--harmony_maths

pick and choose• https://github.com/jlongster/es6-macros/

destructuring classes fat arrows

• https://github.com/facebook/regenerator generators!

• https://github.com/paulmillr/es6-shim string APIs, number APIs, array APIs, object APIs, math

APIs Map, Set, Promise

• https://github.com/Benvie/WeakMap weak maps!

traceur!

https://github.com/google/traceur-compilerhttp://es6fiddle.net/

Everything has been figured out,

except how to live.