Your SlideShare is downloading. ×
  • Like
ES6 in Real Life
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

ES6 in Real Life

  • 2,677 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,677
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
8
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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