What do you think of commonJS vs Asynchronous Module AMD

JavaScript Modules are small units of code, which is independent and reusable. Their functionality is distinct, which allows them to be added and removed without the system being disrupted. It seems to mimic how classes are used in Java or Python.

Modules are self-contained. If a module is decoupled from other pieces of code, it is much easier to update it. This makes the programmer a lot less intimidating to go through the program.  It solves the namespace ambiguity allowing the objects to be created in publicly accessible namespaces while the functions in it are private. Modules are reusable which eliminates the duplicacy in code and saves huge amount of time.

The Reavling Module Pattern was getting used before the modules arrived.

var revealingModule = (function () {
    var privateVar = "Braun Strohman";
    function setNameFn( strName ) {
        privateVar = strName;
    }
return {
        setName: setNameFn,
    };
})();
revealingModule.setName( "Paul Adams" );

In the above program, the public functions are exposed whereas the private properties and methods are encapsulated.

A single file can contain multiple modules but the drawbacks are that the modules do not load asynchronously and it is not possible to import modules programmatically.

CommonJS

Then came a separate approach to interact with the module system which uses the keyword require and exports. require is a function which is used to import functions from another module, on the other side, exports is an object where you can export any function which is put into it.

//------ payments.js ------
var customerStore = require('store/customer'); // import module
//------ store/customer.js ------
exports = function(){
    return customers.get('store);
}

In the example above, the customerStore is imported to payment.js. The function which is set to the exports object in customer module is loaded in payment file.

These modules are designer for server development and the files are loaded synchronously.ie., one by one.

CommonJS basically specifies that you need to have a require() function in order to fetch dependencies, an export method to export the contents from another module and a module identifier (describes the module location) that is used to require the dependencies.

Asynchronous Module Definition (AMD)

AMD was born to replce commonJS as it was not browser compatible. As the name indicates, it supports asynchronous loading of the module.

define(['module1', ',module2'], function(module1, module2) {
  console.log(module1.setName());
});

The requested modules are loaded in a non-blocking manner in the background and once the loading is completed, the callback function is executed.The define function takes the first argument as an array of dependency modules. These modules can be functions, objects, contructors, JSON, strings etc.

RequireJS implements AMD API. The plain javascript files and modules are loaded by using script tags. An optimizing tool is included in it which can be run while deploying our code for better performance.

Now we know what commonJS and AMD are. Now let's talk about the difference between them.

AMD and commonJS, both are Javascript module loader. The are used for same purposes but works differently.

AMD is browser freindly, and hence the name Asynchronous, as the distinct modules are loaded in async manner instead of loading in one large file. Due to it's async nature, it makes lot of async http requests due to which it may not be as performant.

While commonJS is a standard and mostly used module loader as it loads modules synchronously. It requires an extra step though, if you want to minify and compress your JS file.

I hope this clarify the things.

THANKS