ES6: Features By Testing

35761e3936deba2f8189c2d20982c771?s=47 Kyle Simpson
September 18, 2015

ES6: Features By Testing

ES6 (aka ES2015) offers many new and exciting features, from expressive syntax, to new powerful built-in APIs, to entirely new-to-JS programming paradigms. We'll start by quickly reviewing some of the best of these coming attractions.

But how do we properly and responsibly bridge from our current code to the new ES6? Browser support in the newest browsers is already very strong, but has a long way to go, and older browsers still loom.

Let's look to feature testing to fully embrace everything JS has to offer our applications, not only now but beyond ES6!

35761e3936deba2f8189c2d20982c771?s=128

Kyle Simpson

September 18, 2015
Tweet

Transcript

  1. kyle simpson http://getify.me @getify ES6: features by testing

  2. ES6/2015

  3. Block-Scoped Declarations Spread / Rest Default Parameter Values Destructuring Object

    Literal Extensions Template Literals Arrow Functions `for..of` Loops Regular Expression Extensions Number Literal Extensions Unicode Symbols Iterators Generators Modules Classes
  4. Promises Generators + Promises Typed Arrays Maps WeakMaps Sets WeakSets

    `Array` `Object` `Math` `Number` `String` Function Names Meta Properties Well Known Symbols Proxies `Reflect` API Tail Call Optimization (TCO)
  5. the hype

  6. arrow functions

  7. arrow functions

  8. arrow functions • will it ever need this/super? • will

    it ever need a lexical name? • will it ever need more than one statement? • will its return have side effects? • are all the syntax variances really readable/obvious? caveats
  9. arrow functions

  10. the substance

  11. array spread :(

  12. array spread \o/

  13. array spread :(

  14. array spread \o/

  15. array gather (aka "rest") :(

  16. array gather (aka "rest") \o/

  17. parameter defaults :(

  18. parameter defaults \o/

  19. destructuring :(

  20. destructuring & concise properties :/

  21. destructuring & concise properties whitespace / indentation ftw \o/

  22. destructuring (renaming/defaults) :(

  23. destructuring (renaming/defaults) \o/

  24. destructuring & restructuring

  25. destructuring & restructuring :(

  26. \o/ destructuring & restructuring

  27. async: promises & generators :(

  28. async: promises & generators :/

  29. async: promises & generators github.com/getify/asynquence \o/

  30. \o/ async: promises & generators

  31. \o/ async: promises & generators

  32. \o/ async: promises & generators

  33. async: promises & generators async functions (es7'ish) \o/

  34. :/ async: promises & generators

  35. \o/ async: promises & generators

  36. iterators :(

  37. iterators \o/

  38. iterators :/

  39. \o/ iterators

  40. excited yet!?

  41. ES6 browsers are ubiquitous, right? not exactly. :(

  42. transpiling ftw \o/

  43. None
  44. polyfills ftw \o/

  45. github.com/paulmillr/es6-shim

  46. None
  47. what features do you need?

  48. 96% of all JS programs need less than 37% of

    ES6 *totally made up * *
  49. Microsoft Edge 0.11.10074.0 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

    (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
  50. None
  51. transpiling & polyfilling: can't • several well-known symbols • subclassing

    natives • __proto__ • tail call optimization (rewriting to tail calls can) https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/ suggestions/6850816-es6-tail-call-optimization • others... caveats
  52. transpiling ftl polyfills ftl :(

  53. None
  54. feature testing ftw \o/

  55. feature testing: APIs

  56. feature testing: syntax

  57. feature testing: syntax

  58. https://FeatureTests.io

  59. https://FeatureTests.io

  60. demo

  61. don't shy away from ES6+, start using these features now

  62. ongoing gap

  63. don't serve code on the trailing edge of that gap

  64. transpiling & polyfilling => developing for the current & future

  65. serve the right code for the right browser

  66. blog.getify.com/smarter-transpilation-strategy

  67. kyle simpson http://getify.me @getify thanks! https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20& %20beyond/README.md#you-dont-know-js-es6--beyond