-
Notifications
You must be signed in to change notification settings - Fork 127
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.
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...
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.
- 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.
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.
- Server-side modules can be reused.
- There are already many modules written in this style (npm).
- Very simple and easy to use.
- Blocking calls do not apply well on networks. Network requests are asynchronous.
- No parallel require of multiple modules
- node.js - server-side
- browserify
- modules-webmake - compile to one bundle
- wreq - client-side
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;
});
- Fits the asynchronous request style in networks.
- Parallel loading of multiple modules.
- Coding overhead. More difficult to read and write.
- Seems to be some kind of workaround.
- require.js - client-side
- curl - client-side
Read more about CommonJS and AMD.
ECMAScript 2015 (6th Edition), adds some language constructs to JavaScript, which form another module system.
import "jquery";
export function doStuff() {}
module "localModule" {}
- Static analysis is easy.
- Future-proof as ES standard.
- Native browser support will take time.
- Very few modules in this style.
Let the developer choose their module style. Allow existing codebases and packages to work. Make it easy to add custom module styles.
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
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 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.
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...
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.
webpack 👍