JS Module Loaders

The Lineup

• Asynchronous Module Definition (w/ RequireJS)
• Common JS (w/ BrowserifyJS)
• ES6 Modules (w/ SystemJS)

The Problem

• Complex dependencies are difficult to maintain
• Browser code does not inherently mix with Node
• Loading lots of script tags can be bed for performance

Require JS

= AMD

(Asynchronous Module Definition)

Require JS

This is what AMD looks like.

Require JS

The Good

• Lazy Loading allows for optimization

The Bad

• Many script tags can cause performance problems*
• Must maintain config for every file, including libs
• Enormous, unreadable module declaration

Require JS

*There exists tools to bundle RequireJS projects.

Browserify JS

= CommonJS

Browserify JS

This is what Common JS looks like.

Browserify JS

With Browserify, there's an extra step:

That will build the bundle that we reference in our html.

The Good

• Bundling is good for performance
• modules work with Node (CommonJS)
• Clean, familiar syntax

The Bad

• Must maintain config but only for 3rd party libs
• Despite source maps, can introduce debug troubles

Browserify JS

ES6 Modules

System JS

System JS +

= ES6 Modules

System JS

Demo Time

ES6 Module import/export

System JS

Default

Named Exports

Or

Then

The Good

• Separate scripts for dev is good for debugging
• Bundling for production is good for performance
• Syntax is consistent with ES6
• Works with any type of module

The Bad

• Script tags have to be different for production and dev which complicates builds a tiny little bit

System JS

Questions?

@Mustack_