What are AMD and Commonjs?

Question

Recently I’ve heard a lot about Asynchronous Module Definition (AMD) and Commonjs. It seems like two terms are in fashion.

I read some things about, but I’m still confused.

AMD and Commonjs are libraries or specifications?

Who can explain to us in a simple and practical way what these two terms are?

Answer 1

AMD

It is a javascript API that defines modules so that their dependencies can be loaded asynchronously. It is very useful in improving the performance of websites avoiding the synchronous loading of scripts before the content of the rest of the site.

In addition to loading multiple Javascript files in Runtime, it can also be used in development to keep javascript files encapsulated for several different Avascripts working as an import.

Requirejs is an AMD implementation.

Using Requirejs(AMD) with Knockout for example:

require(['knockout-x.y.z', 'appViewModel'], function(ko, appViewModel) {
    ko.applyBindings(new appViewModel());
});

indicates that you must load the files 'knockout-x.y.z' and 'appViewModel' before executing the code within the function

while the appViewModel file should have

// Main viewmodel class
define(['knockout-x.y.z'], function(ko) {
    return function appViewModel() {
        this.firstName = ko.observable('Bert');
        this.firstNameCaps = ko.computed(function() {
            return this.firstName().toUpperCase();
        }, this);
    };
});

because it would only work after the knockout library was loaded.

Commonjs

Commonjs is an API with the goal of grouping the needs of several Javascript applications into a single API, which works across multiple environments and interpreters. Creating the concept of modules that do these functions. And these modules can be loaded asynchronously with AMD tools.

Among the features offered we have:

• Asynchronous Definitions
• Promises
• Unit tests

This link brings an example of how to use Commonjs in conjunction with AMD using Curl.js and requirejs

Answer 2

There is a similar question in ONLY, I put some snippets of the translated response, I find it very difficult but if by chance the link goes offline at least we have to be guided by this answer, I hope it helps.

Requirejs implements the AMD API (source)

Commonjs is a way to define the modules with the help of an object exports, which defines the contents of the module.

    // someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; }

Commonjs specifies that you need to have a function to fetch the dependencies, the variable exports to export module content and some module identifier that is used to require the dependencies. Commonjs has several implementations, for example Node.js

Requirejs implements AMD, which is designed to suit the browser, apparently AMD started as a Commonjs Transport format offspin and evolved into its own module definition API. Hence the similarities between the two. The novelty in AMD is the define-function that allows the module to declare its dependencies before it is loaded. For example, the definition could be:

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

So Commonjs and AMD are Javascript API modules that have different implementations, but both come from the same origins. AMD is best suited for the browser because it supports asynchronous loading of module dependencies. Requirejs is an implementation of AMD, while at the same time trying to maintain the spirit of Commonjs (primarily in module identifiers). To further confuse, Requirejs, being an AMD implementation, offers a Commonjs enclosure so Commonjs modules can almost be directly imported for use with Requirejs.

SOURCE