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