What's Coming After ES6

Presented at JAZOON 2017 and WeAreDevelopers 2017.

Transcript

1. W H AT ’ S C O M I N G A F T E R E S 6 B R I A N H O LT – @ H O LT B T – N E T F L I X
6. H O W D O E S J AVA S C R I P T E V O LV E ? • TC39 – Technical Committee 39 • The committee who meets to standardize ECMAScript • ECMA-262 • The actual document that defines what’s in the ECMAScript language • Ecma – formerly European Manufacturer Association, now just Ecma • A group who oversees the standardization of many things, not just JS
7. H O W D O E S J AVA S C R I P T E V O LV E ? • ECMAScript • JavaScript is an implementation of ES. They’re could be other implementations; they’re just aren’t any of note. • ES3, ES5, ES6/ES2015, ES2016, ES2017, etc. • Major revisions of the language. With ES6/ES2015 we changed to a yearly release cycle. • We skipped ES4 for many reasons but chiefly lack of consensus. • Features are now added in stages.
8. E S 3 • Regex • String methods • Try / catch
9. E S 5 • JSON • Getters / setters • Strict mode • Reflection
10. E S 4 ? • Classes • Modules • Algebraic Data Types • Generators / Iterators • Destructuring • JSX lol (E4X) • Also the kitchen sink
12. T H E E 4 X S TA N D A R D WA S D E P R E C AT E D B Y T H E M O Z I L L A F O U N D AT I O N I N 2 0 1 4
13. W H AT M A K E S I T I N T O J S • Enables new things you could not do before (e.g. generators) • Extremely common patterns that could interop with other features if added (e. g. promises) • Such common patterns that it makes sense to add to the language, especially if large or performance sensitive (e.g. JSON.stringify) • Everything else should be added by libraries / userland
14. S TA G E 0 • Strawman • Anyone can propose features to be added to JS • A member of TC39 must be one of the champions of the feature for it to make stage 1 • Many stage 0 proposals never make it to stage 1
15. S TA G E 1 • Proposal • High level API and example usage outlined • Not concrete yet, to be hammered out in committee and discussed how it will interact with other features • Still expected to change majorly before landing as a feature • Definitely still not a guarantee that it’s going to make it into JS
16. S TA G E 2 • Draft • Needs an draft document now, covers most use cases • The committee will start expecting this feature to land and adapt other feature accordingly • Incremental changes still expected • Expected to be a functioning Babel plugin • Far more likely now to make it into JS (still not guaranteed)
17. S TA G E 3 • Candidate • Spec must be exhaustive of every use case • Little-to-no changes expected; only those pushed by implementers (e. g. tail call recursion) • Expected to be implemented in one browser • Almost guaranteed at this point to make it in JS
18. S TA G E 4 • Finished • Test262 (the testing suite to test the spec) tests expected • Two browsers now implement it and been in the wild for a bit • No changes at this point
19. N E W V E R S I O N O F E S 2 0 X X • Every March a new version of ES20XX is cut with all the proposals that are at stage 4 • Miss the deadline? You wait until next March • From March to July only editorial changes are made • In July the spec is finalized and released
20. E S 2 0 1 7 • Object.entries / Object.values • async / await • str.padStart / str.padEnd • Object.getOwnPropertyDescriptors • Trailing commas in params • Shared memory / atomics
21. E S 2 0 1 8 • Lifting Template Literal Restriction
24. ! P R O P O S A L S I ’ M S T O K E D A B O U T "
25. O B J E C T R E S T / S P R E A D – S TA G E 3
26. R E G E X I M P R O V E M E N T S – S TA G E 3 • Lookbehind • Named Capture Groups • Better Unicode support • Supports features like matching only Greek characters
27. D Y N A M I C M O D U L E S – S TA G E 3 • System.import() • Many of you will have seen this before due to Webpack code splitting • Semantically similar to require.ensure()
28. G L O B A L – S TA G E 3 • Instead of const globalObj = window ? window : global; you can just reference global and it will refer to window in browser and global in Node.
29. N E W A S Y N C C A PA B I L I T I E S • Async Iterator – Stage 3 • Since both the next value in the sequence and the "done" state of the data source must be known at the time that the iterator method returns, iterators are only suitable for representing synchronous data sources. • Observable – Stage 1 • Similar to iterators but instead of you pulling data of an iterator, an observable pushes data at you • Think promises with multiple returns at different times
30. A S Y N C I T E R AT O R
31. N E W C L A S S S E M A N T I C S • Public class fields – Stage 2 • Private fields – Stage 2 • Class and property decorators – Stage 2
32. C L A S S P R O P E R T I E S
33. D E C O R AT O R S
34. I N T L . S E G M E N T E R • An API to separate strings into graphemes • Surprisingly hard and computationally intensive • Examples: • Io parlo italiano • ฉันพูดภาษาไทย • #
35. G E N E R AT O R S • Generator arrow functions – Stage 1 • function.sent
37. N U L L P R O PA G AT I O N O P E R AT O R
38. T E M P O R A L • Ever used Moment.js for dates? • Temporal would give you most of what’s commonly used built into the language!
40. S TA G E 0 WA R N I N G : T H E R E B E D R A G O N S H E R E
41. B I N D O P E R AT O R ( U N A RY )
42. B I N D O P E R AT O R ( B I N A RY )
43. F U N C T I O N E X P R E S S I O N D E C O R AT O R S
44. PA R A M E T E R D E C O R AT O R S
45. D E A D P R O P O S A L S
46. O B J E C T. O B S E R V E
47. S I M D
48. H O W D O I H E L P ? • Use the new features, break them, abuse them • Tweet / talk about them • Follow the tc39/proposals repo on GitHub • Propose your ideas • Contribute to Babel
49. B A B E L - P R E S E T- E N V
50. T H A N K Y O U & ' B R I A N H O LT – @ H O LT B T – N E T F L I X