gohanlon.com - Home

Rails-JavaScript Named Routes (Re)Visited

2008-05-29T04:26:00Z

Almost a year ago I was unable to find a plugin that did something that I considered rather basic—allow for easy URL generation from JavaScript based on routes defined in Rails. I hacked up a proof of concept albeit rough solution and posted it to this blog. Delightfully, Joshua Sierles ran with the idea, improved upon it, and published a plugin.

A year later and thanks in part to the ease of collaboration provided by GitHub, I've formally paid my respects to Joshua's plugin by updating it for Rails 2.1, adding support for caching the generated javascript file, and a couple small features to make the javascript helpers behave a little more like the "real" Rails named route helpers.

What it does

Suppose that you had the following RESTful route defined in routes.rb:

map.resources :posts

Then, you'd get these (and other) familiar-looking javascript URL helpers:

posts_url() => "http://localhost:3000/posts"
post_url({id: 3}) => 'http://localhost:3000/posts/3'
post_path({id: 3}) => '/posts/3'
formatted_post_path({id: 3, :format, 'xml'}) => '/posts/3.xml'

The javascript generated by this plugin does not depend on any third-party javascript library.

Install

Assuming you are using Rails 2.1 RC1 or later, you can use the Rails script/plugin install command:

$ cd RAILS_ROOT
$ script/plugin install git://github.com/jsierles/js_named_routes.git

This plugin is targeted at Rails 2.1 and may not be compatible with other Rails versions without minor modifications.

Usage

At startup, a route for the plugin's all-important javascript generating NamedRoutesController is dynamically injected. With the plugin installed, visit the following URL to inspect the provided javascript helpers:

http://localhost:3000/javascripts/named_routes.js

Then, include the above javascript URL in your HTML head tag (probably in application.html.erb or some other layout file):

<%= javascript_include_tag :named_routes %>

And you're done. Go have some fun!

// Mootools 1.2b
new Request({url: post_comments_path({post_id: 4}) }).post({
  post_id: 4, comment: {body: "something useful"}
});

// jQuery
$.post(post_comments_path({post_id: 4}), {
  post_id: 4, comment: {body: "something useful"}
});

// Prototype
new Ajax.Request(post_comments_path({post_id: 4}), {
  method: 'post',
  parameters: {post_id: 4, comment: {body: "something useful"} }
});

Just like in Rails, specified route segments that aren't part of the route will be added as query parameters:

post_url({id: 3, extra: 'galen'}) => 'http://localhost:3000/posts/3?extra=galen'
post_path({id: 3, extra: 'galen'}) => '/posts/3?extra=galen'

This plugin uses page caching to cache the generated javascript routes, but lacks any intelligence for sweeping the cached file if you've made changes to your routes. That shouldn't be a problem if you are using Capistrano for production deployments because the cache is normally stored in RAILS_ROOT/public which is not kept across deployments. Caching is normally disabled in development mode, but if you turn on caching you may need to manually clear the cached file:

$ cd RAILS_ROOT
$ rm public/javascripts/named_routes.js

Alternatives

I'm pleased that there are at least two other plugins that also aim to satisfy the need to dynamically generate URLs based on Rails named routes: LessJsRoutes and JavaScript Routes.

