ES6 in Real Life
Download as PPTX, PDF6 likes5,535 views
The document discusses using ES6 features in real-world applications. It provides examples of using arrow functions, classes, destructuring, template literals, and default parameters to write cleaner code. It also discusses tools for enabling ES6 features that are not yet fully supported, such as transpilers, and flags in Node.js and Chrome to enable more experimental features. Overall, the document advocates adopting ES6 features that make code more concise and readable.
ES6 in Real Life
- 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!
- 21. Everything has been figured out, except how to live.