JavaScript Module Loaders

Feb 20, 2020 • ☕️ 2 min read

Modular programming has many benefits; when you write modular JavaScript applications, you usually end up having one file per module.

In the old day, modules in JavaScript were implemented via libraries like CommonJS Modules (CJS), Asynchronous Module Definition (AMD), and Universal Module Definition (UMD). Since ES2015, JavaScript had built-in modules called ECMAScript Modules (ESM).

Besides the above popular JavaScript modules, we also consider other JavaScript module formats like System.register or global; and non-JavaScript modules like JSON modules, CSS modules, or Web Assembly.

Module loaders are libraries that can handle loading modules using the above formats for further processing or executing, they may be different in terms of synchronous or asynchronous loading, static or dynamic loading.

When you write modular JavaScript applications, you usually end up having one file per module. So when writing an application that consist of hundreds of modules it could get quite painful to make sure all files are included and in the correct order. So basically a loader will take care of the dependency management for you, by making sure all modules are loaded when the application is executed.

RequireJS is a JavaScript file and module loader, optimized for in-browser use, can also be used in Node, implements AMD.

SystemJS is a dynamic module loader that can load all kinds of JavaScript modules and many non-JavaScript modules, used in both browser and Node.

StealJS is a unique module loader because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats

curl.js is small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.

ES Module Loader has been implemented in most browsers, available in Node.js via --experimental-modules flag.

Above module loaders are actually used at runtime to load and execute scripts. Don’t be confused with loaders used in built tools which used at build-time to pre-process files as you import or load them, they are kind of tasks that transform modules from one format to other format.

Reading More

Beloved CSS Frameworks

Pros and cons of using CSS frameworks like Bootstrap, Foundation, Materialize CSS, Semantic UI, Tailwind, Ant Design

Modern web rendering strategies

An overview of web rendering strategies like client-side, server-side, universal, prerendering, static, or rehydration

What's Wrong with CSS?

Some noted problems that might hold CSS back and open up new development of preprocessors or CSS-in-JS

Top Google's coding competitions you must know

Performing well in one of the following Google's competitions is a every good start on the way to get a job at Google