Dan Webb: Unobtrusive Javascript
I said a quick hi to my colleagues as I dashed from the congress hall to Dan Webb's talk.
I was surprised at the small venue they had given him, but quickly grabbed a seat.
Good thing too, as I discovered that people were turned away from the talk.
After this incident, Skillsmatter were quick to attempt to rectify the problem by determining numbers before assigning rooms.
Dan kindly gave a repeat performance the following day in the congress hall, for all those who missed it.
Back in Fashion
From the ashes of the browser wars and DHTML came CSS, XHTML, and Web Standards.
Javascript had a bad name.
However, along came AJAX and Web 2.0, and made Javascript trendy again.
Unobtrusive DOM scripting
CSS and XHTML separate out content and style.
Separating out Javascript is the next logical step.
It is not merely about putting Javascript in a different file.
It requires a change in mindset.
Javascript should be used to enhance an already working application.
Javascript should not be required to use the application.
Rails
Rails helpers such as link_to_remote create Javascript which works, but is not good.
link_to_remote generates a link which will not work without Javascript: it does not degrade gracefully.
Collections also produce ugly HTML, which inevitably lead to fatter pages.
UJS Plugin
The Unobtrusive Javascript Plugin hopes to rectify this situation.
You can just select parts of the page to apply behaviours to.
apply_behaviour (CSS selector, event)
Will create the appropriate Javascript file which will act upon the CSS selector. There will be no Javascript mixed in with your HTML.
Links should never have side effects.
If they must do something besides be a link, then they should be buttons.
You can always apply any behaviour you want to your button, after you have confirmed it works.
respond_to
Assuming that you have a button_to on your view which will add something to your basket, you will have an action in the controller to deal with it.
Make sure that works first.
Now you can make it fancier by adding a behaviour.
However, you don't want to have to rewrite the action just because you are using Javascript to do some additional things.
Enter respond_to: this new feature in Rails controllers will allow an action to respond differently depending on what was requested.
respond_to do |type|
type.html { redirect_to products_url}
type.js # does default which is to render action.rjs
end
Case Study
Dan kindly provided us with an example of UJS in action. (It's an online sneaker store, in case the Web 2.0 name didn't give it away).
Path to Enlightenment
- Write a working app using semantic HTML
- Style with CSS
- Apply JS to hijack the page elements to enhance the UI
- Learn Javascript and DOM scripting
Conclusion
I enjoyed Dan's talk, because he made it look easy and especially because it made so much sense.
The generated pages looked amazingly clean; like seeing a styled page for the first time after years of table hell.
Thanks Dan and Luke!