Thursday, August 21st, 2008

Ajax Head Pattern; Unobtrusive Rails Apps

Category: Rails

Ken Collins has rewritten his Homemarks application, a Rails app that “allows you to dynamically create and sort Columns, Boxes, and Bookmarks into your own custom start page.”

What is interesting about the rewrite is the new approach that Ken took; the Ajax Head Pattern as he described it:

HomeMarks was built using the Ruby on Rails framework with a heavy emphasis on object oriented JavaScript to make AJAX requests to a RESTful back-end. Unlike most Rails applications it does not use any inline JavaScript helpers nor does it rely on RJS (Remote JavaScript) for dynamic page updates. Instead it is nearly 100% unobtrusive JavaScript which uses simple HEAD or JSON responses to communicate to the objects on the page. This has yielded very slim controller code which is decoupled from the views and easily testable in isolation at a functional level.

You end up with a lot of code that deals with HEAD:

  1. class UsersController < ApplicationController
  2.   # ...
  3.   def create
  4.     User.create!(params[:user])
  5.     head :ok
  6.   end
  7.   # ...
  8. end

Posted by Dion Almaer at 9:01 am

3.4 rating from 24 votes


Comments feed TrackBack URI

way to go … any inline js and rjs really sucks. Im working with jquery and jamalMVC to achive such lovely unubstrusiveness. This keeps every portion of your code so clean be it js , ruby, html, css

Comment by Schorsch — August 21, 2008

I think its great that people are starting to come to the realization that there are better ways than RJS. One of the reasons that RJS fails is that you have to write the server side logic twice: once for JS enabled browsers, and once for everything else, including REST API clients and non-JS browsers.

I’ve taken a similar approach to this on several projects, but I used Jester ( and LowPro to add the JS logic unobtrusively. First I coded up the plain HTML interface and got everything working for non-JS enabled browsers. Then I updated the controllers to accept/render XML and JSON and made sure the RESTful API was solid. Finally I used LowPro and Jester to unobtrusively add the JS logic to the existing HTML, complete with AJAX controls and other niceties. All JS enabled browsers became just another consumer of the existing RESTful API.

In the end this worked out quite well, and resulted in a nice separation of behavior, presentation and content.

Comment by dkubb — August 24, 2008

Leave a comment

You must be logged in to post a comment.