ECMAScript 6: highlights and recommendations

1. ECMAScript 6: highlights and recommendations Front-Trends, 2015-05-06 Slides: speakerdeck.com/rauschma
2. Dr. Axel Rauschmayer, Ecmanauten.de ECMAScript 6 (ES6): JavaScript, improved ECMAScript 6: next version of JavaScript (current: ES5). This presentation: • Overview of ES6 • Assessment of ES6 features • Cool stuff you can do with ES6 2
3. Background
4. Dr. Axel Rauschmayer, Ecmanauten.de Important ES terms • TC39 (Ecma Technical Committee 39): the committee evolving JavaScript • ECMAScript: official name of the language • Versions: ECMAScript 5 is short for “ECMAScript Language Specification, Edition 5” • ECMAScript 2015: new official name for ES6 (in preparation for yearly releases in ES7+) • Complicated, because ES6 is already so established • JavaScript: the language, colloquially • ECMAScript Harmony: set of features after ES5 (ES6 and later) 4
5. Dr. Axel Rauschmayer, Ecmanauten.de Time table ECMAScript 6 is done: • The spec is frozen • June 2015: formal publication • Features are continually appearing in current engines. 5
6. Assessing ES6 features
7. Dr. Axel Rauschmayer, Ecmanauten.de Classes class Person { constructor(name) { this.name = name; } describe() { return 'Person called '+this.name; } } function Person(name) { this.name = name; } Person.prototype.describe = function () { return 'Person called '+this.name; }; 7
8. Dr. Axel Rauschmayer, Ecmanauten.de Why I recommend classes Pros: • Code more portable • Tool support (IDEs, type checkers, …) • Foundation for (longer term): • immutable objects • value objects • traits (similar to mixins) • Subclassing built-ins • Help many newcomers
 Cons: • Syntax quite different from semantics • Based on constructors, not prototype chains (directly) 8
9. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the good Good and boring: • Polyfillable parts of standard library (Maps, new String +Array methods, Promises) • Unify community, convenient syntax: • Modules • Classes • Arrow functions: less clutter, lexical this 9
10. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the good • Generators: lazy programming and cooperative multitasking • Proxies: meta-programming (shimming the DOM etc.) • WeakMaps: caching, private data • Destructuring: handling return values, parameters, for-of loop elements 10
11. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the bad • Enumerability more complicated than ever • Coercion rules for symbols are complicated, probably not worth their benefits • Disconnect between class syntax and class semantics (look like an object, are a function) • Kind-of work-around: treat them at face value 11
12. Dr. Axel Rauschmayer, Ecmanauten.de ES6 features: the OK • Symbols 12
13. Various cool features
14. Dr. Axel Rauschmayer, Ecmanauten.de Destructuring Extract multiple values via patterns: let obj = { first: 'Jane', last: 'Doe' }; let { first: f, last: l } = obj; // f='Jane', l='Doe' Can be used for: • variable declarations (var, let, const) • assignments • parameter definitions • for-of loop 14
15. Dr. Axel Rauschmayer, Ecmanauten.de Destructuring: arrays let [x, y] = ['a', 'b']; // x='a', y='b' let [x, y, ...rest] = ['a', 'b', 'c', 'd']; // x='a', y='b', rest = [ 'c', 'd' ] [x,y] = [y,x]; // swap values let [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31'); 15
16. Dr. Axel Rauschmayer, Ecmanauten.de Named parameters // Emulated via object literals and destructuring // { opt1, opt2 } is same as // { opt1: opt1, opt2: opt2 } selectEntries({ step: 2 }); selectEntries({ end: 20, start: 3 }); selectEntries(); // enabled via `= {}` below function selectEntries( {start=0, end=-1, step=1} = {}) { ··· }; 16
17. Dr. Axel Rauschmayer, Ecmanauten.de Template literals // String interpolation if (x > MAX) { throw new Error( `At most ${MAX} allowed: ${x}!` // 'At most '+MAX+' allowed: '+x+'!' ); } // Multiple lines let str = `this is a text with multiple lines`; 17
18. Dr. Axel Rauschmayer, Ecmanauten.de WeakMaps • Maps with arbitrary keys, arbitrary values • Key garbage collected 㱺 entry garbage collected • Thus: great for attaching data to objects 18
19. Dr. Axel Rauschmayer, Ecmanauten.de WeakMaps for private data let _counter = new WeakMap(); let _action = new WeakMap(); class Countdown { constructor(counter, action) { _counter.set(this, counter); _action.set(this, action); } dec() { let counter = _counter.get(this); if (counter < 1) return; counter--; _counter.set(this, counter); if (counter === 0) { _action.get(this)(); } } } 19
20. Cool features: generators
21. Dr. Axel Rauschmayer, Ecmanauten.de Generators as data consumers function* dataConsumer() { console.log('Started'); console.log(`1. ${yield}`); console.log(`2. ${yield}`); return 'result'; } > let genObj = dataConsumer(); > genObj.next() // progress to next suspension Started { value: undefined, done: false } > genObj.next('a') 1. a { value: undefined, done: false } > genObj.next('b') 2. b { value: 'result', done: true } 21
22. Dr. Axel Rauschmayer, Ecmanauten.de Async lazy processing: start let fileName = process.argv[2]; readFile(fileName, chain(splitLines, numberLines, printLines)); 22
23. Dr. Axel Rauschmayer, Ecmanauten.de Step 1: pushing data asynchronously /** * Create asynchronous ReadStream for file `fileName` * and feed it to generator object `target`. */ function readFile(fileName, target) { let readStream = createReadStream(fileName, { encoding: 'utf8', bufferSize: 1024 }); readStream.on('data', buffer => { let str = buffer.toString('utf8'); target.next(str); }); readStream.on('end', () => { // Signal end of output sequence target.return(); }); } 23
24. Dr. Axel Rauschmayer, Ecmanauten.de Step 2: text chunks → sequence of lines function* splitLines(target) { let previous = ''; try { while (true) { previous += yield; let eolIndex; while ((eolIndex = previous.indexOf('\n')) >= 0) { let line = previous.slice(0, eolIndex); target.next(line); previous = previous.slice(eolIndex+1); } } } finally { // Handle the end of the input sequence // (signaled via `return()`) if (previous.length > 0) { target.next(previous); } // Signal end of output sequence target.return(); } } 24
25. Dr. Axel Rauschmayer, Ecmanauten.de Step 3: prefix numbers to a sequence of lines function* numberLines(target) { try { for (let lineNo = 0; ; lineNo++) { let line = yield; target.next(`${lineNo}: ${line}`); } } finally { // Signal end of output sequence target.return(); } } 25
26. Dr. Axel Rauschmayer, Ecmanauten.de Step 4: log result function* printLines() { while (true) { let line = yield; console.log(line); } } Everything happens on demand, text chunk by text chunk! 26
27. Cool features: generators as data producers
28. Dr. Axel Rauschmayer, Ecmanauten.de Generators as data producers function* genFunc() { yield 'a'; yield 'b'; } > let genObj = genFunc(); > genObj.next() { value: 'a', done: false } > genObj.next() { value: 'b', done: false } > genObj.next() // end of sequence reached { value: undefined, done: true } 28
29. Dr. Axel Rauschmayer, Ecmanauten.de An iterator for a tree (1/2) class BinaryTree { constructor(value, left=null, right=null) { this.value = value; this.left = left; this.right = right; } /** Prefix iteration */ * [Symbol.iterator]() { yield this.value; if (this.left) { yield* this.left; } if (this.right) { yield* this.right; } } } 29
30. Dr. Axel Rauschmayer, Ecmanauten.de An iterator for a tree (2/2) let tree = new BinaryTree('a', new BinaryTree('b', new BinaryTree('c'), new BinaryTree('d')), new BinaryTree('e')); for (let x of tree) { console.log(x); } // Output: // a // b // c // d // e 30
31. Cool features: generators for async
32. Dr. Axel Rauschmayer, Ecmanauten.de Asynchronous programming (1/2) co(function* () { try { let [croftStr, bondStr] = yield Promise.all([ getFile('http://localhost:8000/croft.json'), getFile('http://localhost:8000/bond.json'), ]); let croftJson = JSON.parse(croftStr); let bondJson = JSON.parse(bondStr); console.log(croftJson); console.log(bondJson); } catch (e) { console.log('Failure to read: ' + e); } }); 32
33. Dr. Axel Rauschmayer, Ecmanauten.de Asynchronous programming (2/2) function getFile(url) { return fetch(url) .then(request => request.text()); } 33
34. Conclusion
35. Dr. Axel Rauschmayer, Ecmanauten.de Take-aways: ECMAScript 6 • Many features are already in engines • Can be used today, by compiling to ECMAScript 5 • Biggest impact on community (currently: fragmented): • Classes • Modules 35
36. Thank you! • Free online book by Axel: “Exploring ES6” • GitHub: rauschma/generator-examples/node/readlines.js © Scott the Hobo