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.

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