$30 off During Our Annual Pro Sale. View Details »

Return of the Script Tag

Return of the Script Tag

It doesn't feel that long ago that we all moved to Bower and then NPM as a way of managing and bundling our dependencies locally, but with ES6 native modules support landing in major browsers, and tools like unpkg.com there's a growing interest in front-end development without the build systems and local compilation.

Paul Heasley

August 02, 2018
Tweet

More Decks by Paul Heasley

Other Decks in Programming

Transcript

  1. Return of the

    tag<br/>Paul Heasley
<br/>@pheasley<br/>

    View Slide

  2. bundling is wasting bandwidth
    native ES6 modules
    dependencies via unpkg

    View Slide

  3. the evolution of script tags


    View Slide

  4. the evolution of script tags




    View Slide

  5. the evolution of script tags






    View Slide

  6. the evolution of script tags
    issues included:
    • ordering of script tags
    • polluting global namespace
    • concurrent connections limit

    View Slide

  7. the evolution of script tags


    View Slide

  8. browserify / webpack
    // webpack.config.js
    module.exports = {
    entry: './src/app.js'
    };
    // src/app.js
    const Foo = require('./foo.js');

    View Slide

  9. webpack makes it
    too easy to bundle
    all your dependencies

    View Slide

  10. how much of your app
    is your code?

    View Slide

  11. on average*
    4.5%

    View Slide

  12. continuous delivery
    invalidates the browser cache
    multiple times per day

    View Slide

  13. server side bundling
    negates the benefits of
    browser caching

    View Slide

  14. the solution?
    use more script tags
    download only what changed

    View Slide

  15. use CDNs for dependencies
    (they’ll be cached across sites)

    View Slide

  16. bundling is wasting bandwidth
    native ES6 modules
    dependencies via unpkg

    View Slide

  17. ES6 module format
    // CommonJS style
    module.exports = Foo;
    const Foo = require('./foo.js');
    // ES6 modules
    export default Foo;
    import Foo from './foo.js';

    View Slide

  18. ES6 module format
    // Inline named exports
    export const FOO = “foo";
    // All at once named exports
    export { FOO, bar };
    // Default export (one per file)
    export default class Bar {}

    View Slide

  19. ES6 module format
    // Named imports
    import { FOO, bar } from ‘./utils.js’;
    // Rename imports
    import { FOO, bar as alias } from ‘./utils.js';
    // Import everthing to a single object
    import * as utils from ‘./utils.js';
    // Import default
    import Bar from './utils.js';

    View Slide

  20. native ES6 modules
    browser support is here

    View Slide

  21. use script type=module



    <br/>import { render } from './utils.js';<br/>render('Hello World');<br/>

    View Slide

  22. View Slide

  23. supported in:
    IE
    Edge (v17 Apr 30, 2018)
    Firefox (v60 May 9, 2018)
    Chrome (v64 Jan 24, 2018)
    Safari (v11 Sep 19, 2017)
    iOS Safari (v11.2 Sep 19, 2017)
    Chrome for Android (v66 Apr 17, 2018)
    "
    "
    "
    "
    "
    "
    #

    View Slide

  24. use “nomodule” for
    backwards compatibility


    View Slide

  25. bundling is wasting bandwidth
    native ES6 modules
    dependencies via unpkg

    View Slide

  26. unpkg
    the CDN for
    everything
    on NPM

    View Slide

  27. the many faces of unpkg
    https://unpkg.com/rxjs —> entry point of the latest version
    https://unpkg.com/rxjs@5 —> entry point of a specific version
    https://unpkg.com/rxjs/package.json —> a specific file
    https://unpkg.com/rxjs/ —> directory listing
    https://unpkg.com/rxjs?module —> es6 modules entry point

    View Slide

  28. View Slide

  29. load dependencies
    as modules
    import Vue from ‘https://unpkg.com/vue?module';
    import { fromEvent } from ‘https://unpkg.com/rxjs?module';

    View Slide

  30. View Slide

  31. HTTP/2
    performance improvements:
    • binary framing layer
    • connection multiplexing

    View Slide

  32. HTTP/2
    “bundling on the fly”

    View Slide

  33. the future is…
    optimised browser caching
    es6 modules
    dependencies via CDNs

    View Slide

  34. Thanks.
    Paul Heasley

    @pheasley

    View Slide