About me

Why we need modularity ? 🤔

• code readability
• separation of concerns
• localized/atomic changes
• avoiding global scopes
• modules/code reuse
• dependencies management
• better architecture

Otherwise

First attempt:
external JS files

Pros:
- Code separation
- Separate modules
​

Cons:
- Code reuse

- Global scope

Simple solutions:
- Global vars
- IIFE (immediately-invoked function expressions)

Variable overwrite

Async Module Definition

Pros:

- Module scope
- Module reuse

- Dependency injection
(testing etc.)

- Tooling: Require.js etc.

Cons:

- Confusing syntax

- Dependencies order because of async nature

- Multiple requests in HTTP 1 era

- Usage with Angular, required additional effort to avoid minification problems

CommonJS

Cons:

- No async module load (either load and use as a callback, or implement something with file.read and extracting module.exports)

- Not a standard, not supported in browsers

Pros:

- Supported in Node.js

- Scoping and context

- Modules reuse

- Tooling: Browserify etc.

ECMAScript Modules

aka JavaScript modules, aka ESM

Cons:

- Not supported in browsers?

- Not supported in Node.js?

Pros:

- Module scopes

- Modules reuse

- Multiple, named exports

- Deferred, buy executed in order

- Both static and dynamic

- ES 2015 standard

- Tooling: Webpack/Babel/Rollup

ECMAScript 2015 (aka ES6) standard

June 2015

~middle 2016

Major browsers and Node.js support ~100% of ES6 features
(NONE included ESM)

Modules ES Spec describes how to parse, instantiate and evaluate modules, but not how to get the files.

ESM implementation timeline 🗓

ECMAScript 2015 (aka ES6) standard

June 2015

~middle 2016

Major browsers and Node.js support ~100% of ES6 features
(NONE included ESM)

~fall 2016

HTML spec, which describes how to include, find and load modules

ESM implementation timeline 🗓

ECMAScript 2015 (aka ES6) standard

June 2015

~middle 2016

Major browsers and Node.js support ~100% of ES6 features
(NONE included ESM)

~autumn 2016

HTML spec, which describes how to include, find and download modules

First native ES modules implementation in Safari

Support landed in 

MS EDGE, Chrome and Node.js

Support landed in Firefox

ESM implementation timeline 🗓

Table of module systems comparison

Great, so Webpack/Babel/Rollup do the thing, right? 🧐

Native ESM advantages

• As result- immediate dev cycle, saves time, benefits in debugging and build configs/browser tools

Native ES Modules DEMO

Project structure

Dependencies graph

<script type="module"> takeaways

1. How to include an ES module script

2. Deferred by default

3. Can be used to deliver untranspiled ES6+ features, as old browsers won't execute it (e.g. Babel flag)

statements syntax

export.js

import.js

Named

Default

Just

execute

Multiple

exports

ESM Features

• Modules have own scopes and contexts, the same time having access to the global scope

• imports are constant references and cannot be reassigned

ESM Features

ESM are "singletons"

They are loaded and executed only once

even if imported via different paths or methods

ESM Features

'import' hoisting, top level only

Real Execution Order

Differences with classic scripts

• always CORS (cross-origin mechanism)

Fix

• must have a ​valid JavaScript MIME type

Modules loading order

• deferred by default, non-blocking but executed in the order

• strict by default

Module loading process

1. Construction — find, download, and parse all of the files into module records.

2. Instantiation —find boxes in memory to place all of the exported values in (but don’t fill them in with values yet). Then make both exports and imports point to those boxes in memory. This is called linking.

3. Evaluation —run the code to fill in the boxes with the variables’ actual values.

Credits to Lin Clark 1,2

Handling circular dependencies

Works because of the "instantiation" phase, which handles circular dependencies between the modules.

ES module path

• cannot be dynamic for static imports

• no extensions resolutions

• no Node.js node_modules etc. resolutions

• Possible solutions: Service Worker URLs proxy- quite complex

• must be a full URL (include extension)

• must be an absolute URL or:
• must start with “/”, “./”, or “../”

Package name maps
(module resolution algorithm)

Main questions/alternatives:

- should it replicate Node.js module resolution algorithm

- should it follow NPM "main" field resolution

- how to apply for modules in browsers / Node.js and Workers

Dynamic import()

• Promise-based API to asynchronously load JavaScript modules

• Can load both module and usual (in "strict" mode) scripts

• Provides access to module 'exports'

• Allows usage of dynamic path and not limited to top level only

• Handy usage with async/await

DEMO: Lazy load of Bootstrap scripts on user actions

Other examples: Code Splitting, polyfills, additional pages, 3rd party scripts, and services etc.

ESM in Node.js

• Under the flag since Node.js 8.5

• Complete polyfill for Node.js (not fully compliant) is available

• Requires .mjs extensions for separation

NPM package entries

import.meta

Other types of scripts

• CSS Houdiny (API to expose browser internals for developers)

Use Worklets- ES modules by default

Online test: https://hospodarets.com/es-modules-test/

• aka Wasm (the new type of high-performant code that can be run in modern web browsers)
in progress of applying ESM

Web/Service Workers

Performance

• HTTP/2 is required

• Chrome team analysis ESM performance work on  optimizations

DEMO: Loading ~640 lodash-es native modules comparing with the bundled version

<link module-preload />

- allows preloading module script graphs

Unit Testing 🧐

1. Script
   onload/onerror
   events work for ESM
    

2. Tests should be deferred

"nomodule" attribute for migration

1. Add the nomodule attribute for the bundled script

2. Add type="module" script pointing to the entry file

3. Resolve import URLs (aliases, '.js' extensions etc.)

4. Resolve non-JS modules (load dynamically, extract CSS etc.)

5. Solve node_modules dependencies and their publishing to prod

Proven usage of ESM

• Node.js:

lodash-es

• Web components:
Polymer

• Browser:
hospodarets.com

Native ESM in

production

Conclusions/takeaways

• Great support

• How to include: type="module" (browser), .mjs (Node.js)

• nomodule solution for migration

• HTTP2 and <link module-preload /> for performance

• Simplified configuration, debugging and publishing

• Not fully ready for enterprise projects, perfect for small and middle-size apps

Thank you!

Online slides: https://slides.com/malyw/native-js-modules

Serg Hospodarets

twitter.com/malyw

hospodarets.com