Confusing?  CommonJS, AMD, RequireJS, UMD, Modules in ES Harmony

A much more comprehensive documentation is written by Addy Osmani:

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

All of these terms are related to manage growing complicated JavaScript source code in both client and server sides for better software engineering purpose.

A. How JavaScript is loaded into browser?

Normally:

  1. By the <script src="”source.js”" async="" defer="defer">
    tag. You can defer it, or make it asynchronous use the new attributes, although buggy.
  2. Use document.write:
    var tag = <script src="”source.js”" ></script >
    document.write(tag);
  3. Use appendchild(script):
    var script = document.createElement(‘script’);
    script.src = “http://googleapis.com”;
    document.documentElement.firstChild.appendChild(script);
  4. XHR and eval:
    $.ajax({url: url}).done(function(js){eval(js);})
  5. In Chrome, use <link rel=”prefetch” > to load resources
  6. Script loaders: CommonJS, AMD, RequireJS, curl.js, UMD, etc..

B. So, How, When And Why Script Loaders Are Appropriate

http://www.html5rocks.com/en/tutorials/speed/script-loading/

Most times, just use the traditional method to minify and concatenate all JavaScript files into a single file and put it just before </body> tag.

C. CommonJS

CommonJS defines a module format such that it works on both client and server side. The drawback for CommonJS in web browser is that it won’t simply allow asynchronous loading.

D. AMD

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.

The signature function: define(id?, [dependencies?], factory)

E. RequireJS

It implements AMD and caters for simplified CommonJS wrapping.

F. UMD

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

G. Modules in ES5

An ES6 module is a file containing JS code. There’s no special module keyword; a module mostly reads just like a script. There are two differences.

  • ES6 modules are automatically strict-mode code, even if you don’t write “use strict”;in them.
  • You can useimport and export in modules.

You differentiate the normal script and module by giving type attribute in the script tag,

i.e.: set script tag with type=”module”

https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s