What are AMD and CommonJS?

I've recently heard a lot about Asynchronous Module Definition (AMD) and CommonJS. They look like two terms that are fashionable.

I read a few 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?

Author: Guilherme de Jesus Santos, 2014-07-25
Source

2 answers

AMD

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

In addition to loading multiple JavaScript files at runtime, it can also be used in development to keep javascript files encapsulated for several different javascripts functioning as a import.

RequireJS is an implementation of AMD.

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 or files 'knockout-X. Y. z 'and' appViewModel ' before executing the code inside 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 for the purpose of grouping the needs of multiple javascript applications in a single API that works across multiple environments and interpreters. Creating the concept of SE 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 gives an example of how to use CommonJs in conjunction with AMD using curl.js and requirejs

 18
Author: Caputo, 2014-07-25 17:20:27

There is a similar question in SO , I put some excerpts from the translated answer, I find it very difficult but if by Chance the link is offline at least we have how to guide ourselves by this answer, I hope it helps.

RequireJS implements AMD API (Source)

CommonJS is a way to define modules with the help of an exports object, 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 for 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 an offspin of CommonJS Transport format and evolved into its own module definition API. Hence the similarities between the two. The novelty in AMD is the function of define-which allows the module to declare its dependencies before being 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 more suitable 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 (mainly in the module identifiers). To further confuse, RequireJS, being an AMD implementation, offers a CommonJS wrapper so COmmonJs modules can almost be directly imported for use with RequireJS.

Source

 6
Author: RafaelTheodoro, 2017-05-23 12:37:23