Motivation

Today’s websites are evolving into web apps:

• More and more JavaScript is being used.
• Modern browsers are offering a wider range of interfaces.
• Fewer full page reloads → even more code in a page.

As a result there is a lot of code on the client side!

A big code base needs to be organized. Module systems offer the option to split your code base into modules.

Module system styles

There are multiple standards for how to define dependencies and export values:

• <script>-tag style (without a module system)
• CommonJS
• AMD and some dialects of it
• ES6 modules
• and more…

<script>-tag style

This is how you would handle a modularized code base if you didn’t use a module system.

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

Modules export an interface to the global object, i. e. the window object. Modules can access the interface of dependencies over the global object.

Common problems

• Conflicts in the global object.
• Order of loading is important.
• Developers have to resolve dependencies of modules/libraries.
• In big projects the list can get really long and difficult to manage.

CommonJs: synchronous require

This style uses a synchronous require method to load a dependency and return an exported interface. A module can specify exports by adding properties to the exports object or setting the value of module.exports.

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

It’s used server-side by node.js.

Pros

• Server-side modules can be reused.
• There are already many modules written in this style (npm).
• Very simple and easy to use.

Cons

• Blocking calls do not apply well on networks. Network requests are asynchronous.
• No parallel require of multiple modules

Implementations

• node.js - server-side
• browserify
• modules-webmake - compile to one bundle
• wreq - client-side

AMD: asynchronous require

Asynchronous Module Definition

Other module systems (for the browser) had problems with the synchronous require (CommonJS) and introduced an asynchronous version (and a way to define modules and exporting values):

require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});

Pros

• Fits the asynchronous request style in networks.
• Parallel loading of multiple modules.

Cons

• Coding overhead. More difficult to read and write.
• Seems to be some kind of workaround.

Implementations

• require.js - client-side
• curl - client-side

Read more about CommonJS and AMD.

ES6 Modules

ECMAScript 2015 (6th Edition), adds some language constructs to JavaScript, which form another module system.

import "jquery";
export function doStuff() {}
module "localModule" {}

Pros

• Static analysis is easy.
• Future-proof as ES standard.

Cons

• Native browser support will take time.
• Very few modules in this style.

Unbiased solution

Let the developer choose their module style. Allow existing codebases and packages to work. Make it easy to add custom module styles.

Transferring

Modules should be executed on the client, so they must be transferred from the server to the browser.

There are two extremes when transferring modules:

• 1 request per module
• All modules in one request

Both are used in the wild, but both are suboptimal:

• 1 request per module
  • Pro: only required modules are transferred
  • Con: many requests means much overhead
  • Con: slow application startup, because of request latency
• All modules in one request
  • Pro: less request overhead, less latency
  • Con: not (yet) required modules are transferred too

Chunked transferring

A more flexible transferring would be better. A compromise between the extremes is better in most cases.

→ While compiling all modules: Split the set of modules into multiple smaller batches (chunks).

This allows for multiple smaller, faster requests. The chunks with modules that are not required initially can be loaded on demand. This speeds up the initial load but still lets you grab more code when it will actually be used.

The “split points” are up to the developer.

→ A big code base is possible!

Note: The idea is from Google’s GWT.

Read more about Code Splitting.

Why only JavaScript?

Why should a module system only help the developer with JavaScript? There are many other resources that need to be handled:

• stylesheets
• images
• webfonts
• html for templating
• etc.

Or translated/processed:

• coffeescript → javascript
• elm → javascript
• less stylesheets → css stylesheets
• jade templates → javascript which generates html
• i18n files → something
• etc.

This should be as easy as:

require("./style.css");

require("./style.less");
require("./template.jade");
require("./image.png");

Read more about Using loaders and Loaders.

Static analysis

When compiling all these modules, a static analysis tries to find its dependencies.

Traditionally this could only find simple stuff without expression, but require("./template/" + templateName + ".jade") is a common construct.

Many libraries are written in different styles. Some of them are very weird…

Strategy

A clever parser would allow most existing code to run. If the developer does something weird, it would try to find the most compatible solution.