“Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
“Like a book chapter, modules are just clusters of words (or code, as the case may be).
“Good modules, however, are highly self-contained with distinct functionality, allowing them to be shuffled, removed, or added as necessary, without disrupting the system as a whole.”
This is part of a very nice article I found explaining what modules are and that can be found here. I do recommend having a read as it can shed a light on the subject, as it did to me.
- AMD (Asynchronous Module Definition)
- UMD (Universal Module Definition)
Each of these module definitions has their pros and cons, and there is no one rule to fit all, but rather a technical decision based on the context to use. Bellow you can find a very short description of the modules.
Show full module description
AMD is used a lot when serving resources to a frontend application. The reason is that the dependencies are downloaded asynchronously and only when necessary. Is also important to know that the application only runs when all those dependencies are met. Aside from asynchronicity, another benefit of AMD is that your modules can be objects, functions, constructors, strings, JSON and many other types.
CommonJS is widely used on backend applications and one of the reasons is that CommonJs is compatible with io, filesystem, and other server-oriented features. On the other hand, unlike AMD, CommonJS only supports objects as modules. One very know application of CommonJs is within NodeJS.
UMD is essentially a way to use either of the two, while also supporting the global variable definition. As a result, UMD modules are capable of working on both client and server. This is especially useful for projects that require support for both AMD and CommonJS features.
SystemJS is a module loader that can import modules at run time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). It is built on top of the ES6 module loader polyfill and is smart enough to detect the format being used and handle it appropriately. SystemJS can also transpile ES6 code (with Babel or Traceur) or other languages such as TypeScript and CoffeeScript using plugins.
Collapse module description
The modules are defined in a multitude of ways, having some files using the CommonJS definition, some other using the ES6 module definition and some others using AMD.
The goal is to bundle the application together regardless of the module definition used and present a final solution that will run using the bundler of choice.
There are 4 different bundlers used: RequireJS, Browserify, Webpack and JSPM.
As a task manager, we used Gulp. That would allow us to work together with the babel modules.
You can see a running demo of these projects in the following links:
Link for Github Repo