What are AMD and CommonJS?

15

Recently I've heard a lot about Asynchronous Module Definition (AMD) and CommonJS. They look like two trendy terms.

I read a few things about it, but I'm still confused.

AMD and CommonJS are libraries or specifications?

Who can explain in simple and practical terms what these two terms are?

    
asked by anonymous 25.07.2014 / 16:52

2 answers

15

AMD

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

In addition to loading multiple JavaScript files into runtime, it can also be used in development to keep javascript files encapsulated for several different javascripts 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 should load 'knockout-x.y.z' and 'appViewModel' files before running the code inside the

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);
    };
});

It would only work after the knockout library was loaded.

CommonJs

CommonJs is an API that aims to group the needs of various javascript applications into a single API, which works across multiple environments and interpreters. Creating the concept of whether modules that perform these functions. And these modules can be loaded asynchronously with AMD tools.

Among the features offered:

  • Asynchronous Settings
  • Promises
  • Unit Testing

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

    
25.07.2014 / 17:07
6

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

RequireJS implements the AMD API (source)

CommonJS is a way to define modules with the help of an export 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 to fetch dependencies, export variables to export module contents, and some module handle that is used to require 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 has 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 modules for APIs that have different implementations, but both come from the same sources. AMD is most suitable for the browser because it supports the 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 module identifiers). To further confuse, RequireJS, being an AMD implementation, offers a CommonJS wrapper so modules COmmonJs can almost be directly imported for use with RequireJS.

SOURCE

    
25.07.2014 / 17:05