A lightning talk on why and how you can use ES6 in your real life code, right now, today!

1. ES6 in Real Life
by @domenic

2. We do not yet know what we want
and yet we are responsible for what we are

3. var line = d3.svg.line()
.x(function (d) { return d.x; })
.y(function (d) { return d.y; });

4. var line = d3.svg.line()
.x(d => d.x)
.y(d => d.y);

5. 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); });

6. 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));

7. 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); });

8. 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));`

9. module.exports = Backbone.View.extend({
render: function () {
this.$el.html('Hello, Domenic!');
}
});

10. 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') + '!');
}
});

11. 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')}!`);
}
};

12. 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…
}

13. function getSampledData(allData, {
startIndex = 0,
endIndex = allData.length - 1 } = {}) {
// Actually use these…
}

14. 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

15. Commitment is an act,
not a word.

16. Firefox features (enabled!)
for-of/iterables
generators
rest/spread
default params
arrow functions
numeric literals
collections
proxies
number APIs
string APIs
array APIs

17. 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

18. v8 flags (on in Chrome 35)
--harmony_promises
--harmony_weak_collections
--harmony_maths

19. 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!

20. traceur!
https://github.com/google/traceur-compiler
http://es6fiddle.net/

21. Everything has been figured out,
except how to live.