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!

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/
44. polyfills ftw \o/
45. github.com/paulmillr/es6-shim
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
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 :(
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