JS Next

Presented at You Gotta Love Frontend in Tel Aviv

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
9. 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 Computer Manufacturer Association, now just Ecma • A group who oversees the standardization of many things, not just JS
10. 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.
11. E S 3 • Regex • String methods • Try / catch
12. E S 5 • JSON • Getters / setters • Strict mode • Reflection
13. E S 4 ? • Classes • Modules • Algebraic Data Types • Generators / Iterators • Destructuring • JSX lol (E4X) • Also the kitchen sink
15. 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
16. 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
17. 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
18. 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
19. 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)
20. 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
21. 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
22. 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
23. 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
26. B A B E L 6 WA S T H E M O S T I M P O R TA N T T H I N G I N R E C E N T J S H I S T O RY ⬇
27. # P R O P O S A L S I ’ M S T O K E D A B O U T $
28. O B J E C T R E S T / S P R E A D – S TA G E 3
29. 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 • /s makes the period character really match all characters
30. D Y N A M I C M O D U L E S – S TA G E 3 • import() • Many of you will have seen this before due to Webpack code splitting • Semantically similar to require.ensure()
31. 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.
32. 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
33. A S Y N C I T E R AT O R
34. P R O M I S E . P R O T O T Y P E . F I N A L LY – S TA G E 3
35. N E W C L A S S S E M A N T I C S • Public class fields – Stage 3 • Private fields – Stage 3 • Class and property decorators – Stage 2
36. C L A S S P R O P E R T I E S Before After via michalzalecki.com/react-components-and-class-properties/
37. P R I VAT E C L A S S P R O P E R T I E S
38. D E C O R AT O R S
39. I N T L . S E G M E N T E R – S TA G E 3 • An API to separate strings into graphemes • Surprisingly hard and computationally intensive • Examples: • Io parlo italiano • ฉันพูดภาษาไทย • %
40. " % " . l e n g t h
42. ["", "", "‍", "",].join("")
43. G E N E R AT O R S • Generator arrow functions – Stage 1 • function.sent – Stage 2
44. G E N E R AT O R A R R O W F U N C T I O N S – S TA G E 1 F U N C T I O N . S E N T – S TA G E 2
45. O P T I O N A L C H A I N I N G – S TA G E 1
46. I N T L . R E L AT I V E T I M E F O R M AT – S TA G E 2 • Gives relatives time strings for two dates. • “yesterday” • “ten minutes ago” • Internationalized! Built into the language!
47. D O E X P R E S S I O N S – S TA G E 1
48. A R R AY. P R O T O T Y P E . F L AT T E N – S TA G E 2
49. A R R AY. P R O T O T Y P E . F L AT M A P – S TA G E 2
50. P I P E L I N E O P E R AT O R – S TA G E 1
51. PA R T I A L A P P L I C AT I O N – S TA G E 1
52. 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
53. 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
54. PA R A M E T E R D E C O R AT O R S
55. WHATWG URL • Imagine not having to parse query strings or make your own URLs anymore
56. PAT T E R N M AT C H I N G
57. D E A D P R O P O S A L S
58. O B J E C T. O B S E R V E
59. S I M D
60. 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
61. B A B E L - P R E S E T- E N V
62. T H A N K Y O U ❤ B R I A N H O LT – @ H O LT B T