Unobtrusive
JavaScript
behavior oriented JS with
graceful degradation
progressive enhancement
matt aimonetti - SDRuby - Dec 2007
http://railsontherun.com
1

2

Graceful
Degradation
3

• create a page that works with
and without javascript
• page degrades to a less
advanced one if javascript
isn’t enabled in the browser
4

Progressive
Enhancement
5

• graceful degradation is good
but...
• first build the basic functionality
available to all
• then build advanced features
on top of the foundations
6

how?
7

• register event handlers
programmatically
• use CSS selectors to select the
elements to register
• keep things separate
8

V from MVC
9

• Structure: HTML
• Presentation: CSS
10

• Structure: HTML
• Presentation: CSS
• Behavior: JavaScript
Keep the layers separate
11

structure:
12

presentation:
13

behavior:
14

JQuery + livequery
15

Prototype + LowPro
16

resources
• http://prototypejs.org
• http://danwebb.net/lowpro
• http://lowpro.stikipad.com/
• http://groups.google.co.uk/group/low-pro?hl=en
• http://jquery.com/
• http://brandonaaron.net/docs/livequery/
• http://railsontherun.com
17