Madison Rails
unob ajax for rails

Home Page | All Pages | Recently Revised | Feed

Dan Webb’s’ background

• web developer from London, UK
• DHTML hacker for 7 years
• working with RoR for nearly two years
• member of the prototype core team

Web Standards are Good

• more maintabile
• more accessible
• lighter pages
• future proofed better

Javascript and Web Standards

• javascript got a bad name back in teh day
• lots of crappy js around
• web 2.0 has helped maked js more trendy
• plus browser support is much better

What is unobtrusive js

• new behavior layer on top of the client-side cake
• further decoupling from style (css) and content (xhtml)
• its not just putting your js in a different file
• its not the “rails way”

link_to_remote

• ex: link_to_remote which
• [html]inline js link[/html]
• a little better: [html]a little better[/html]
• the better optioon isnt possible with link_to_remote

Path to Enlightment

• write good app in semantic HTML, CSS, first
• then write javascript to hijack elements and enhance the UI
• dont be scared of JS

UJS Plugin

• plugin to make unobtrusive scripting easier w/ Rails
• define behaviors with CSS selectors
• keep script in external files
• www.ujs4rails.com
• links should never have side effect
• use button_to to insert a form button
• apply_behavior a CSS selector, some behavior (js), and hash of options

Demo Here

• demo here with trainer (sneaker) website
• see the code here:

Dynamic Caching

• hashes js file and sets ETag header
• everytime script is requested the ETag is stored by browser
• server can then check the ETag on future requests
• if browser and server match send back 304 Not Modified header

File Caching

• writes files to disk using Rails caching
• faster then dynamic caching
• manual expiration of scripts required
• use observers, cron jobs, etc…same methods use for all of Rails caching

Sensible Defaults

• be angle on your client-side shoulder
• UJS does things the way it wants to, unless you tell it otherwise
• can override most things
• make it easy to do things the right way

Prototype Rocks

• easy API
• large user base
• integration with Rails
• lots of supporting libraries
• good functional utilties

Prototype Sucks

• poor event utilties
• almost exclusively innerHTML based
• performance in some sports
• weird OO extensions
• slowed development in recent months, but promising recently

Enter Low Pro

• set of extensions to Prototype for unobtrusive scripting
• compilation of others wrok
• thx to many other JS authors…
• better event handling, behaviors, DOMBuilder, and more…

Sample Code

• $(‘element’).remove();
• $(‘another’).nextElement();
• (‘my_el’).replaceElement(newEl);

Events

• Event.observe replaced w/ Dean Edwards addEvent()
• return false; to stop default behavior – works in Safari!
• “this” points to the triggering element, like it should
• DOMContentLoaded supported

Behaviors

• inspired by event:Selectors by Justin Palmer
• Event.addBehavior() to do behavior declaratively
• behavior classes for OO style
• nicely encapsulate behaviors in spot for many different elements

Low Pro Plans

• developed alongside UJS for Rails
• lowpro.ujs4rails.com – coming soon
• XPath support
• add on behavior classes for common tasks (dnd, sorting, etc)
• behavior debugging

Plans for UJS

• improved testing
• more behavior helpers
• more tutorials
• ways around the session problem
• integration with Simply Helpful

Wrapping Up

• unobtrusive js should be default way to approach problems
• rails is not up to it out of the box
• UJS is one attempt