JavaScript Modules explained

js modules

commonjs

umd

module bundler

ES6 modules

amd

Browserify

Webpack

Rollup

What are modules?

small units of independent, reusable code
highly self-contained with distinct functionality, allowing them to be shuffled, removed, or added as necessary, without disrupting the system as a whole
Good authors divide their books into chapters and sections; good programmers divide their programs into modules

Benefits

Reusability
Maintainability
Dependency resolution
Encapsulation (namespacing)

Anonymous closure

(function(){
    // todo
}())

(function($){
    // jQuery plugin
}(jQuery))

creates own closure
can access global variables
can declare local variables without accidentally overwriting existing global variables

CommonJS

server oriented

Standard designed by volunteer working group
Node.js uses CommonJS modules
Synchronous

// testModule.js
function testModule() {
  this.hello = function() {
    return 'hello!';
  }

  this.goodbye = function() {
    return 'goodbye!';
  }
}

module.exports = testModule;

// consumer.js
const test = require('testModule');

const testModuleInstance = new test();
testModuleInstance.hello(); // 'hello!'
testModuleInstance.goodbye(); // 'goodbye!'

Asynchronous Module Definition (AMD)

browser oriented

// consumer.js
define(['myModule'], function(myModule) {
    myModule.hello();
    myModule.goodbye();
});

/* Alternative syntax */
define(function (require) {
    const myModule = require('myModule');

    myModule.hello();
    myModule.goodbye();
});

// myModule.js
define([], function() {
  return {
    hello: function() {
      return 'hello';
    },
    goodbye: function() {
      return 'goodbye';
    }
  };
});

In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility
capable of working on both client and server

Universal Module Definition (UMD)

both client and server

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
      // AMD
    define([], factory);
  } else if (typeof exports === 'object') {
      // CommonJS
    module.exports = factory();
  } else {
    // Browser globals (Note: root is window)
    root.returnExports = factory();
  }
}(this, function () {
  // Methods
  function private(){};
  function hello(){}; 
  function goodbye(){};

  // Exposed public methods
  return {
      hello: hello,
      goodbye: goodbye
  }
}));

ES2015 Modules

compact and declarative syntax
asynchronous loading
better support for cyclical dependencies
imports are live read-only views of the exports
Downside: use use a transpiler for use in browser

// testModule.js
export default function testModule() {
  function hello() {
    return 'hello!';
  }

  function goodbye() {
    return 'goodbye!';
  }
}

// consumer.js
import testModule from 'testModule';
// or
import { hello } from 'testModule';

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>Hello World!</div>
    );
  }
}

export default App;

Module bundling/loading

Simply put, it is the process of grouping modules (and their dependencies) into a single file (or group of files) in the correct order.

Webpack

New kid on the block
Super popular
Offers additional features such as code splitting and treeshaking

// testModule.js
export default function testModule() {
  function hello() {
    return 'hello!';
  }

  function goodbye() {
    return 'goodbye!';
  }
}

// consumer.js
import { hello } from 'testModule';

// testModule.js
export default function testModule() {
  function hello() {
    return 'hello!';
  }
}

Tree shaking

Which one wins?

¯\_(ツ)_/¯

There isn't a single winner
Competition breeds innovation
The web has always succeeded on having multiple ways of doing things

Resources

JavaScript Modules: A Beginner's Guide, Preethi Kasireddy
https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.t5pfp5lmf
Brief history of JavaScript Modules, SungTheCoder
https://medium.com/@sungyeol.choi/javascript-module-module-loader-module-bundler-es6-module-confused-yet-6343510e7bde#.1ddueq67z
Understanding JavaScript Modules
https://spring.io/understanding/javascript-modules