- All assets URLs should have a unique “fingerprint” to prevent browsers from caching stale assets.
Having the first principle satisfied “out the box” in Rails 3.1 is a little slice of web development heaven.
But, the second principle is more controversial. While we agree that having a single JS and CSS file is “a good place” to start, we feel that the real world is a little more subtle and requires a bit more finesse.
Here are the small adjustments we’ve made to make the Rails 3.1 asset pipeline more compatible with the real world.
Serving jQuery and jQuery UI from the Google CDN
Since the good folks at Google were kind enough to invite the world to pull the jQuery and jQuery UI libraries their CDN, it seems a shame not to take advantage of the offer.
Serving your base jQuery assets from Google’s CDN provides two benefits:
- First, it takes some load off your servers. If you have your own CDN, this probably isn’t terribly important.
- Second, and more importantly, it makes it much more likely that visitors to your website will already have these libraries in their browsers cache. If they do, the cost of loading these libraries becomes approximately zero.
To do this, in your Rails 3.1 application, first modify your application.js manifest so that it does not include jquery or jquery-ui. Leave the following line
//= require jquery_ujs
so that you still include the Rails UJS package.
Next, in your application.html.erb file, add the following:
We settled on the method first outlined here. Suppose we have a
- Remove the
//=require_tree .directive from
Add the following helper in
<head>section of your main layout file (
<%= yield(:head) %>
Create your posts.js file in the
At the top of each view that should receive the
Note that the
posts.js file will still be managed by the asset pipeline and will still be treated with a fingerprinted URL and all that great asset pipeline stuff.
Multiple manifest files
In a Rails 3.1 application, the
application.js file looks like this:
//= require jquery_ujs //= require common //= require jquery-countdown
Which tells Sprockets to build a single
application.js file that contains
- The Rails UJS library which it references from within the
- The jQuery Countdown plugin which we have placed in
For larger applications, one nice trick to know is that you can actually have multiple manifest files.
For example, suppose that we had one particularly complicated page in our application that requires five jQuery plugins. This page is not often accessed, and the plugins are not used anywhere else on the site.
One option is to simply include each of these plugins with require directives in the main
A second option is to include each plugin manually at the top of our view:
There’s nothing wrong with this, but if this “set” of plugins actually needs to be used on two pages, you’ve created a bit of a maintenance burden.
A final option is to create a second manifest file, that uses Sprockets to group all these plugins. For example, create a manifest file
//= require plugin_1 //= require plugin_2 ...
and then at the top of any view that needs to use that group of plugins you can include just one line:
Posted by cailinanne