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.

Answer 2

I'm frustrated on Rails asset pipeline. Maybe not the whole asset pipeline thing but the way Rails organize javascript is really not logical.

As of now, Rails has a separate javascript file per controller. Which is somewhat good in terms of logical organization. But then the asset pipeline compresses all those files into one big js file. So basically your js files are well organized but then they are loaded all at once, resulting to variable clashes, function clashes, other code clashes and other unexpected behavior. Because what we really want as developers is a simple way to execute or load a page specific javascript.

One famous approach is to just include a specific javascript file per page. Yes, that will work, but we are not using the performance boost given by the asset pipeline if we are requesting different javascript files per page.

My solution is to create an javascript object that holds all the page-specific functions then fetch and execute them once the matching controller-action pair is executed by Rails. Something like this:

PageJs = {};
PageJs["users/new"] = function(){ 
  alert("I will be called when users/new action is executed");
};

Basically, that's the core idea. Well I've implemented that idea and created a gem for it. Checkout Paloma , and see how you can logically organize your js files and execute page-specific javascript without complex setups.

Here's an example on how Paloma is used:

Javascript file:

Paloma.callbacks['users/new'] = function(params){
  // This will only run after executing users/new action
  alert('Hello New Sexy User');
};

Rails controller:

def UsersController < ApplicationController
  def new
    @user = User.new
    # No special function to call, 
    # the javascript callback will be executed automatically
  end
end

That's just a quick example, but it has lot more to offer, and I'm sure it can solve your problem. Easily.

Thank You!