Thoughts on using RequireJs with AngularJs

RequireJs is a Javascript file and module loader. This article is not an introduction to RequireJs. Good documentation is available here. We rather discuss the effects of using RequireJs along side AngularJs in our system.

  1. Dependencies were explicitly identified at the module level. With one parse, you can identify the dependencies specific to the current piece of code and this helps you to be less error prone in accessing global variables from your javascript code. 
  2. Minification and obfuscation became a trivial single step process. R.js helped us out very well with this.
  3. All our angular components like services, controllers, directives etc were AMD module factories agonistic of angular. We had another AMD module which required all the angular components and registered them as angular services,controllers etc. This is inversion of control personified. This reduces the spread of integration to one file. Any integration problem could thus be found in that single file with high probability.
  4. Without the above structure, unit testing would have been very tedious. Decomposing the application into AMD modules and using RequireJs to inject only the dependencies pertaining to the current module simplifies the effort to setup unit tests.
  5. RequireJs allows you to mock module dependencies. This helped us to write end to end tests without having the need to bring up a server. This takes advantage of the RequireJs mechanism to use noconflict dependencies.  
  6. Cache busting by adding version to the url became trivial since RequireJs allows you to specify url args.
  7. RequireJs allows you to load dependencies lazily. We were not able to find a straightforward way to specify angular components to be loaded laziliy. This would have helped us to save a lot on the initial bandwidth required to load the application.

Summary

RequireJs simplifies your java script application. Some of its benefits are really simple, but have huge impact, like, not having to check for the existence of a global variable and initialize it in every file, not having to use global variables as a place to store common scripts etc. That said, you could really put it through its paces by doing complicated things like using multiple version of a library simultaneously, minify all the js files into a single file easily etc.

RequireJs is essential for non trivial javascript applications. If you are writing a single page application with angular, it is probable that you are writing a non trivial javascript application. Hence, you would need a really good reason not to use requirejs in your angular application.

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