WebDD07: Unobtrusive Javascript with Rails (Dave Verwer)

Review: Unobtrusive Javascript with Rails at WebDD Conference 07 15:40 to 16:40

This was the final talk of the day and I was flagging a bit, I'd originally planned to go to Scott Guthrie's WPFe talk, but that was packed out and, following Dave's stellar performance in the previous talk I was interested to see what he had to say on a subject I was a bit more familiar with.

The talk started with a little motivation, why would you want to make your javascript unobtrusive? The main benefits, if your sites are built to work with or without javascript, are:

  • Accessibility - if no part of your site depends on javascript to provide the content then it will naturally be more accessible
  • Mobile Browsing - an increasingly more significant market segment, but most mobile browsers don't handle javascript very well if at all
  • SEO - search engine spiders don't pay any attention to javascript and won't see any content generated by it

Aside from the 'big three', Dave also mentioned the Dutch web accessibility law, which mandates unobtrusive javascript (and will possibly be a model for new laws in other countries), and that separating behaviour from content is just good practice, in the same way as seperating design from content with CSS is.

Next Dave showed us an example of 'good' and 'bad' web applications. We saw Google Maps in which all the basic functionality is available even if javascript is turned off in the browser, and Zoho Planner which is impossible to even log in to without javascript. Then we moved on to some common issues:

  • no target="_blank" - this assumes your user is browsing in a windowed environment
  • no href="#" - this link conveys no useful information if javascript is not enabled
  • no onclick="... - this assumes javascript is available, better to make sure the default functionality works and add event handlers with javascript instead

Finally Dave showed us a demonstration of developing a web app using unobtrusive techniques. He showed us the LowPro, an extension of Prototype to make it easier to implement unobtrusive scripting. This is part of the UJS Rails Plugin which extends the Ajax helpers available in Rails to be unobtrusive, making it all very easy. One of the key points from the demo was that because everything needs to work without javascript, anything which a user without javascript is going to need should be in the HTML. If some of those items aren't needed when the page has been Ajaxified (submit buttons on auto-completing search fields for instance) then they can be hidden with javascript, but it is impossible to have javascript add things in when it's disabled.

In conclusion, Dave recommended that we develop our sites so they work without javascript and then add the script in afterwards. He also recommended that, as we were considering adding an Ajax effect to our page, we asked ourselves three questions:

  • Do we really need it?
  • Will my links still work?
  • Does this break the back button?

Another great talk from Dave with much useful advice, 5 out of 5. I must admit to doing a lot of the href="#" stuff in my daily work as a sort of reflex action, it's a habit I should get out of!

Technorati tags for this review: