ES2015 on production? Not so fast

ES2015 is great for productivity and maintainability, but there are certain aspects that you should consider.

Transcript

1. ES2015 on production
4. javascript architect @ practo @siddharthkp
5. syntactical sugar vs real features problem #1
6. class problem #1
7. class (is just an object) problem #1
8. class arrow functions, object destructuring, default params, etc. problem #1
9. browser support problem #2
10. let IE > 10 problem #2
11. => chrome > 44 IE > ? problem #2
12. => chrome > 44 IE . problem #2
13. problem #2
14. > npm install babel-preset-env --save-dev /* .babelrc */ { "presets": [ ["env", {"targets": {"browsers": ["chrome > 52", "ie > 9"]} }] ] }
15. compilation/transpilation step problem #3
16. compilation/transpilation step (on every change) problem #3
17. compilation/transpilation step stronger linting, static typing, jsx, ES2015+ features! problem #3
18. ES2015+ features problem #4
19. ES6 ES2015 TC 39
20. stage 1 stage 2 stage 3 stage 4 TC 39
21. TC 39
23. developer experience leads to user experience
25. cost of transpilation problem #5
26. problem #5 punishing your good users (~85% users on modern browsers)
27. </> (github.com/siddharthkp/es6-on-production)
28. don’t be sad
29. new syntax brings new optimisations (tree shaking)
30. /* helpers.js */ export function foo() {return 'foo'} export function bar() {return 'bar'} export function baz() {return 'baz'} /* main.js */ import {foo} from './helpers';
31. /* main-bundle.js */ function foo() {return 'foo'} foo();
32. progressive enhancement?
33. progressive enhancement? (remember modernizer?)
34. </> (https://github.com/siddharthkp/es6-on-production/blob/master/es6.html#L8)
35. conclusion
36. conclusion
37. Fin.
38. @siddharthkp I maintain a tiny newsletter: siddharthkp.github.io/#newsletter