Clearleft Ajax Workshop: Javascript, the DOM, Hijax and the downside

Man, it’s taken me over a week to write about this. Slacker extrodinaire. Anyway, I got up very early indeed last Friday morning and made my way across the country to the Victoria Park Plaza Hotel for Clearleft‘s Ajax Workshop. I wasn’t quite sure what to expect, but what I got was very good indeed.

So the Clearleft crew took a bunch of web designers and developers and threw them together in a room. I had a few wierd moments where I looked around and recognised various faces from my travels around Flickr and the blogosphere [1]. I also felt ever so slightly jealous as a variety of Powerbooks were unfurled onto the desks around me.

Jeremy Keith spent the morning taking us through Javascript, DOM Scripting, the basics of Ajax and how it’s done (JSON looked particularly interesting). If you’re scratching your head and asking “WTF is Ajax, man?” Suffice it to say that it lets you refresh only the parts of the page that you want to, rather than fetching a whole new page from the server every time a user clicks a button.

All good stuff, but not the main reason he had gathered us there at all. No, that came after lunch:

Hijax

Hijax is a best practise methodology for building web applications. It basically says:

  • Build your pages in a completely modular fashion.
  • Build it such that it will work for users without Javascript enabled.
  • Add the AJAX functionality in once you’ve got the pages working without it.
  • Only add the AJAX in once you’ve thought very carefully about the usability and accessibility issues involved with them.

It takes it’s name from the fact that you hijack the default actions of a web page and bend them to your will. Clever huh? Jeremy does a much better job of explaining it, so I’ll leave the rest to him. One more comment though: When Google built GMail (one of Ajax’s poster children), they delivered a complete Ajax application first, then months later managed to produce a completely separate plain HTML version. They had to do all of the work twice: If they’d done it the Hijax way, they could have had both versions of GMail at once and in the same application. Makes you think, doesn’t it?

Ajax: The downside

Ajax is a fantastic technology which has far reaching implications across the web. However, it has some major issues: Usability and Accessibility to name but two.

Say the user clicks a button and something updates elsewhere on the page. How do we inform them that something happened? There’s a number of answers to this question: Animations and special effects are just two of them. But what if they have a low-resolution screen, they’re using big fonts, or they’ve simply scrolled too far, leaving the vital animation or effect off-screen? What about screen-reader users – how do you tell them that only part of the screen has updated?

Then there are the problems with bookmarking and the back-button. In a traditional web application, every move you make is added to the browser history. Ajax apps suffer many of the same issues as Flash and Frames-based sites: Because you aren’t refreshing the page every time, you aren’t updating the browser history. Hitting back will likely take you right out of the app and bookmarking simply doesn’t work. Jeremy’s answer was that if the user felt the need to bookmark, maybe you’re changing too much of the with page using Ajax?

There is currently no clear answer to to a lot of these issues, but a lot of good work is going on in that direction. Recent work by the likes of Mike Stenhouse and Robert Nyman is showing us the way. Some people are advocating that we should get screen-reader users to disable Javascript. Others disagree and say that improved software will come in time. I share the latter point of view – besides, what about those in-between cases, like low-res screens, big fonts, mobile users and so on? There’s definitely lots to think about when you’re putting together Ajax apps.

Coffee Break!

On top of all this, I found the time to chat to the likes of Adam (from the DiH mailinglist), Molly, Mike and Paul about IE7, it’s implications and how Microsoft are changing, then later to Jeremy, Bruce and others about haircuts, earrings, Flickr and social networking.

After the workshop, we all trudged upstrairs to the hotel bar and indulged in a couple of beers. At some point my sister, Alice, phoned me and demanded that I go and see her. We met up with Angus and dined in a very good turkish restaurant, before hooking up with various friends of hers for the evening. I think we left Tru Thoughts @ Cargo at about 3:30am. A long day, but a good-un.

Oooh, that got a bit stream-of-consciousness there for a while didn’t it?

[1] Did I just write “blogosphere”? Gaaah… shudder.

10 Responses to “Clearleft Ajax Workshop: Javascript, the DOM, Hijax and the downside”

1. comment_author_url)) { ?> matt matt

You can ‘fudge’ the back button using an iFrame, the way Google Maps does.

I’ve got a fecking mountain of reading to do on the subject, shame my brain doesn;t retain information in a ‘have a conversation about it mannter’ more just bullet points of necessary information… and I don’t care about IE7 ;)

(that last bit’s a lie, it’s more that I have too much else to do than hear about more shit from Microsoft)

Social Networking’s good though, splendid use of the ‘web’ I feel it’s all very ‘we need a portal’ of the late 90’s (I still don’t reckon BIKEmagic will work ;0) )

2. comment_author_url)) { ?> Olly Olly

The iFrame trick is an ugly hack, but it’s exactly what Mike S ended up doing to accomodate IE.

I don’t care about IE7 either, just yet. To be honest I can’t see the point in caring until a nearly finished version is available. The current version is so far from complete it’s almost funny :)

The funny thing about portals is that they never went away – they just got more focussed. Rather than Netscape and Excite covering everything, we now have Bikemagic for bikes, Flickr for photos, Stylegala for web design, etc etc. Not to mention the likes of Yahoo! and Google heading back in the original direction of portals…

3. comment_author_url)) { ?> Derek Featherstone Derek Featherstone

Olly – just a quick comment to clarify, as it seems most people seem to think I meant something different than what I said…

At @media 2005 I said this:

If we are doing things right, we should be able to tell users of older screen reader software to turn JS off for more consistent experience.

Note that I’m talking particularly about older screen reader software that are useless/clueless when it comes to dealing with JS properly. There are certain times where modern day scripting techniques work just fine, and other times where they don’t. Where they don’t, we can’t rely on a JS on/off binary scenario, and that’s where if we’ve done things properly a user of an older screen reader can safely turn it off without loss of functionality, and for a better user experience. Again, if we’ve done things properly.

And, for the record, I have some new techniques I’ve been thinking about that hopefully make all of this a bit more reasonable to achieve.

4. comment_author_url)) { ?> matt matt

“The funny thing about portals is that they never went away”

Ah no no no, I didn’t mean they went away, just that every project seemed to be a portal at the time, now everything seems to want to be some type of “Social” site… which isn’t a bad thing.

I class Flickr as a Social Network site, not a portal.

The Web’s getting quite good again, shame I hate it with a passion ;)

5. comment_author_url)) { ?> Olly Olly

Derek – I can see exactly where you’re coming from and agree with the sentiment. Like Bruce, it’s more the practicalities that I’m worried about.

The most popular screen-readers sit on top on IE/Win. I’ve been making websites for years and still have no idea how to turn off JS in that browser – I know it means searching through endless menus trying to find it and it’s painful every single time.

I’d be very interested to hear about these new techniques though :)

6. comment_author_url)) { ?> Derek Featherstone Derek Featherstone

I can see exactly where you’re coming from and agree with the sentiment. Like Bruce, it’s more the practicalities that I’m worried about.

And its exactly those practicalities that I hope to address! :)

7. comment_author_url)) { ?> Simon Simon

So you didn’t go to Holland then to watch football…

I miss nested tables and 1px spacer gifs :-p

8. comment_author_url)) { ?> Andy Budd Andy Budd

Hey Olly, glad you had a good time at our workshop.

9. comment_author_url)) { ?> matt matt

I’ve finally started reading the Dom Scripting book by Mr Keith, it’s pretty darn good.. so far.

Now I just need to fabricate some time to actually put knowledge in to practise :)

10. comment_author_url)) { ?> matt matt

I have read more of this book now, VERY good, certainly got me thinking about a few things.