Wrangling Transpilation

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?

35761e3936deba2f8189c2d20982c771?s=128

Kyle Simpson

June 16, 2015
Tweet

Transcript

  1. kyle simpson http://getify.me @getify wrangling transpilation

  2. None
  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

  25. None
  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
  33. None
  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

  46. None
  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?

  52. None
  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