Monday, May 26, 2008

Becoming Less Obtrusive

I'm back to spending most of my time on my code, so blogging is unfortunately becoming a rare indulgence for me. Today, though, I started adjusting some of the intricacies of my user interface and I need to put this information out there for people who haven't switched over yet:

You want to write your javascript unobtrusively

You may not know it yet, but you do.

When I started the startup project I'm working on right now, I had very little familiarity with javascript coding. I'd done a few hacks here and there to make things pretty, and I'd done some ajax work in the past to streamline an otherwise unintuitive interface, but I really hadn't spent that much time with it and considered it more as a toy concept group that's primarily the domain of "flashy" websites.

In the last few months, I've been working on a website that requires a few neat tricks with the presentation layer, and so I've been leveraging javascript more and more. First I just used the tricks that were packed in with ROR (prototype and scriptaculous helpers), but when I wanted more control I started writing the javascript myself, and then I began introducing JQuery. Before I knew it my .rhtml pages looked something written by Dr. Frankenstien himself (reincarnated as a hack of a web developer). "onclick" handlers were sprinkled throughout the page, sometimes mini-scripts would be jammed in between the mark-up if I was only going to use the function once; it quickly became a nightmare that only I could navigate (I being the one who wrote the whole mess).

Now, I'd heard the term "unobtrusive javascript" before, and even read a few blog posts on it, but it sounded like it would take too much time to abstract everything that way and I just wasn't into wasting time. This is a startup, right?

Well, I built a new section of my site today, tentatively exploring the idea of writing all my javascript separate from my html, letting the site develop first in a graceful way without the scripts and then adding them in only if javascript was available, and you know what? I'm a convert. I firmly believe that this is a better way to code for the web. Of course, this could be due to my relative inexperience with the concept, perhaps challenges will present themselves in the future that will cause me to rethink my position, but here's what I'm seeing today:

- I know for a FACT that my website will work on mobile devices and browsers of any type, even without javascript available, because I've already tested it that way (and I haven't done any extra work to make it "degrade gracefully").

-all of my javascript is in one place; I don't have to hop back and forth between my script file and my html file trying to trace the various possible user paths.

-I can test my page flow with a framework like fitnesse, since fitnesse can't use javascript.

-Both the html and the javascript are more readable and therefore (in my opinion) more maintainable by someone other than the author.

Basically, if you support on principle the use of CSS for styling, or the use of the MVC pattern in software, you are already an implicit supporter of unobtrusive javascript because it supplies many of the same benefits (separation of concerns, more readable code, modularized concepts, etc).

So here's the motto that I should be living by more often: Don't knock it until you've tried it.

(For more information on unobtrusive JS, try this link)

8 comments:

Anonymous said...

I love how you talk about the benefits of unobtrusive Javascript, and back it up by posting a link to a presentation which consists of mostly text, a couple images, and a couple links but which is presented in *Flash*.

simonwillison.net said...

I'm the author of that presentation, and I'd argue that the way it is presented on that page conforms to the philosophy of unobtrusive scripting. The "view on slideshare" link (which is there even with JS disabled) takes you through to a page which includes the full text of the presentation (extracted from the slides) as well as a link to download the presentation as a PDF.

This means that the underlying content remains accessible even with both Flash /and/ JavaScript disabled.

Sure, it could be a lot better (I'd love it if SlideShare had a non-Flash version as a fallback) but I don't think it undermines the message.

Ethan Vizitei said...

@anonymous

I'm afraid simonwillison.net has a point, that's a page that pretty well conforms to the ideas that both the presentation and my post are advocating.

But even if it didn't, even if the presentation was put up in a way that was only available through a proprietary browser's version of javascript and was inaccessible otherwise, that would in no way invalidate the argument. You must evaluate the points by their own merit; their method of delivery plays no role in their validity.

James Carr said...

Good job Ethan... I'm still trying to promote unobtrusive javascript and "progrssive enhancement" here as well. ;)

One incorrect statement in your post though: "I can test my page flow with a framework like fitnesse, since fitnesse can't use javascript."

I see you're still recovering from the misinformation CFX taught you... Fitnesse isn't a web testing tool (and in my opinion, is the wrong tool for web testing altogether). Although I have used fitnesse to test ajax stuff by plugging Selenium RC into a fixture), I wouldn't suggest it. ;)

Ethan Vizitei said...

@jamescarr

You're right, fitnesse isn't a web testing framework, but it occured to me while writing this post that the biggest problem I had with Fitnesse while at CARFAX (attempting to jerry-rig it into BEING a web testing framework) was HTMLunit's inability to execute javascript.

Currently I use Selenium for this kind of work.

Anonymous said...

simonwillison.net: I had no idea that "slideshare|View" was a way to get to a PDF -- it looks like 2 billion other "link to my web2.0 site!" logos out there (Slideshare itself has 11 of them, plus a JS popdown to show 12 more). And once I get there, the "Download file" leads me to a sign-up page. Nowhere in this entire process do I see anything that suggests I'll get a PDF.

I guess I'm not web2.0-savvy enough to understand what to click and what to register for to bypass the web2.0 presentation layer.

Ethan Vizitei: I wasn't trying to "invalidate the argument". I was pointing out the irony. The argument is (mostly) valid, and you only reinforced it by linking to something which I couldn't view. :-)

simonwillison.net said...

anonymous: I hadn't realised SlideShare requires a login to download the PDF. Just for you, I've add a direct link on the page :)

Lorentz said...

Linux Journal has an article this month titled "Unobtrusive Javascript"
If you can't find it online you can stop by and read the hard copy in my bathroom.