RailsConf Europe 2006: Unobtrusive Ajax with Dan Webb

(code and slides)
Dan Webb’s Unobtrusive Ajax With Rails talk proved so popular yesterday that it is being redone in the main hall during lunch today.

Unobtrusive Ajax (or JavaScript really) is all about removing all those inline onclick=”return myFunc(an_id)” bits of code from your HTML and into your JS. Separating behaviour and mark-up. Attaching behaviour to your class definitions e.g. class=”productbutton”.

At the very least this makes your pages smaller (think of a 1000 item list which has onclicks inline vs. attached via a class in a separate JS.)

At the most it is the idea of the class assigned to HTML elements.

A big theme is graceful degredation for when JS is not available.

A good point is around a href=”#” which semantically and functionally doesn’t make sense. I am an offender here but aim to change.

button_to is a little known Rails helper that generates a button in a form. This is for when you should be using buttons and not links e.g. for delete links. Remember, links should not have side effects (if for no other practical reason than avoiding pre-fetch technologies like the Google Toolbar that will wipe your records.)

To get started with UJS checkout the Rails plugin at ujs4rails.com.

A good talk and as Dan says, it isn’t rocket science. It has obvious benefits even if you don’t care about semantics. Hopefully Rails takes the ideas into the trunk.

Viewing 1 Comment

    • ^
    • v
    Agreed, I've been working on a few new methods of making my xmlhttprequests a bit less obtrusive. I have to say its made me feel comfortable enough with 'ajax' to have suggested it to the higher ups for a focus to take on our upcoming platform. As it is currently, it runs some pretty old and ugly code, that fails miserably if a customer has no javascript support.. So I'm hoping they'll be easily persuaded (though they are currently more inclined towards going the absolutely-no-javascript approach, which I suppose works as well..)
    But I've atleast got the designers on my side!
 

Trackbacks

(Trackback URL)

close Reblog this comment
blog comments powered by Disqus