Rails 3.1 Asset Pipeline for Javascript

Question

Ok, I've read a lot of information about the new Asset Pipeline for Rails 3.1 and I couldn't find a proper answer to my doubt.

I was loading my .js files according to the view#action I was rendering, on demand. I was doing this to prevent incorrect bindings and to load small .js files.

candidate_opportunities#index

$(".sortable_drag_n_drop").sortable({
    update: function(event, ui) {
        $.post('/candidate_opportunities/sort', $(this).sortable('serialize'));
    },
    handle: 'span'
});

candidate_companies#index

$(".sortable_drag_n_drop").sortable({
    update: function(event, ui) {
        $.post('/candidate_companies/sort', $(this).sortable('serialize'));
    },
    handle: 'span'
});
$(".sortable_drag_n_drop").disableSelection();

What is the best solution now?

• Should I change my bindings and let Sprockets compile all my .js files using //= require_tree . ?
• Or should I try to load my .js according to my views, so I don't end up with a huge application.js?

Answer 1

If you are updating this to the pipeline you have several options. You should probably take the way the pipeline should work into account in deciding.

Broadly speaking, the aim of he pipeline is to join all your JS into one file and minfy/compress it. The point in doing this is reduce the number of requests per page, and to allow far-future headers to be set so that the resource is cached at the browser or somewhere in a transparent proxy/cache.

On to the options.

1. The same as you do now.

You could keep doing the same thing as you do know. I presume that you are using the rails helpers to add these view JS files in the main layout file. You could keep doing the same with the pipeline, however you must add all the files you use to the precompile array:

config.assets.precompile += ['candidate_opportunities.js', 'candidate_companies']

The assets must be in assets/javascripts but there is no need to add them to the manifest file as you are adding each on individually.

It is highly recommended that you stick with the Rails defaults for the pipeline and precompile assets for production.

The downside is an extra request on those pages, but this is only an issue if the app is under high load.

2. The Asset Pipeline Way (TM)

To do this with the pipeline you would need to move these files into assets/javascripts and require_tree as you say.

The issue in your case is that the JS snippets target the same class (but with a different post URLs), so this is not going to work. And with require_tree the order of the files might not be what you want.

A new 3.1 app generates files for views (I think), but the expectation is that they will target unique attributes (from a site perspective) in the markup, because all the files get included in the application.js

To get around the problem of JS clashes. I would suggest that you refactor the JS snippet so that it is more generic. You could use a data-post-url attribute on the sortable object:

<ul class="sortable_drag_n_drop" data-post-url="/candidate_opportunities/sort">

and then collect the url in your JS.

Not only is that DRYer, but you have less overall JS and can fully use the pipeline as intended.