Javascripter: Organize your javascript

Javascripter is a Rails plugin that helps keep your javascript files organized.

Install

To install, just add Javascripter to your vendor/plugins directory:

script/plugin install git://github.com/mokolabs/javascripter.git

Usage

To use Javascripter, replace your javascript_include_tags with a single tag:

<head>
<title>the.rails.ist</title>
<%= javascripts %>
</head>

Once you do, your javascripts will be included automatically, using the conventions below.

<head>
<title>the.rails.ist</title>
<script src="/javascripts/application.js?1183566571" />
</head>

Organize your javascripts

Javascripter uses a simple set of conventions:

  • Javascript for your entire application should be stored in application.js
  • Javascript for specific controllers should be stored in controller.js
  • Javascript for specific actions should be stored in controller_action.js
  • Javascript for specific actions should be stored in controller/action.js (optional)

Follow these conventions and Javascripter will reward you with automagic goodness, loading javascripts for specific controllers or actions whenever they are active.

Support for :defaults

Need Prototype? Just use the :defaults parameter, like normal.

<head>
<title>the.rails.ist</title>
<%= javascripts :defaults %>
</head>

And you'll get this:

<head>
<title>the.rails.ist</title>
<script src="/javascripts/prototype.js?1187404678"></script>
<script src="/javascripts/effects.js?1187404678"></script>
<script src="/javascripts/dragdrop.js?1187404678"></script>
<script src="/javascripts/controls.js?1187404678"></script>
<script src="/javascripts/application.js?1187404678" />
</head>

Include additional javascripts

Need to include extra javascript libraries? Use the :include parameter:

<%= javascripts :include => "lowpro" %>
<%= javascripts :include => ["lowpro", "lightbox"] %>

Generator

Javascripter also includes a generator that will create a default application.js script and separate javascript files for each controller in your application.

To use the generator, run this command in your terminal:

script/generate javascripts

If you add a new controller, just run the generator again and a new javascript for the controller will be created. (Existing javascripts will be ignored.)

Credits

Special thanks to Lachie Cox and the rest of my RORO Sydney comrades who asked for this plugin.

Feedback

Comments and patches welcome at http://github.com/mokolabs/javascripter/.

August 22, 2007

Comments

Lachlan Hardy August 22, 2007

This is very hot and makes me feel all warm and fuzzy inside. Thanks!

tom armitage August 22, 2007

Of course, you really want to be handling IE-specific javascripts too, much like you do in Styler. There are good reasons for this - the obvious one we have at work is faking max-width in IE6.

The only problem is, if you have both an IE6 specific stylesheet and an IE6 specific javascript... they both need to be inside the same conditional comment. This is hard when your two systems are decoupled, but easier when you treat js and css in similar fashions.

Coincidentally, my IE-specific plugin (http://infovore.org/archives/2006/12/10/handling-ie-specific-stylesheets-with-a-rails-plugin/) does exactly that...

...but beyond that, it's a good idea, and I like your app/controller specific features!

Andreas Roedl August 22, 2007

Beautiful! It's exactly what I'm looking for.

Jamie Hill August 22, 2007

Looks great. Are namespaced controllers catered for? e.g. Admin::ProductsController --> javascripts/admin/products.js

Patrick Crowley August 22, 2007

@Tom -- Good point. Perhaps I'll release a coupled version of the two plugins, or figure out some other way to support conditionals for javascript.

@Jamie -- Namespaced controllers aren't supported yet, but check back in a day or two.

Josh Owens August 23, 2007

This seems unneeded. Why would you release this when the new edge has support for easy inclusion of multiple javascript files? Even better, it munges them all into one file to cut down on http requests and speed up page loading.

Just curious as to why :)

Patrick Crowley August 23, 2007

Not everyone's on Edge, Josh.

Plus javascript_include_tag :all will bundle all of your javascripts, so if you need to include javascripts for specific actions or controllers, you're out of luck.

That said, asset packaging is good stuff. Styler and Javascripter could both benefit from having it.

Ben Ong August 27, 2008

This is a very handy plugin. Is there a way to select the order in which the javascript files are loaded? (i.e. load jquery before application.js)

Thanks,
Ben

New comments are disabled right now. Once we finish migrating this blog, we'll restore them.