JS Next

3994a1ac47c4a684d7378ef06c1571cd?s=47 Brian Holt
October 30, 2017

JS Next

Presented at You Gotta Love Frontend in Tel Aviv

3994a1ac47c4a684d7378ef06c1571cd?s=128

Brian Holt

October 30, 2017
Tweet

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
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  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
  14. None
  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
  24. None
  25. None
  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

  41. 7

  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