ES2016: What Comes Next

Transcript

1. What Comes Next ES7
2. dfreeman github.com/ Dan Freeman
3. dfreeman@salsify.com Dan Freeman We’re hiring!
4. JavaScript
5. ECMAScript
6. What Came Before History
7. JavaScript: The Old Parts ES3
8. ES3 • Lowest common denominator for browser support (if you care about IE8) • Most of the features we take for granted as being “JavaScript” today var input = [1, 2, 3], output = []; for (var i = 0, len = input.length; i < len; i++) { output.push(input[i] * 2); } console.log(output); // [2, 4, 6]
9. ES3 ✓
10. ES4 ES3 ✓
11. JavaScript: The Shiny New Parts ES4
12. ES4 • Represented a massive overhaul of the language • Introduced a ton of new features to help with large, complex projects ‣ Classes ‣ Modules ‣ Generators and Iterators ‣ Destructuring ‣ (…starting to sound familiar?) ‣ Algebraic Data Types ‣ Optional Static Typing
13. ES4 ES4 ES3 ✓ ES5
14. ES5 JavaScript: The Parts Somewhat Less Full-of-Foot-Gun
15. ES5 • Much smaller in scope than ES4, focused mainly on standardizing what was already out there and avoiding common pitfalls. var input = [1, 2, 3]; var output = input.map(function(value) { return value * 2; }); console.log(output); // [2, 4, 6] ‣ Getters and setters ‣ Reflection (property descriptors) ‣ New library functions ‣ Function#bind ‣ Array#map/filter/reduce ‣ JSON.parse/stringify ‣ Strict Mode
16. ES5 ES3 ✓ ✓
17. ES5 ✓ ES3 ✓ ES6
18. ES6 JavaScript: The Harmonious Parts
19. ES6 • A second attempt at introducing some of the proposed features from ES4, but with an emphasis on gathering consensus and moving toward a more incremental release process. const input = [1, 2, 3]; const output = input.map(value => value * 2); console.log(output); // [2, 4, 6] ‣ Classes ‣ Modules ‣ Generators ‣ Destructuring ‣ Block Scoping ‣ Default Param Values ‣ Maps and Sets ‣ Rest/Spread ‣ Enhanced Object Literals ‣ Template Strings ‣ Symbols ‣ Proxies ‣ Promises ‣ Tail Call Optimization ‣ Binary and Octal Literals ‣ Arrows
20. ES5 ✓ ES3 ✓ ES6 ✓
21. ES5 ✓ ES3 ✓ ES6 ✓ ES7
22. ES5 ✓ ES3 ✓ ES2015 ✓ ES2016
23. JavaScript: The Next Parts ES2016
24. ES2016 Whew.
25. ES2016 Where are we today?
26. ES2016 ‣ TC39 is working on features for the 2016 edition of ECMA-262 ‣ Features move through a 4-stage process to make it into the spec, and must be accepted by TC39 at each stage to move forward. (Technical Committee) (The ES Specification)
27. ES2016 ‣ Stage 1 – Proposal. TC39 “expects to devote time to examining the problem space” https://tc39.github.io/process-document ‣ Stage 2 – Draft. TC39 “expects the feature to be developed and eventually included in the standard” ‣ Stage 3 – Candidate. “[No] further work is possible without implementation experience, significant usage and external feedback” ‣ Stage 4 – Finished. “The addition will be included in the soonest practical standard revision”
28. ES2016 Ok fine, but what about The New Stuff™?
29. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
30. Small Things (1/4) Export Extensions 1 // Expose all of a module's named // exports as a single named object import * as v from 'mod'; export v; // Expose another module's default // export with a given name import v from 'mod'; export v; // Expose all of a module's named // exports as a single named object import * as v from 'mod'; export v; // Expose another module's default // export with a given name import v from 'mod'; export v; https://github.com/leebyron/ecmascript-more-export-from
31. Small Things (1/4) // Expose all of a module's named // exports as a single named object import * as v from 'mod'; export v; // Expose another module's default // export with a given name import v from 'mod'; export v; // Expose all of a module's named // exports as a single named object export * as v from 'mod'; // Expose another module's default // export with a given name export v from 'mod'; https://github.com/leebyron/ecmascript-more-export-from Export Extensions 1
32. Small Things (2/4) const input = { first: 'Dan', last: 'Freeman' }; const augmented = Object.assign( {}, input, { first: 'Daniel' } ); // { first: 'Daniel', last: 'Freeman' }; const input = { first: 'Dan', last: 'Freeman' }; const augmented = Object.assign( {}, input, { first: 'Daniel' } ); // { first: 'Daniel', last: 'Freeman' }; https://github.com/sebmarkbage/ecmascript-rest-spread Rest/Spread Properties 2
33. Small Things (2/4) const input = { first: 'Dan', last: 'Freeman' }; const augmented = { ...input first: 'Daniel' }); // { first: 'Daniel', last: 'Freeman' }; const input = { first: 'Dan', last: 'Freeman' }; const augmented = Object.assign( {}, input, { first: 'Daniel' } ); // { first: 'Daniel', last: 'Freeman' }; https://github.com/sebmarkbage/ecmascript-rest-spread Rest/Spread Properties 2
34. Small Things (2/4) function go(options) { const { key } = options; const rest = _.omit(options, 'key'); return [key, rest]; } go({ key: 'yes', x: 1, y: 2 }); // ['yes', { x: 1, y: 2 }] function go(options) { const { key } = options; const rest = _.omit(options, 'key'); return [key, rest]; } go({ key: 'yes', x: 1, y: 2 }); // ['yes', { x: 1, y: 2 }] https://github.com/sebmarkbage/ecmascript-rest-spread Rest/Spread Properties 2
35. Small Things (2/4) function go(options) { const { key } = options; const rest = _.omit(options, 'key'); return [key, rest]; } go({ key: 'yes', x: 1, y: 2 }); // ['yes', { x: 1, y: 2 }] function go({ key, ...rest }) { return [key, rest]; } go({ key: 'yes', x: 1, y: 2 }); // ['yes', { x: 1, y: 2 }] https://github.com/sebmarkbage/ecmascript-rest-spread Rest/Spread Properties 2
36. Small Things (3/4) const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); // ['a', 'b'] keys.map(key => obj[key]); // [1, 2]; keys.map(key => [key, obj[key]]); // [['a', 1], ['b', 2]]; const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); // ['a', 'b'] keys.map(key => obj[key]); // [1, 2]; keys.map(key => [key, obj[key]]); // [['a', 1], ['b', 2]]; https://github.com/ljharb/proposal-object-values-entries Object.values/Object.entries 2
37. Small Things (3/4) const obj = { a: 1, b: 2 }; const keys = Object.keys(obj); // ['a', 'b'] keys.map(key => obj[key]); // [1, 2]; keys.map(key => [key, obj[key]]); // [['a', 1], ['b', 2]]; const obj = { a: 1, b: 2 }; Object.keys(obj); // ['a', 'b'] Object.values(obj); // [1, 2]; Object.entries(obj); // [['a', 1], ['b', 2]]; https://github.com/ljharb/proposal-object-values-entries Object.values/Object.entries 2
38. Small Things (3/4) const obj = { a: 1, b: 2 }; for (const [key, value] of Object.entries(obj)) { console.log(`${key}: ${value}`); } // a: 1 // b: 2 https://github.com/ljharb/proposal-object-values-entries Object.values/Object.entries 2
39. Small Things (4/4) const array = ['fizz', 'buzz']; if (array.indexOf('buzz') !== -1) { console.log('busy bee!'); } const array = ['fizz', 'buzz']; if (array.indexOf('buzz') !== -1) { console.log('busy bee!'); } https://github.com/tc39/Array.prototype.includes Array#includes 3
40. Small Things (4/4) const array = ['fizz', 'buzz']; if (array.indexOf('buzz') !== -1) { console.log('busy bee!'); } const array = ['fizz', 'buzz']; if (array.includes('buzz')) { console.log('busy bee!'); } https://github.com/tc39/Array.prototype.includes Array#includes 3
41. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
42. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
43. Big Things (1/3) https://github.com/jeffmo/es-class-properties const Person = Ember.Object.extend({ skills: [], learn(skill) { this.get('skills').pushObject(skill); } }); const sue = new Person(); sue.learn('coding'); sue.learn('cooking'); sue.get('skills'); // ['coding', 'cooking'] const mike = new Person(); mike.learn('sewing'); mike.get('skills'); // ['coding', 'cooking', 'sewing'] // ... // Uh oh. Class Properties 1
44. Big Things (1/3) https://github.com/jeffmo/es-class-properties const sue = new Person(); sue.learn('coding'); sue.learn('cooking'); sue.skills; // ['coding', 'cooking'] const mike = new Person(); mike.learn('sewing'); mike.skills; // ['sewing'] // // Good. class Person { constructor() { this.skills = []; } learn(skill) { this.skills.push(skill); } } Class Properties 1
45. Big Things (1/3) https://github.com/jeffmo/es-class-properties const sue = new Person(); sue.learn('coding'); sue.learn('cooking'); sue.skills; // ['coding', 'cooking'] const mike = new Person(); mike.learn('sewing'); mike.skills; // ['sewing'] // // Good. class Person { skills = []; learn(skill) { this.skills.push(skill); } } Class Properties 1
46. Big Things (2/3) https://github.com/wycats/javascript-decorators Decorators 1 const obj = { writable: 'hello' }; Object.defineProperty(obj, 'constant', { value: 'world', writable: false }); obj.writable = 'goodbye'; obj; // { writable: 'goodbye', constant: 'world' }; obj.constant = 'mars'; // TypeError: Cannot assign to read only property 'constant'
47. Big Things (2/3) https://github.com/wycats/javascript-decorators Decorators 1 const obj = { writable: 'hello', @readOnly constant: 'world' }; function readOnly(target, name, descriptor) { descriptor.writable = false; return descriptor; }
48. Big Things (2/3) https://github.com/wycats/javascript-decorators Decorators 1 const Person = Ember.Object.extend({ first: null, last: null, fullName: Ember.computed('first', 'last', function() { const first = this.get('first'); const last = this.get('last'); return `${first} ${last}`; }) }); Person.create({ first: 'John', last: 'Doe' }) .get('fullName'); // 'John Doe'
49. Big Things (2/3) https://github.com/wycats/javascript-decorators Decorators 1 const Person = Ember.Object.extend({ first: null, last: null, @computed('first', 'last') fullName(first, last) { return `${first} ${last}`; } }); Person.create({ first: 'John', last: 'Doe' }) .get('fullName'); // 'John Doe'
50. Big Things (3/3) https://github.com/tc39/ecmascript-asyncawait Async Functions 3 function fetchTopComments() { return API.fetchBlogPosts({ sort: 'comments' }) .then((posts) => { return posts.map(post => post.comments).flatten(); }) .catch((error) => { showAlert('error', error); }); }
51. Big Things (3/3) https://github.com/tc39/ecmascript-asyncawait Async Functions 3 async function fetchTopComments() { try { const posts = await API.fetchBlogPosts({ sort: 'comments' }); return posts.map(post => post.comments).flatten(); } catch (e) { showAlert('error', error); } }
52. Big Things (3/3) https://github.com/tc39/ecmascript-asyncawait Async Functions 3 test('filling things out', (assert) => { visit('/posts/new'); andThen(() => { assert.equal(currentRouteName(), 'posts.new'); }); fillIn('[data-role=description]', 'Test Description'); click('[data-role=add]'); andThen(() => { assert.equal(find('[data-role=title]').length, 1); }); });
53. Big Things (3/3) https://github.com/tc39/ecmascript-asyncawait Async Functions 3 test('filling things out', async (assert) => { await visit('/posts/new'); assert.equal(currentRouteName(), 'posts.new'); fillIn('[data-role=description]', 'Test Description'); await click('[data-role=add]'); assert.equal(find('[data-role=title]').length, 1); });
54. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
55. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
56. Science Fiction (1/2) https://github.com/allenwb/ESideas/blob/master/ES7MetaProps.md Function Metaproperties 0 const factorial = (n) => n <= 1 ? 1 : n * function.callee(n - 1); ‣ function.callee ‣ function.arguments ‣ function.count const args = (x, y) => function.arguments; args(1, 2, 3); // [1, 2, 3] const len = (a, b=null) => function.count; len(true); // 1 len(true, null); // 2
57. Science Fiction (2/2) https://github.com/zenparsing/es-function-bind Bind Operator 0 const log = console.log; log('hello'); // TypeError: Illegal invocation const log = console.log.bind(console); log('hello'); // hello const log = ::console.log; log('hello'); // hello
58. Science Fiction (2/2) https://github.com/zenparsing/es-function-bind Bind Operator 0 import _ from 'lodash'; const people = [ { name: 'Fred', age: 40 }, { name: 'Barney', age: 38 } ]; _.chain(people) .sortBy('age') .mapBy('name') .first() .value(); // 'Barney' import _ from 'lodash'; const people = [ { name: 'Fred', age: 40 }, { name: 'Barney', age: 38 } ]; _.chain(people) .sortBy('age') .mapBy('name') .first() .value(); // 'Barney'
59. Science Fiction (2/2) https://github.com/zenparsing/es-function-bind Bind Operator 0 import _ from 'lodash'; const people = [ { name: 'Fred', age: 40 }, { name: 'Barney', age: 38 } ]; _.chain(people) .sortBy('age') .mapBy('name') .first() .value(); // 'Barney' import { sortBy, mapBy, first } from 'lodash'; const people = [ { name: 'Fred', age: 40 }, { name: 'Barney', age: 38 } ]; people ::sortBy('age') ::mapBy('name') ::first(); // 'Barney'
60. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
61. ES2016: The New Stuff ‣ Science Fiction Things ‣ Small Things ‣ Big Things
62. ES2016 What Comes Next
63. ES2016 Some of What Could Come Next https://github.com/tc39/ecma262