#javascript Require.js vs CommonJS / AMD modules and #angularjs

I recently replied to the following twitter conversation about require.js vs browserify.

@cowboy i'm using amd to create reusable code beetwen server and client and i like it. My main problem is integrating with angular, etc
— Oscar Brito (@aetheon) March 15, 2014

@aetheon @cowboy look up the angular di annotation style, very compatible with AMD modules.
— Tim Branyen (@tbranyen) March 15, 2014

Angular.js and AMD

Recently, I tried to integrate some AMD modules into an angularjs application. I did not spent much time on it but I was under the impression that the integration was not straightforward.

On this twitter thread, @tbranyen pointed to me that using the angular dependency injection annotations, I can easily reuse my existing require.js modules. I must give it a try on my next project.

AMD vs CommonJS

First of all, I must say that I can understand the arguments from the CommonJS supporters, but the require.js configuration file gives me extra powers...

An awesome feature of requirejs is that you can create different execution context. This means that you can, for instance, load different versions of the same module into two different context executions. This can be very powerful.

I'm using this on my js-utils project to make it just a repository of modules without hard dependencies. This means that js-utils node_modules folder will have just a few references.

var requirejs = require('requirejs');

requirejs = requirejs.config({

    /// isolate this context
    context: 'context1',

    /// use local packages, located on node_modules
    nodeRequire: require,

    /// modules baseurl
    baseUrl: __dirname,

    /// the lookup paths
    paths: [ ... ]

});

I do not consider myself a fanboy of require.js because:

• I know that its complexity demands a bigger learning curve that it's not always required.
• I know that browserify is more easy and compatible with node modules.
• I know that its syntax can be very verbose.
• I know that r.js needs a lot of improvements.
• I know that r.js source maps are almost useless (the variables and functions are already minified).

But I also know that:

• I can create complex dependencies on require.js config file
• I can create friendly alias on require.js config file
• I can easily change version of the dependencies just by changing the configuration file
• I can use different execution contexts

If I said anything wrong, please let me know because I really want to hear your thoughts on this matter!

@aetheon

CodeProject

Visit www.divhide.com for more information, contacts and news about Web Development.
See other blog posts at blog.divhide.com.

Divhide purpose is to follow the HTML5 movement and contribute with applications which prove the quality of technology.
Feel free to contact divhide.