Sprockets, ExtJS, and You: A tale of JavaScript bundling

I spent the past three days evaluating various JavaScript dependency resolution and packaging solutions, predominately on the client side. I didn’t find anything completely enamoring.

My objective is twofold. Maintain JavaScript sources using a file per class policy as a general rule. Serve the actual JavaScript portion of my application to the client in one or several concatinated, manageable files, possibly via lazy loading.

I find Sprockets, a Ruby based library for managing your JavaScript files, a good fit to facilitate the former by enabling the latter. The Rails plugin, sprockets-rails, includes a controller that dynamically loads the relevant JavaScript files anytime you change a file during development. Later, in production, it will serve a cached version of the deployed JavaScript file.

While it includes no client side code for managing the lazy loading of libraries, that’s entirely possible with a variety of existing JavaScript libraries. The default Sprockets builds only a single concatinated file for an entire site. It’s necessary to use a fork of Sprockets that includes support for building multiple concatinated files for lazy loading to make any sense.

A current limitation is Sprockets does not support any compaction — or compression — of JavaScript files. There’s a Lighthouse ticket for YUI Compressor support, tagged for a future version. Of course, in the meantime it’s not difficult to create a Capistrano recipe to call YUI Compressor.

Once installed, I move my ExtJS files into vendor/sprockets/extjs/src and then added a few require directives to app/javascripts/application.js:

//= require <ext-base>
//= require <ext-all-debug>

Post a Comment

Your email is never shared. Required fields are marked *

*
*