Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Siddharth Kshetrapal

February 18, 2017
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. ES2015 on production

    View full-size slide

  2. javascript architect @ practo
    @siddharthkp

    View full-size slide

  3. syntactical sugar vs real features
    problem #1

    View full-size slide

  4. class
    problem #1

    View full-size slide

  5. class
    (is just an object)
    problem #1

    View full-size slide

  6. class
    arrow functions, object destructuring, default params, etc.
    problem #1

    View full-size slide

  7. browser support
    problem #2

    View full-size slide

  8. let
    IE > 10
    problem #2

    View full-size slide

  9. =>
    chrome > 44 IE > ?
    problem #2

    View full-size slide

  10. =>
    chrome > 44 IE .
    problem #2

    View full-size slide

  11. > npm install babel-preset-env --save-dev
    /* .babelrc */
    {
    "presets": [
    ["env", {"targets":
    {"browsers": ["chrome > 52", "ie > 9"]}
    }]
    ]
    }

    View full-size slide

  12. compilation/transpilation step
    problem #3

    View full-size slide

  13. compilation/transpilation step
    (on every change)
    problem #3

    View full-size slide

  14. compilation/transpilation step
    stronger linting, static typing, jsx, ES2015+ features!
    problem #3

    View full-size slide

  15. ES2015+ features
    problem #4

    View full-size slide

  16. ES6 ES2015
    TC 39

    View full-size slide

  17. stage 1 stage 2 stage 3 stage 4
    TC 39

    View full-size slide

  18. developer experience leads to user experience

    View full-size slide

  19. cost of transpilation
    problem #5

    View full-size slide

  20. problem #5
    punishing your good users
    (~85% users on modern browsers)

    View full-size slide

  21. >
    (github.com/siddharthkp/es6-on-production)

    View full-size slide

  22. don’t be sad

    View full-size slide

  23. new syntax brings new optimisations
    (tree shaking)

    View full-size slide

  24. /* helpers.js */
    export function foo() {return 'foo'}
    export function bar() {return 'bar'}
    export function baz() {return 'baz'}
    /* main.js */
    import {foo} from './helpers';

    View full-size slide

  25. /* main-bundle.js */
    function foo() {return 'foo'}
    foo();

    View full-size slide

  26. progressive enhancement?

    View full-size slide

  27. progressive enhancement?
    (remember modernizer?)

    View full-size slide

  28. >
    (https://github.com/siddharthkp/es6-on-production/blob/master/es6.html#L8)

    View full-size slide

  29. @siddharthkp
    I maintain a tiny newsletter: siddharthkp.github.io/#newsletter

    View full-size slide