cfsilence: Unobtrusive Spry

Unobtrusive Spry

Posted By : todd sharp Posted At : October 23, 2007 12:12 PM Posted In: Ajax

2

As I dig more into some of the more widely accepted JavaScript/Ajax frameworks like Ext, jQuery, etc I've come to notice one thing that they all have in common with each other. That is the fact that they all use 'unobtrusive JavaScript'. I'd heard this term thrown around here and there in the past, but wasn't really sure what the heck it meant for a while. If you're not sure either, Wikipedia has a good definition.

A key component of unobtrusive JavaScript is the seperation of JS from HTML elements. What once was written like this:

Would now be represented in jQuery like this:

$('input[@name=foo]').bind('click',function(){
//Do something
});

Or in Ext:

var fooEl = foo.getEl();
fooEl .on('click', function(){
test();
});

There are several reasons why this is desirable. I'll simply borrow from the Wikipedia entry here since I think they describe the benefits nicely:

Most notably, separation of JavaScript functionality (the "behavior layer") from a Web page's structure/content and presentation layers

Disciplined application of best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)

Graceful degradation in browsers that are unable to express the behavior layer in the desired manner

So since I've been dabbling with Ext and jQuery a bit I've started to become accustomed to this unobtrusive style. To that end I decided to do a little research to see if Adobe's Spry had any built in support for it. Turns out it actually does. You can read more about this here .

So here's the same example from above done with Spry:

Spry.Utils.addEventListener("foo", "click", test, false);

Pretty slick. It's nice to see a methodology get widely accepted and similarly implemented across many different frameworks. The syntax and approach may be a little different, but under the hood they're all acting unobtrusively. Good stuff...

2556 Views Send Print Comments (2)