LessJsRoutes offers similar syntax to js_named_routes. A notable difference is that the javascript routes file is built via a rake task and therefore needs to be manually re-built whenever you make a change to your routes. LessJsRoutes also depends on either jQuery or Prototype, but perhaps only if you take advantage of their handy looking _ajax helper methods (I haven't checked into this). They also support a more compact but still Rails-like syntax for specifying routes: post_url(3) rather than post_url({id: 3}).

JavaScript Routes (not to be confused with js_named_routes) has a very different and more verbose syntax. While I personally prefer simpler and more Rails-like syntax, the plugin appears to be able to generate routes other than "named routes." Like LessJsRoutes, it also relies on a rake task to manually build the javascript routes file.

I'm Hiring!

2008-04-29T06:50:00Z

Get in touch if you have interests in common with mine:

Ruby
Ruby on Rails
AI (machine learning, classification, clustering)
Mac OS X
Linux (esp. Gentoo)
MySQL (and SQL in general)
HTML/CSS (I love this book)
iPhone (Mobile Safari and SDK)
JavaScript (esp. mootools and jQuery)
UC Santa Cruz

If you’re a ferocious learner you don’t need to know Ruby, but you do need to have command of some language and the desire to learn Ruby. Same goes for Rails. Same pretty much goes for all of the above, but be ready to learn quickly.

Have projects of your own to sport? Awesome.

You’d be spending a portion of your time coworking with me on campus at UCSC, and the rest working from a location of your choosing. This is a part-time position and the pay is negotiable.

Introduce yourself by emailing me here: gohanlon at gmail dot com. Cheers!

Installing Ruby-WordNet on Leopard

2008-04-28T22:21:00Z

I recently decided to play around with WordNet, a lexical database of English. Naturally, I wanted to use Ruby and found the Ruby-WordNet bindings. The install process was more involved than I expected.

Install WordNet

Download and unpack the latest version of WordNet. (I installed WordNet-3.0.tar.gz.) Then, proceed with the usual build steps:

$ cd ~src/WordNet-3.0
$ ./configure
$ make
$ sudo make install

Install Berkeley DB

I used MacPorts, which was nice and simple:

$ sudo port install db46

Install Berkeley DB Ruby Bindings

Download the latest release of BDB via FTP server. (I installed bdb-0.6.2.tar.gz.)

$ cd ~src/bdb-0.6.2

Next, if you are using an Intel-based Mac, use this:

$ env ARCHFLAGS="-arch i386" ruby extconf.rb --with-db-include=/opt/local/include/db46 --with-db-lib=/opt/local/lib/db46

Otherwise, if you’re using a PPC-based Mac:

$ env ARCHFLAGS="-arch ppc" ruby extconf.rb --with-db-include=/opt/local/include/db46 --with-db-lib=/opt/local/lib/db46

For me, not specifying the architecture results in this general error:

Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers.  Check the mkmf.log file for more
details.  You may need configuration options.
...
extconf.rb:78: libdb not found (RuntimeError)
...

With more detailed error information in ~/src/bdb-0.6.2/mkmf.log:

...
ld: symbol(s) not found for architecture ppc
...

Note: In general, I’ve found that anything that I build using MKMF needs the ARCHFLAGS environment variable. Also, note that some RubyGems use MKMF to build native extensions, so -arch is also required (i.e. sudo env ARCHFLAGS="-arch i386" gem install mysql).

If everything went well you’ll have a Makefile and can finish off the Berkeley DB Ruby bindings installation:

$ make
$ sudo make install

Install Ruby-WordNet

Download the latest version of Ruby-Wordnet (I installed Ruby-WordNet-0.0.4.tar.gz):

$ cd ~src/Ruby-WordNet-0.0.4
$ ruby convertdb.rb /usr/local/WordNet-3.0/dict/
$ ruby test.rb
$ sudo ruby install.rb

I got one failure while running the tests, which I assumed to not be a huge problem.

You should now be able to run the examples:

$ sudo ruby examples/distance.rb pine tree
The hypernym distance between pine and tree is: 3

Note: To avoid having to sudo to run your Ruby scripts that leverage WordNet, you will likely need to correct permissions to allow your user write access to the ruby-wordnet database files. I do not recommend adding your user to the group wheel, which exposes you to security vulnerabilities and/or prevent applications from loading plugins. For example, Safari won’t load plugins (Input Managers) if your user is a member of wheel.

Concluding Thoughts

I have a strong suspicion that the Ruby community would benefit from using MySQL for the WordNet database. There are already some projects that port WordNet to a MySQL database, such as wordnet sql builder. With a reasonable amount of effort the schema could be altered to conform to ActiveRecord conventions, making WordNet much more accessible.

TextMate for Git Commit Messages

2008-04-25T15:23:00Z

I prefer VIM for use with Git commands that require an editor (such as the commit message for git commit). However, if you’d prefer to use TextMate you can do the following:

$ echo "GIT_EDITOR=\"mate -w\"" >> ~/.bash_login
$ source ~/.bash_login

That assumes that the mate command is installed and findable in your PATH. For more info, in TextMate select the Help -> Terminal Usage... menu item.

The EDITOR environment variable is used by many applications (including git) that need the help of an editor. If you’d prefer to specify that TextMate be used with any such application, specify EDITOR instead:


$ echo "EDITOR=\"mate -w\"" >> ~/.bash_login

Nginx on Gentoo RC Script

2008-04-23T01:00:00Z

I build Nginx from source off of a fork/mirror so I can take advantage of a the fair proxy balancing policy. Buiding from source means crafting your own Gentoo rc script. Fortunately, the Nginx rc script distributed through Portage will work perfectly with a couple minor modifications.

You should only need to correct the path to the nginx executable, which should probably be /usr/local/sbin/nginx if you accepted the default build configurations:

$ sudo which nginx
/usr/local/sbin/nginx

Download and edit the rc script to use correct path to nginx:

$ cd ~
$ curl -0 http://sources.gentoo.org/viewcvs.py/*checkout*/gentoo-x86/www-servers/nginx/files/nginx?rev=1.3 > nginx
$ vim nginx

Here are the changes that I made in the form of a patch:

17c17
<         --exec /usr/sbin/nginx -- -c /etc/nginx/nginx.conf
---
>         --exec /usr/local/sbin/nginx -- -c /etc/nginx/nginx.conf
38c38
<     /usr/sbin/nginx -c /etc/nginx/nginx.conf -t
---
>     /usr/local/sbin/nginx -c /etc/nginx/nginx.conf -t
40a41
>

Finally, install the rc script and configure Nginx to start at boot:

$ sudo mv nginx /etc/init.d/
$ sudo chmod +x /etc/init.d/nginx
$ sudo rc-config add nginx default
$ sudo /etc/init.d/nginx start
$ rc-config show

Here’s the fork with the fair proxy balancing patch (download snapshot).

Installing LIBSVM on Leopard

2008-04-20T17:08:00Z

LIBSVM is a popular software library for performing document classification using support vector machines.

One easy approach to installing LIBSVM on Mac OS X Leopard is to use the popular MacPorts (download page). If you have MacPorts installed, you can install LIBSVM as shown below.

The Portfile has recently been fixed, so be sure to sync like so:

$ sudo port -v selfupdate

Install libsvm already:

$ sudo port install libsvm

Naturally, I’m particularly interested in using the Ruby bindings for LIBSVM. I’m not completely satisfied with the method I used to get them built and installed, but I’ll write it up.

NOTE: The Portfile for LIBSVM ~~is currently~~ was broken, but I contributed a very minor patch which updates the port to LIBSVM 2.86. The patch has been accepted by the maintainer and ~~will soon be~~ has been rolled.

Kinesis: My Favorite Keyboard

2007-10-08T15:03:00Z

Several years ago, I had wrist and finger pain from typing all day. I purchased a Kinesis ergo keyboard and the pain hasn’t returned since. It’s a super smart design.

Keys conform to your hand

The keys are set in a bowl so that each key is as close as can be to your finger tips.

Opposable thumbs are useful

Rather than only using your thumbs to press space bar, a cluster of keys is placed under each thumb. That means fewer keys that require straining your pinky to reach.

Natural finger movement

Keys are all vertically aligned, not diagonally like most keyboards. The keys are in the natural range of movement of your fingers, no need to move your wrist or yaw your third knuckle.

Key remapping

Keys can be remapped, so if you don’t like where a key in placed you can just swap it for another key. Personally, I’ve made very minimal use of this feature.

Type numbers faster

The keyboard doesn’t have a numeric keypad, which seems like a week point at first look. But with its smart design, 8 of the number keys rest under your fingertips compared to 4 when using a numeric keypad. Numeric calculations are a bit slower, as the operators aren’t as conveniently located as on a numeric keypad.

The keyboard does support a numeric keypad mode similar to what most laptops have, but I don’t tend to use it (perhaps I would if I spent more time typing calculations).

Better your speed and technique

The layout of the keys rewards good typing technique and penalizes bad habits. I broke several bad habits that I didn’t even notice I had.

Minimal learning curve

Before I purchased the Kinesis keyboard, I was split between learning the Dvorak layout or trying another alternative and expensive keyboard. I had previously tried the ill-fated Fingerworks TouchStream LP which had a multi-month learning curve and universally reduces typing speed—yuck!

I was pleased that after a week I was up to my normal typing speed on the Kinesis keyboard. After the second week my typing speed jumped about 15 WPM.

Rails Named Routes from JavaScript

2007-07-15T04:54:00Z

UPDATE 2: Read the latest information about the plugin.

UPDATE: Joshua Sierles has improved upon the concepts and code of this article and published an aptly named plugin: Named Routes in Javascript.

Last week a new JavaScript REST API called Jester was announced over at Giant Robots. It’s young, but I’m thoroughly impressed and am planning to put it thought its paces in a large project very soon. Go check it out if you’re using REST.

Alas, not all of my projects are using REST (yet). Even when developing following the REST pattern, you most likely still occationally use Named Routes. Also, RESTful routes are basically automatically generated Named Routes, so this technique can be used with REST (but may require enhancement to support all the various RESTful route variations).

The Giant Robots folks have inspired me to write about a technique I’ve been using to use Rails Named Routes in JavaScript to prepare Ajax requests using Unobtrusive JavaScript techniques.

A word of caution: The following approach is both simple and naive—it is not intended to be a complete implementation of Rails Named Routes in JavaScript. The technique hasn’t been extensively tested, but it meets my needs (so far). YMMV.

The Yucky Way

Consider the following Named Routes (defined in routes.rb):

ActionController::Routing::Routes.draw do |map|
    ...    
    map.with_options :controller => "story" do |story|
      story.create_story '/story/create/:milestone_id', :action => "create" 
      story.move_story '/story/move/:id', :action => "move" 
    end
    ...
end

One way to use a route on the client-side is to do something like the following in a view template:

<html>
...
<script type="javascript">
var move_story_url = '<%= move_story_url %>'
</script>
...
</html>

And then later use the move_story_url variable to piece together a URL for an Ajax request:

var story_id = ...
new Ajax.Request(move_story_url + "/" + story_id, {
  ...
})

Yuck. That defeats Rails’s routing goodness. Rails routes free the developer from putting URL’s and paths together by concatenating strings all over in their Ruby code. By putting URL’s and paths together by hand in JavaScript, the DRYness of defining a particular route in a single place is lost.

To further illustrate the problem, consider a route that has multiple identifiers:

http://localhost:3000/blog/:blog_id/posts/:post_id

Detailed knowledge of the route is needed in your JavaScript:

"http://localhost.com:3000/blog/" + blog_id + "/posts/" + post_id

Double yuck.

The Happy Way

First, include the following JavaScript file a view file (probably someplace global like application.rhtml):

<html>
...    
<script language="javascript" type="text/javascript" 
src="/named_routes_to_javascript"></script>
...
</html>

where the above referenced JavaScript file is dynamically generated from the routes defined in routes.rb, and contains a JavaScript function corresponding with each of your named routes.

Create a Controller to handle request for the dynamically created JavaScript file:

class NamedRoutesToJavascriptController < ApplicationController
  def generate
    headers['Content-Type'] = 'text/javascript'
    render :template => "named_routes_to_javascript/generate", :layout => false
  end
end

Create the Template to render the JavaScript (generate.rhtml):

var host = "<%= "#{request.protocol}#{request.host_with_port}" %>" 

<% ActionController::Routing::Routes.named_routes().each do |name, route| -%>
function <%= name %>_url(overrides) {
  var options = {
  <% route.significant_keys.each do |key| -%>
    <%= key %>: <%= route.defaults[key].nil? ? "''" : "'#{route.defaults[key]}'" %>,
  <% end -%>
    xxx: null
  }
  Object.extend(options, overrides || {});

  return host+"<%= route.segments.collect(&:to_s) %>"<% route.significant_keys.each do |key| -%>.replace(":<%= key %>", options.<%= key %>).replace("//", "/")<% end -%>
}
<% end -%>

Lastly, create the following route in routes.rb:

ActionController::Routing::Routes.draw do |map|
    ...
  map.named_routes_to_javascript 'named_routes_to_javascript', :controller => "named_routes_to_javascript", :action => "generate" 
  ...
end

The dynamically generated JavaScript looks like the following, with a function for each Named Route defined in routes.rb:

var host = "http://localhost:3000" 

function move_story_url(overrides) {
  var options = {
    id: '',
    controller: 'story',
    action: 'move',
    xxx: null
  }
  Object.extend(options, overrides || {});

  return host+"/story/move/:id/".replace(":id", options.id).replace("//", "/").replace(":controller", options.controller).replace("//", "/").replace(":action", options.action).replace("//", "/")
}

function create_story_url(overrrides) {
  // ...similar to above...
}

JavaScript snippets:

>>> move_story_url({id: 5})
http://localhost:3000/story/move/5/

>>> create_story_url({milestone_id:73})
http://localhost:3000/story/create/73

And finally, an Ajax request becomes:

var story_id = ...
new Ajax.Request(move_story_url({id: story_id}), {
  ...
})

No more knowledge of routes required within your JavaScript code—it just feels right.