RailsconfEurope: Accessible Ajax on Rails
First day at RailsConfEurope in Berlin!Following a tutorial on Accessible Ajax on Rails now by Jarkko Laine.
Jarkko started with an explanation of the need for unobtrusive javascript. It basically boils down to separating your javascript from your html into a separate javascript file (like you separate your styling from your html in a separate css file). That has a couple of benefits: cleaner design, separation of concerns and a more accessible website (if you take a bit of extra care, the website will also works without javascript).
The tutorial part started with a simple todo list application that used the standard Rails Ajax helpers (e.g. link_to_remote) . Problem with these Rails helpers is that they are not unobtrusive (they generate a lot of javascript code throughout your html code = no separation of concerns) and your site doesn’t work anymore when javascript is turned off (or is not supported).
Jarkko then showed how to separate the javascript from the html (like separating styling in a css file) and reattach it with css selectors with a really nice javascript framework for unobtrusive javascript called Lowpro. Lowpro is based on the Prototype javascript library that comes with Rails.
I first heard about the Lowpro library at the RailsconfEurope in London, 2006. Since that time, the LowPro library seems to have grown up.
Especially the Behavior classes are a really nice way to structure event handling code a bit more “object oriented”. These Behavior classes play the role of the controller in the MVC pattern used in Rails, but then for the client side javascript code.
Lowpro also has a niceset of default behavior classes (e.g. for a remote form).
The concept of event bubbling and event delegation was a nice eye-opener for me. This allows you to add a behavior to a top level element (e.g. an ul) and then delegate the event to a child (e.g. a li). This way you don’t always have to use reload the behaviors after an ajax call (when you only update the childs of course!). Lowpro has nice methods for all this off course. There are some problems with event delegation though: not all events bubble up (most notably focus and blur) and it can kill performance in somce cases (notably onmouseover).
Definitely worth learning more about. I will try to use it in my work projects and a project I am working on now in my free time (a community where people can share physical stuff with their friends, neighbours, colleagues etc.) but more on that in a later post.
Resources:
Presentation on SlideShare: http://www.slideshare.net/supervillain/accessible-ajax-on-rails-presentation
Lowpro svn repo: http://svn.danwebb.net/external/lowpro/trunk/
Tutorial code: http://github.com/jarkko/unobtrusive_book_code/tree/
