JS in Rails

Its needless to say the importance of JavaScript in web applications. Because Websites are becoming more and more dependent on Javascript.

There are many ways to add JavaScript in Rails. But the question is what is the best way to add JS in our Rails app that will ensure the optimum performance and will be easily managable for the developers.

From Rails 3.1 we have the asset pipeline that improves website performance by concatenating multiple JavaScript files into a single script. That gives the developer freedom to write JS codes in different files and also increase performance by eliminating multiple <script> request.

With it we can organize multiple JavaScript files in the app/assets/javascripts folder. app/assets/javascripts/application.js file works as a manifest file, let us specify which js or coffescript files we want to specify.

//= require jquery
//= require jquery_ujs
//= require_tree .

By default, it has //= require_tree which will includes all JavaScript files in the app/assets/javascripts directory. With the power of rails asset pipline all the Js files specified will merged into single application.js script. So we need to specify only one js file in our layout, with this statement.

<%= javascript_include_tag "application" %>

To know what more Rails asset pipeline can do visit here: http://guides.rubyonrails.org/asset_pipeline.html

Whether we use Rails asset pipeline or use the <script> tag directly in the view file, we have to find a way to store all the JS files in the directory in such a way that it will be easily managable later.

In Rails, normally we have 3 directories to store the js files.

1. app/assets/javascripts directory
2. lib/assets/javascripts directory
3. vendor/assets/javascripts directory

The first one we use to store the Js files that we have created for our application. The second location to store Js files that will also use in some other applications. And the third one for storing the plugins/script from third party.

If we use the second or third directory and want to use them in whole app, we must need to specify that in the applications.js manifest.

For organizing our scripts, there are many ways to do this. The Paloma gem offers an easy way to organize JavaScript files using the Rails asset pipeline. It also provides a capability to execute page-specific JavaScript.

To manage with Paloma gem, we need to specify it in the application.js file.

//= require paloma

It makes page-specific javascript very easy. Suppose we have a model Product and ProductsController. In the controller we have a method index and we want some javascript function to work only for that method.

So our controller will looks like,

def ProductsController < ApplicationController
  def index
    @products = Product.all
  end
end

And in our JS files we can write it like this,

Paloma.controller('Products', {
  index: function(){
    alert("script for Index method Working.");
  }
});

So, now our small javascript code will only execute when the index method will be called. Very easy to use, right?

To know more about this gem: https://github.com/kbparagua/paloma

We'll talk about more ways in the next post.