Why modules?

JavaScript has evolved significantly over the years, and one of the critical areas of advancement is in how we manage and structure code using modules. Modules allow developers to break down complex applications into smaller, manageable parts, each with a specific purpose.

There are several module systems that have been adopted over time, each designed for different environments and use cases. From the widely used CommonJS in Node.js to the standardized ECMAScript Modules (ESM) that work seamlessly across modern browsers and servers, understanding these systems is essential for writing scalable and maintainable code. Additionally, legacy formats like AMD and hybrid solutions like UMD and SystemJS have played their roles in shaping the way we build applications today.

This article is a very brief introduction to the different modules systems. I will explain each one in more detail in separate articles.

CommonJS (CJS)

Primarily used in Node.js. It uses require() for imports and module.exports or exports for exports.

Example:

const moduleA = require('./moduleA');
module.exports = { moduleA };

Use Case: Legacy projects or Node.js environments that don’t support ESM.

ECMAScript Modules (ESM)

Standardized module system in JavaScript, supported by most modern browsers and Node.js. It uses import and export keywords.

Example:

import { functionA } from './moduleA';
export const functionB = () => { /*...*/ };

Use Case: Recommended for modern projects, both for frontend and backend development.

UMD (Universal Module Definition)

• Purpose: Designed to work in both browser and Node.js environments.
• Characteristics: Automatically adapts to CommonJS, AMD, or a global script environment.
• Example: Often used in libraries that need to support multiple environments.

AMD (Asynchronous Module Definition)

Designed for asynchronous loading in browsers. It uses define() to define modules.

Example:

define(['dependency'], function(dep) {
  return { /* module code */ };
});

Use Case: Mostly used in older projects, especially with RequireJS.

SystemJS

• Purpose: A universal module loader that supports multiple formats.
• Use Case: Helpful in cases where a unified loading mechanism is needed for various module types.

Recommendations

For modern development, ESM is preferred due to its simplicity and widespread support. CommonJS remains relevant for older Node.js projects, but it’s gradually being phased out in favor of ESM.

This was just a brief overview. Each module has its own article in which we take a detailed look.