Unobtrusive Javascript

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

2. 2

3. Graceful
Degradation
3

4. • 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

5. Progressive
Enhancement
5

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

7. how?
7

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

9. V from MVC
9

10. • Structure: HTML
• Presentation: CSS
10

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

12. structure:
12

13. presentation:
13

14. behavior:
14

15. JQuery + livequery
15

16. Prototype + LowPro
16

17. 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