JavaScript Futures: ES2018 and Beyond

JavaScript keeps on expanding. As adoption of the extensive new features from ES6 has spread and projects have adapted, the language has continued to evolve under the guidance of Ecma TC39. Over the past two years, another handful of constructs entered the ECMAScript specification. And there are nearly two dozen more proposals on the cusp of being added.

One thing is certain: the JavaScript community is not slowing down! How can we determine when it is “safe” to use a new feature? Investigate the new and proposed features of JavaScript. Understand the TC39 review process. And most of all, become empowered to prepare for what lies ahead.

Transcript

1. #jsFutures E S 2 0 1 8 A N D T H E R O A D A H E A D @ j e f f r e y s t r a u ss
2. “ JavaScript just keeps on expanding!
3. expanding WHAT? WHY? HOW?
4. ECMAScript !== JS
6. ECMAScript
7. ECMAScript 2015
8. ECMAScript 2016
9. ECMAScript 2017
10. ECMAScript 2018
11. ES.Next
12. experiment this is an ongoing evolution
13. ECMAScript 2017
14. features
15. features
16. Object static methods
17. Object.values(obj)
18. let boy = { name: 'Keller', age: 7 }; let values = Object.values(boy); console.log(values); // ['Keller', 7] ES2017:
19. Object.entries(obj)
20. let girl = { name: 'Madeleine', age: 3.5 }; let entries = Object.entries(girl); console.log(entries); // [ ['name', 'Madeleine'], ['age', 3.5] ] ES2017:
21. let family = { dad: 'Jeff', mom: 'Jamie', boy: 'Keller', girl: 'Madeleine' }; ES2017:
22. let family = { dad: 'Jeff', mom: 'Jamie', boy: 'Keller', girl: 'Madeleine' }; for (const [k, v] of Object.entries(family)) { // iterate over and do something with properties } ES2017:
23. string padding
24. let team = ['Jeff', 'Jon', 'Lee', 'Boon']; team.forEach(p => console.log(p)); // Jeff // Jon // Lee // Boon ES2017:
25. padStart(max[, fill])
26. let team = ['Jeff', 'Jon', 'Lee', 'Boon']; team.forEach(p => console.log(p.padStart(8)); // Jeff // Jon // Lee // Boon ES2017:
27. let team = ['Jeff', 'Jon', 'Lee', 'Boon']; team.forEach(p => console.log(p.padStart(8, '-')); // ----Jeff // -----Jon // -----Lee // ----Boon ES2017:
28. padEnd(max[, fill])
29. trimStart / trimEnd
30. async & await
31. function chainCallbacks() { loadData(function(a) { loadDependentData(a, function(b) { processData(b, function(c) { saveData(c, function(d) { console.log(d); }); }); }); }); } PRE-ES2015
32. function chainPromises() { loadData() .then(a => loadDependentData(a)) .then(b => processData(b)) .then(c => saveData(c)) .then(d => console.log(d)); } ES2015 (PROMISES)
33. async function awaitCalls() { const a = await loadData(); const b = await loadDependentData(a); const c = await processData(b); const d = await saveData(c); console.log(d); } ES2017 (ASYNC/AWAIT)
34. async function awaitCalls() { try { const a = await loadData(); const b = await loadDependentData(a); const c = await processData(b); const d = await saveData(c); console.log(d); } catch(ex) { // handle the error } } ES2017 (ASYNC/AWAIT)
35. wraps in promise
36. async function awaitCalls() { const a = await loadData(); const b = await loadOtherData(a); const c = await processTheData(b); const d = await saveData(c); return d; // wraps d in Promise } awaitCalls().then(response => { console.log(response); // response resolves to d }); ES2017 (ASYNC/AWAIT)
37. multiple prerequisites
38. function multiSetProcess() { let taskA = loadDataSet1(); let taskB = loadDataSet2(); Promise.all([a, b]).then(results => { processData(...results).then(c => { console.log(c); }); }); } ES2015
39. async function multiSetProcess() { let taskA = loadDataSet1(); let taskB = loadDataSet2(); const [a, b] = await Promise.all([taskA, taskB]); console.log(await processData(a, b)); } ES2017
40. await "at the top"
41. // app.js console.log(await someAsyncCall()); ⓧ Uncaught SyntaxError: Unexpected identifier ES2017
42. // app.js (async () => { console.log(await someAsyncCall()); })(); ES2017
43. other stuff TRAILING COMMAS DESCRIPTORS SHARED MEMORY ATOMICS
44. ECMAScript 2018
45. rest & spread properties
46. ...
47. // spread syntax let arrToThree = [1, 2, 3]; let arrToSix = [...arrToThree, 4, 5, 6]; arrToSix; // [1, 2, 3, 4, 5, 6] ES2015
48. // rest parameters function sum(...allArgs) { return allArgs.reduce((prev, curr) => { return prev + curr; }); } console.log(sum(2, 4, 6, 8, 42)); ES2015
49. // spread properties for object initializers let person = { first: 'Jeff', last: 'Strauss' }; let work = { company: 'WWT', location: 'St. Louis' }; let user = { ...person, ...work, lovesJavaScript: true }; ES2018
50. // spread properties for object initializers let person = { first: 'Jeff', last: 'Strauss' }; let work = { company: 'WWT', location: 'St. Louis' }; ES2018 let user = { ...person, ...work, lovesJavaScript: true };
51. // spread properties for object initializers user; /* { first: 'Jeff', last: 'Strauss', company: 'WWT', location: 'St. Louis', lovesJavaScript: true } */ ES2018
52. let person = { first: 'Jeff', last: 'Strauss', city: 'St. Louis', kids: 2 }; ES2018 let { first, last, ...info } = person; // rest properties for destructuring
53. first; // 'Jeff' last; // 'Strauss' info; // { city: 'St. Louis', kids: 2 } ES2018 let { first, last, ...info } = person; // rest properties for destructuring
54. f; // 'Jeff' l; // 'Strauss' info; // { city: 'St. Louis', kids: 2 } ES2018 let { first: f , last: l, ...info } = person; // rest properties for destructuring
55. async iteration
56. // loop over an iterable for (let item of values) {
 console.log(item); } ES2015
57. // suppose getValues generates items asynchronously for (let item of getValues(seed)) {
 console.log(item); } ⓧ Uncaught TypeError: getValues(...) is not a function or its return value is not iterable ES2015
58. use cases REMOTE DATA FILE I/O READABLE STREAMS
59. for-await-of loop
60. // suppose getValues generates items asynchronously for await (let item of getValues(seed)) {
 console.log(item); } ES2015
61. {value, done}
62. Promise<{value, done}>
63. async function* getFoo()
64. other stuff PROMISE.FINALLY TEMPLATE LITERALS REGEX FEATURES EMPTY CATCH
65. ES.Next
66. “Wow, what else is coming?
67. “All kinds of stuff! Eventually...
68. top-level await
69. import()
70. public & private fields
71. static methods
72. decorators
77. EUROPEAN COMPUTER MANUFACTURERS ASSOCIATION
78. ECMA-262
79. TC39
80. TC39 MOZILLA GOOGLE MICROSOFT INTEL JQUERY
81. the TC39 process
82. stages
83. strawman
84. input to process
85. proposal
86. rationale • solution • challenges
87. draft
88. syntax • semantics • formal spec
89. candidate
90. implementations • feedback
91. finished
92. ready for inclusion
93. seeing the future
94. so many proposals
96. github.com/ tc39/ecma262
97. proposals FINISHED ACTIVE STAGE 0 INACTIVE
98. github.com/ tc39/test262
99. github.com/rwaldron/ tc39-notes
100. implementations
103. bit.ly/ecma-compat
104. DISCUSS
105. W H E R E T O G O F R O M H E R E invest
106. educate
107. empower
108. #jsFutures j e f f r e y . s . s t r a u ss @ g m a i l . c o m @ j e f f r e y s t r a u ss