Wrangling Transpilation

The new reality of JavaScript is that the features will evolve even quicker than the specification, and much quicker than your “supported” browsers. So we’re going to have to come to grips with transpilers being a standard part of our build processes. But what can we do to wrangle at least two versions of every file? What does that mean for server-side coding (node/iojs) and what does it mean for browser-delivered files? Should we use the transpiled code everywhere, or should we have split delivery?

Transcript

1. kyle simpson http://getify.me @getify wrangling transpilation
3. ES6/2015
4. 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
5. 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)
6. array spread
7. array spread
8. array spread
9. array spread
10. array gather (aka "rest")
11. array gather (aka "rest")
12. parameter defaults
13. parameter defaults
14. destructuring
15. destructuring & concise properties
16. destructuring (renaming/defaults)
17. destructuring (renaming/defaults)
18. destructuring & restructuring
19. destructuring & restructuring
20. destructuring & restructuring
21. excited yet!?
22. ES6 browsers are ubiquitous, right?
23. ES6 browsers are ubiquitous, right? not exactly. :(
24. transpiling ftw
26. polyfills ftw
27. github.com/paulmillr/es6-shim/
28. what features do you need?
29. 96% of all JS programs need less than 37% of ES6
30. 96% of all JS programs need less than 37% of ES6 *totally made up * *
31. 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
32. 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
34. 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
35. transpiling ftl polyfills ftl
36. feature testing ftw
37. feature testing: APIs
38. feature testing: syntax
39. feature testing: syntax
40. https://FeatureTests.io
41. https://FeatureTests.io
42. demo
43. don't shy away from ES6+, start using these features now
44. ongoing gap
45. don't serve code on the trailing edge of that gap
47. transpiling & polyfilling is about developing for the current/future
48. serve the right code for the right browser
49. demo
50. transpile always?
51. can it write better code than we can?
53. uglify
54. demo
55. 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