ES6 in Real Life

4,892 views

Published on

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

Published in: Technology

ES6 in Real Life

  1. 1. ES6 in Real Life by @domenic
  2. 2. We do not yet know what we want and yet we are responsible for what we are
  3. 3. var line = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; });
  4. 4. var line = d3.svg.line() .x(d => d.x) .y(d => d.y);
  5. 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. 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. 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. 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. 9. module.exports = Backbone.View.extend({ render: function () { this.$el.html('Hello, Domenic!'); } });
  10. 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. 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. 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. 13. function getSampledData(allData, { startIndex = 0, endIndex = allData.length - 1 } = {}) { // Actually use these… }
  14. 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. 15. Commitment is an act, not a word.
  16. 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. 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. 18. v8 flags (on in Chrome 35) --harmony_promises --harmony_weak_collections --harmony_maths
  19. 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. 20. traceur! https://github.com/google/traceur-compiler http://es6fiddle.net/
  21. 21. Everything has been figured out, except how to live.

×