Welcome to Working With Rails


Discussion Forums

Discuss all things Ruby on Rails with perhaps the web's most vibrant group of Ruby on Rails enthusiasts.
how do you organize javascript code in your rails project?
5 Posts
how do you organize javascript code in your rails project?

how do you organize javascript code in your rails project?

Here is how I organize javascript code in my current project: I include common javascript files on the bottom of a layout file and yield :javascript content. It looks like this:

= include_javascripts :common .... = yield :javascript

Then in every page rendered, I put the related javascript code at the bottom of the page, it looks like this:

-content_for :javascript :javascript

 //code goes here...

The question is should I put the code in to a separate javascript file or it is okay to put javascript with the html content it manipulates? Any advantages and disadvantages?

In addition, there could be some javascript code that manipulate html content in partials, how do you organize them?

In summary, what is your best practice for organizing javascript code in your rails project(especially there are a lot of javascript code)?



The question is should I put the code in to a separate javascript file or it is okay to put javascript with the html content it manipulates? Any advantages and >disadvantages?

you should put as much js-logic as you can into your static js-files under public/javascripts/* - so browsers can cache your static js-logic. I use the "content_for :javascript"-technique for dynamic js-stuff. Ajax: if its dynamic js you could integrate the ajax-specific javascript into the ajax-triggering view and/or into the resulting ajax-answer, your choice.

Hey Falk,

Thanks for your suggestion. But I think javascript code can also be cached with “content_for :javascript”-technique. For pages that need specific javascript code besides common javascript code included in layout file, we could include them like this:

-content_for :javascript = javascript_include_tag :specific_javascript_file_for_current_page

About dynamic js code, I agree with you, we have to put the javascript code into ajax-triggering view.

I think you should prevent yielded javascript code as much as possible. I always try to keep the javascript code in .js files and use describing CSS classes and semantic tags for jQuery to hook in on event and Ajax handling (I really recommend you to use "jQuery":http://jquery.com instead of any other javascript library!). The only javascript code printed in your layout could be the authenticity token definition which enables you to use it in javascript.

(in application_helper.rb) def define_authenticity_token   javascript_tag "$.authenticity_token = '#{form_authenticity_token}';" end

(e.g. in layouts/application.html.erb)

As for organized javascript code in your rails application: use the "Yahoo javascript module pattern":http://www.yuiblog.com/blog/2007/06/12/module-pattern/! Doing this prevents your javascript files from just having dangling functions because you put them within seperate javascript modules.

Also I have created a gem called Jzip ("http://github.com/archan937/jzip":http://github.com/archan937/jzip) which is inspirated by "SASS":http://sass-lang.com and "AssetPackager":http://github.com/sbecker/asset_packager/tree/master. This gem helps you to put javascript modules into seperate files as Jzip merges (and also minifies when desired) javascript files based on Jzip templates (each template stands for an outputted .js file). You can use Jzip partials which you can reuse for shared javascript files.

To keep the javascript files and Jzip templates / partials organized, I put them in namespaces and directories (just like with Ruby modules). "This file":http://github.com/archan937/jzip/blob/master/test/javascripts/assets/jzip/shared/code_heroes/ajaxify.js is an example of a javascript module and "this file":http://github.com/archan937/jzip/blob/master/test/javascripts/assets/jzip/shared/code_heroes.js ensures every init() function being called on inclusion of the javascript file. "This Jzip template":http://github.com/archan937/jzip/blob/master/test/javascripts/assets/jzip/frontend.jz will be compiled to "this javascript file":http://github.com/archan937/jzip/blob/master/test/javascripts/after/uncompressed/public/javascripts/frontend.js.

For a complete example of Jzip templates, partials and javascript files, please visit "http://github.com/archan937/jzip/tree/master/test/javascripts/assets/jzip/":http://github.com/archan937/jzip/tree/master/test/javascripts/assets/jzip/.

I use Jzip, jQuery and the javascript module pattern in every new rails project I start, it's the only way to fly :P

I hope my answer can be of great help. Good luck!

I agree with Paul, yielding javascript on every page is sub-optimal. You are best off putting all your javascript functions in the main application.js and reference that right before the closing tag. This way the entire javascript file can be minified, cached and its functions available to you on every page.

Then when you need to change page behaviour with javascript, never write an inline piece of code, but instead put it in the main .js file, in the document ready function:

$(document).ready(function(){ // Your code here });

If you want to call a function on, for example, the contact page, use a page-specific selector in the main javascript file. For instance, to add behaviour to the contact form use $("form#new_contact") to select it, then add the behaviour you want. This way, all your javascript code is in one place where you can easily find it.

When the main .js file becomes too big, use modules to organize it.

5 Posts
Login to add your message