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

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. the evolution of script tags <!-- Our single script -->

    <SCRIPT TYPE="text/javascript" SRC="js/script.js"></SCRIPT>
  2. 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>
  3. 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>
  4. the evolution of script tags issues included: • ordering of

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

    server-side --> <script type="text/javascript" src=“js/bundle.min.js”></script>
  6. ES6 module format // CommonJS style module.exports = Foo; const

    Foo = require('./foo.js'); // ES6 modules export default Foo; import Foo from './foo.js';
  7. 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 {}
  8. 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';
  9. 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>
  10. 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) " " " " " " #
  11. 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