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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

You wrote "I am not asking for specific libraries and tools, but rather for approaches and specifications." however you can look closer to ExtJS 5 environment which fulfils all your requirements.

If you are not interested in such commercial product you can just get to know patterns and solutions in it.

Relation to your requirements:

Structure JavaScript code in separate files.

It implement Object-Oriented Programming paradigm so you can create classes, subclasses, objects, mixins, plugins. It connect class-based programming and prototype-based programming.

Worth noting MVVM architecture (View, Controller, ViewModel), data binding, data session (records/entities client-side management).

Config system is also quite interesting. It's very handy. The config property is merged from parent class to subclasses and also during object creation you can pass config which will be merged too. It is very useful when we want have customizable and flexible components.

Load relevant modules in the runtime.

Each class may has requires or uses directive which are used when builing application to one file. You can also manually load files.

...without having to include every single file as script tag.

In dev env files are loaded dynamically (asynchronous or synchronous).

In prod env necessary files has been built to one minified file.

Support aggregation and minification - ability to build and use a single minified/optimized JavaScript file.

You can build application with Sencha cmd tool (and do a few other things).

You can use three predefined env (development, testing, production) or create your own (based on config files and ant).

Be able to use modules in different combinations - there are often different web pages/clients which need different subsets of modules.

You can use workspaces and packages.

Supporting documentation (with JSDoc?).

JS Duck, tutorial

Suitable for testing.

You can do unit tests (PhantomJS, JSLint, PhantomLint, Jasmine).

You can use dedicated framework like Siesta or other popular testing frameworks like Selenium.

Suitable for web, cross-browser.

From offical website:

Deliver apps on the widest selection of browsers and operating systems with a single code base. Ext JS 5 leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers. Confidently deliver apps to your end users regardless of what browser they are using.

Support: Safari 6+, Firefox, IE 8+, Chrome, Opera 12+, Safari/iOS, Safari / iOS 6+, Chrome/Android, Chrome / Android 4.1+, IE 10+ / Win 8

Supports Cordova and PhoneGap application.

Reasonable IDE support.

I don't know very good IDE with dedicated support for ExtJS but I work on Webstorm and it's fine. Library sources are inside project so autocompletion works (but not 100% perfect).

Conclusion

I don't want to glorify ExtJS 5. Environment is quite mature and stable but latest version of framework (v5) has a couple bugs and not everything is great. However I could go deeper and get to know principles of that framework which are reasonable, driven in good direction but sometimes bad implemented ;)

Answer 4

Take a look on a browserify. It implements interesting approach. With browserify you can write code that uses require in the same way that you would use it in Node.

Answer 5

Take a look at systemJS:

Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.

Designed as a collection of small extensions to the ES6 specification System loader, which can also be applied individually.

Loads any module format, by detecting the format automatically. Modules can also specify their format with meta config. Provides comprehensive and exact replications of AMD, CommonJS and ES6 circular reference handling. Loads ES6 modules compiled into the System.register form for production, maintaining full circular references support. Supports RequireJS-style map, paths, bundles, shim and plugins. Tracks package versions, and resolves semver-compatibile requests through package version syntax - [email protected], package^@x.y.z. Loader plugins allow loading assets through the module naming system such as CSS, JSON or images. Designed to work with the ES6 Module Loader polyfill (9KB) for a combined total footprint of 16KB minified and gzipped. In future, with native implementations, the ES6 Module Loader polyfill should no longer be necessary. As jQuery provides for the DOM, this library can smooth over inconsistiencies and missing practical functionality provided by the native System loader.

Runs in IE8+ and NodeJS.

The creator of the lib -- Guy Bedford -- is a great presenter as well: systemJS presentation.

Answer 6

RequireJS is a good approach since it enables dynamic javascript module loading as well as it keeps the code clean. You can also minify the whole modules and it actually performs really fast. It also allows something called as shimming where you can specify the dependencies for a library or any js file such that whenever you try to load it, all the dependencies also follow

Answer 7

There are various libraries available for modular development, From which some full fill your criteria.

• System.js System.js is modular development library with some basic features to work with IE8+ and nodejs. It also provides feature to develop modules and you can include it in your main file. For more information about System.js follow https://github.com/systemjs/systemjs
• Require.js The best library for modular development. Provides various useful features and supports older browser too. It supports from IE 6+. Another useful feature of require.js is that it can be used with Rhinojs and nodejs. Implementation is simple as like you include modules in nodejs.