ES2015 on production? Not so fast

ES2015 on production? Not so fast

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

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

February 18, 2017
Tweet

Transcript

  1. ES2015 on production

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

  22. None
  23. developer experience leads to user experience

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