Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modular JavaScript - are there any approaches apart CommonJS and AMD to consider?

I'm currently preparing an evaluation JavaScript modularization approaches for my corp. We are in process of defining "JavaScript Best Practices" for our projects, modularization is one of the central questions.

From my research so far revealed two leading approaches:

  • amd
  • commonjs

With a huge number of loaders, plugins, libraries etc. around them.

Apart from that there's also goog.provide/goog.require from the Google Closure Library.

Are there further approaches to consider? Any important/relevant specs I missed?

Our requirements, briefly:

  • Structure JavaScript code in separate files.
  • Load relevant modules in the runtime.
  • ...without having to include every single file as script tag.
  • Must not be necessary to maintain an index of JavaScript files.
  • Support aggregation and minification - ability to build and use a single minified/optimized JavaScript file.
  • Be able to use modules in different combinations - there are often different web pages/clients which need different subsets of modules.
  • Supporting documentation (with JSDoc?).
  • Suitable for testing.
  • Suitable for web, cross-browser.
  • Reasonable IDE support.

Potentially:

  • Aligned with ES6 modules.
  • Suitable for Node.js and mobile platforms (like PhoneGap/Cordova).

New suggestions from answers:

  • ecmascript-harmony plus extra compiler.
  • angularjs (see the note below).
  • extjs (see the note below).

Side notes:

  • The question is not about which approach is better.
  • I am not asking for specific libraries and tools, but rather for approaches and specifications.
  • I am not specifically asking for an off-site resource. (If there's no SO tag for this, it's probably not reasonable for us to consider it.)
  • A note on frameworks like angualjs or extjs. This is not really suitable in the frame of this quesion. If the project needs a framework (be it AngularJS or ExtJS) then there's mostly no modularization question as the framework must deliver modularization OOTB. If the project does not need a framework, it is an overkill to bring a framework because of the modularization. This is one of the reasons I am specifically not asking about libraries/tools.
like image 565
lexicore Avatar asked Nov 17 '14 09:11

lexicore


People also ask

What is the difference between CommonJS and AMD?

In fact, AMD was split from CommonJS early in its development. The main difference between AMD and CommonJS lies in its support for asynchronous module loading. "The main difference between AMD and CommonJS lies in its support for asynchronous module loading."

What are the main differences between using CommonJS and ES6 module syntax?

While CommonJS and ES6 modules share similar syntax, they work in fundamentally different ways: ES6 modules are pre-parsed in order to resolve further imports before code is executed. CommonJS modules load dependencies on demand while executing the code.

What is modular JavaScript?

A module in JavaScript is just a file containing related code. In JavaScript, we use the import and export keywords to share and receive functionalities respectively across different modules. The export keyword is used to make a variable, function, class or object accessible to other modules.

Should I use CommonJS or ES modules?

ES modules are the standard for JavaScript, while CommonJS is the default in Node. js. The ES module format was created to standardize the JavaScript module system. It has become the standard format for encapsulating JavaScript code for reuse.


2 Answers

How about ES Harmony?

quote from here: http://addyosmani.com/writing-modular-js/

Note: Although Harmony is still in the proposal phases, you can already try out (partial) features of ES.next that address native support for writing modular JavaScript thanks to Google's Traceur compiler. To get up and running with Traceur in under a minute, read this getting started guide. There's also a JSConf presentation about it that's worth looking at if you're interested in learning more about the project.

hopeThatHelps

like image 157
GavinBrelstaff Avatar answered Oct 11 '22 14:10

GavinBrelstaff


Another option: the AngularJS module system, as described here. This is really only useful on the client side, however.

like image 24
jasonhansel Avatar answered Oct 11 '22 14:10

jasonhansel