Bridge to the future

A talk I gave at Netflix discussing the costs and benefits when using ECMAScript Transpilers. I also cover what we're doing today on the Netflix UI Engineering team to help mitigate some of costs.

More information on twitter at https://twitter.com/jemyoung

Transcript

1. Bridge to the future Transpiling JavaScript at Netflix
2. June 17, 2015
3. ES2015 :(
4. ES2015
6. ES2015 There is a cost.
7. ES2015
9. Jem Young Senior Software Engineer @jemyoung
10. Contents 01 What is a transpiler? 03 Cost 04 What we do 02 Benefits
11. What this talk is
12. Why should you listen to me?
14. What makes a great JavaScript engineer? Understand latest technology Solve problems they’ve never seen before Empathetic
17. DEVELOPER EXPERIENCE USER EXPERIENCE
18. DX UX
20. What is a transpiler?
21. What is a transpiler? transcompiler source-to-source compiler
22. What is a transpiler?
23. What is a transpiler?
24. What is a transpiler?
25. What is a transpiler?
26. What is a transpiler?
27. Benefits
28. Benefits
29. Benefits
30. Benefits Test new ES features
31. Benefits
32. UX DX
33. The cost “Impact of Transpiled ES2015 Appears Significant” - Jacques Favreau
34. DX cost
35. DX cost #TheDream
36. DX cost JavaScript Interpreter Computer Transpiler
37. DX cost JavaScript Interpreter Computer
38. DX cost https://www.w3counter.com/globalstats.php 1. Chrome 52 20.22% 2. Chrome 53 16.86% 3. Safari 9 9.66% 4. Firefox 48 5. IE 11 4.73% 6. Chrome 51 3.93% 7. Chrome 49 2.71% 8. Chrome 50 2.31% 9. Safari 10 1.92% 10. Firefox 38 1.74% 5.20%
39. $ $ DX cost Build time $ $ $ $ $ $
40. DX cost Browser optimization
41. DX cost Browser optimization (over time) https://kpdecker.github.io/six-speed/
42. DX cost Transpiler lock in ES2015
43. DX cost Transpiler lock in ES2015
44. DX cost
45. DX cost Debugging (in production) source maps ;) REALITY
46. DX cost False assumptions about what will become standard JS
47. DX cost False assumptions about what will become standard JS
48. DX cost Decorators #connect
49. DX cost Object.observe
50. Is it worth it? (yes)
51. build time browser optimization lock in debugging standard js
52. UX cost
53. UX cost Transpiled code is heavier
54. UX cost Transpiled code is heavier
55. UX cost Transpiled code is heavier
56. UX cost Transpiled code is heavier
57. UX cost Transpiled code is heavier
58. UX cost Polyfills
59. UX cost Polyfills
60. UX cost Polyfills
61. UX cost Polyfills
62. UX cost
63. UX cost “I use server side rendering.”
64. UX cost
65. UX cost
66. UX DX
67. Well actually…
68. What we do today
69. What we do today
70. What we do today server side rendering limited ES2015 feature set no server side transpilation
71. What we do today const & let arrow functions template strings destructuring default parameters