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.

De17bad13d4e0a786c92e66553f00e88?s=128

Paul Heasley

August 02, 2018
Tweet

Transcript

  1. Return of the
 <script> tag Paul Heasley
 @pheasley

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

  3. the evolution of script tags <!-- Our single script -->

    <SCRIPT TYPE="text/javascript" SRC="js/script.js"></SCRIPT>
  4. the evolution of script tags <!-- Vendor scripts --> <SCRIPT

    TYPE="text/javascript" SRC="js/vendor/prototype.js"></SCRIPT> <!-- Our monolithic script --> <SCRIPT TYPE="text/javascript" SRC="js/script.js"></SCRIPT>
  5. the evolution of script tags <!-- Vendor scripts --> <SCRIPT

    TYPE="text/javascript" SRC="js/vendor/prototype.js"></SCRIPT> <!-- Our scripts, ORDER is important --> <SCRIPT TYPE="text/javascript" SRC="js/events.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="js/utils.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="js/script.js"></SCRIPT>
  6. the evolution of script tags issues included: • ordering of

    script tags • polluting global namespace • concurrent connections limit
  7. the evolution of script tags <!-- Let’s bundle our code

    server-side --> <script type="text/javascript" src=“js/bundle.min.js”></script>
  8. browserify / webpack // webpack.config.js module.exports = { entry: './src/app.js'

    }; // src/app.js const Foo = require('./foo.js');
  9. webpack makes it too easy to bundle all your dependencies

  10. how much of your app is your code?

  11. on average* 4.5%

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

  13. server side bundling negates the benefits of browser caching

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

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

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

  17. ES6 module format // CommonJS style module.exports = Foo; const

    Foo = require('./foo.js'); // ES6 modules export default Foo; import Foo from './foo.js';
  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 {}
  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';
  20. native ES6 modules browser support is here

  21. use script type=module <!-- Use either external modules --> <script

    type="module" src="./main.js"></script> <!-- Or inline modules --> <script type="module"> import { render } from './utils.js'; render('Hello World'); </script>
  22. None
  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) " " " " " " #
  24. use “nomodule” for backwards compatibility <script type="module" src="./main.js"></script> <script nomodule

    src="./bundle.js"></script>
  25. bundling is wasting bandwidth native ES6 modules dependencies via unpkg

  26. unpkg the CDN for everything on NPM

  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
  28. None
  29. load dependencies as modules import Vue from ‘https://unpkg.com/vue?module'; import {

    fromEvent } from ‘https://unpkg.com/rxjs?module';
  30. None
  31. HTTP/2 performance improvements: • binary framing layer • connection multiplexing

  32. HTTP/2 “bundling on the fly”

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

    CDNs
  34. Thanks. Paul Heasley
 @pheasley