From IIFEs to ES6 Modules

JavaScript Modules

  • Isolates code / not in the global scope
  • Automatically runs in strict mode
  • Don't have to worry about ordering of script tags 
  • Can be imported at runtime
  • Classic <script> tags block HTML parsing - modules can be downloaded parallel to the HTML parsing
  • Supported by all modern browsers
  • Can use tree shaking when bundling

Dynamic Imports

  • When there is a low likelihood that you will need the code you are importing, or you will not need it until a later time.
  • When the import specifier string needs to be constructed dynamically. (Static import only supports static specifiers.)

 Load a module conditionally or on demand

Future Proofing

"A lot of the most exciting new browser features are built on top of modules, not classic scripts. That means if you want to use any of these features, your code needs to be deployed as real modules, not transpiled to ES5 and loaded via classic script tags..." - Philip Walton, Google Engineer

  • Built-in modules
  • HTML Modules
  • CSS Modules
  • JSON Modules
  • Import Maps
  • Sharing modules between workers, service workers, and the window

Browser Support

Import an entire module's contents  

// This inserts myModule into the current scope, containing all 
// the exports from the module in the file located in /modules/my-module.js. 

import * as myModule from '/modules/my-module.js';




// Accessing the exports means using the module name ("myModule" 
// in this case) as a namespace.

myModule.doAllTheAmazingThings();

Import a Single Export from a Module 

// This inserts myExport into the current scope

import { myExport } from '/modules/my-module.js';




// Can be called as a function

myExport();

Import Multiple Exports from a Module 

// This inserts myExport into the current scope

import { foo, bar } from '/modules/my-module.js';




// Can be called as functions

foo();
bar();

Import with a More Convenient Alias

// This inserts shortName into the current scope

import {reallyReallyLongModuleExportName as shortName}
	from '/modules/my-module.js';




// Can be called as a function

shortName();

Import a Module for It's Side Effects Only

// This runs the module's global code, 
// but doesn't actually import any values

import '/modules/my-module.js';


// This works with dynamic imports too

(async () => {
  if (somethingIsTrue) {
    // import module for side effects
    await import('/modules/my-module.js');
  }
})();

Concerns

  • module cache busting
  • more requests but smaller file sizes
  • how to bundle (rollup?) - more tools!!

Demo in Omni

Importing Defaults

// The simplest version directly imports the default:

import myDefault from '/modules/my-module.js';


// It is also possible to use the default syntax with the ones 
// seen above (namespace imports or named imports). In 
// such cases, the default import will have to be declared 
// first. For instance:

import myDefault, * as myModule from '/modules/my-module.js';
import myDefault, {foo, bar} from '/modules/my-module.js';


// Works with dynamic imports. You need to destructure and 
// rename the "default" key from the returned object.
 
(async () => {
  if (somethingIsTrue) {
    const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
  }
})();

From IIFEs to ES6 Modules

By Eric Danowski

Made with Slides.com

From IIFEs to ES6 Modules

  • 142

More from Eric Danowski