Bruce Lawson’s personal site

review: “DHTML Utopia” – Stuart Langridge

(Last Updated on )

Don’t be put off by the title: the DHTML here bears no resemblance to the stupid web tricks of the late 90s that allowed animated unicorns to follow your mouse pointer, or silly Powerpoint-like transitions between web pages.

This book is the opening salvo in the latest battle in the Web Standards war – the battle for unobtrusive JavaScripting, or Unobtrusive DOMscripting as many call it, in order to rid it of all the negative connotations that “DHTML” and “JavaScript” bring. Combined with the non-standard XMLHttpRequest object, it’s sometimes referred to as “Ajax”.


Terminology aside, though, what are the substantive differences between the old-skool and the "modern" of the title?

Theory sounds cool – how’s the damn book?

In was pleasantly surprised by how quickly the book gets to work. Before even page numbering begins, the introduction has a lucid and compelling argument for using html 4.01 rather than xhtml as the markup language of choice.

Chapter 1 has a brief 6 page overview of the importance of valid code and separating presentation into css, and a short description of the unobtrusive nature of Langridge’s scripts: no script in the mark-up at all; instead, the .js files contain “event listeners”. The reasons why this is desirable are promised later.

Chapter 2 – 4: The basics

Now that document.write in the html is no longer needed, you need to know the “proper” way to add text or elements to a web document. So Langridge gives us a tour of the DOM, showing how to walk the DOM tree and create, remove and add elements to the tree. It’s methodical, and by the time I was beginning to get a bit tired of theory and thinking that you’ll have to prise document.write out of my cold, dead hands, we get an "Expanding form" which allows us to expand a form ad infinitum to sign up as many friends as you want to receive free beer, without ever going back to the server. (You can see such a thing in action in gmail, when you want to attach multiple documents to an email).

I started to warm to the author and his style. 33 pages into the book, and we get a real-world working example to examine (I like my theory liberally garnished with practice). I also feel a kinship with authors who fantasise about mad millionaire philanthropists giving away beer.

By chapter 3, we’ve really got going. Apart from one rather pedantic edict (the event is mouseover, the event handler is onmouseover and we should separate the nomenclature, even though it makes no practical difference), the focus here is on real life browsers. And, as we all know, in web dev books, real-life browsers means grotesque exceptions to our ideal-world rules. Strangely – and oddly satisfyingly to this PC user – the culprit isn’t only the perenially-despised IE/ Win; shiny Safari comes in for a good bit of stick!

The real-world example here is a data table that highlights the whole row and column of any cell that’s being moused-over. Now, in any modern browser except for IE/ Win, the row could be given a hover pseudoclass (IE/ Win only allows :hover on anchors). But as (weirdly) there is no html construct for a column, this effect can only be acheived through DOMscripting. What the script does is to dynamically append a class name to every cell in the row and column at run time- and the pre-defined CSS file determines the stylingof that class.

Herein lies an advantage in Unobtrusive DOMscripting: you could just take this script and plug it into a website without changing any of the html (except to add a link to the script file in the head). But the script is relatively complex for a newbie to coding, and for the techniques to be widely used, I suspect that the billion old-skool cut’n’paste JavaScript sites will need to be replaced with a single, canonical library of modern scripts for people to cut and paste from. For those who find CSS challenging, JavaScript is probablyeven more complex.

Chapters 5 – 7: blurring the division between web UI and application UI

It’s a trusim that the web has set back UI development some years – in fact, back to the old dumb-terminal paradigm of filling in a screen full of data, pressing the button to send it back to the mainframe and waiting for the next page to be sent – or the old one returned with errors noted.

Langridge shows that we can make the experience smarter than this, going beyond the tradional JavaScript client-side validation interactivity by adding animation to allow text to fade in and out over time, styling tooltips to be sexier than the default yellow box and which can gently appear into view rather than the browser default on/ off state are examples that struck me.

When I first read these, I thought they were cheesy gimmicks – the modern equivalent cursor-following unicorn – until I considered more deeply and realised that many of the UI elements that we enjoy in modern desktop apps are precisely these small, cosmetic effects: abrupt transitions, lack of transparency, sharp edges to UI widgets all feel like old operating systems or clunky web pages.

It’s not all touchy-feely; we get auto-complete text entry, degradable calendar pop-ups, flyout menus and lessons in OOP, encapsulating code for re-usability, and avoiding Internet Explorer memory leaks.

Chapters 8- 10: seamlessly working with the Server

So far, so client-side. Where Unobstrusive DOMscripting really gets developers juices flowing is the ability to communicate with the server without obviously refreshing the page. Chapter 8 takes you through a variety of methods. Some, like the hacky iframe method or hideous 204 piggyback method are so gruesome that I breathed a sigh of relief loud enough to wake the cat when I finally turned the page to read "XMLHTTP". This method (which is non-standard and introduced by Microsoft) has ushered in the Next Great Web Thing: asynchronous communication with the server. Langridge walks through using the Sarissa library to make a user registration form that checks whether the user name you choose is taken, and if so, suggest some alternatives without refreshing the page.

There’s a lot of unresolved accessibility problems with the Ajax method (how does a screenreader alert the listener to the fact that something new has appeared on the page? How do they navigate and hear the new stuff in context?) and while it is laudable that Langridge notes these issues exists, I’d hoped he would have suggested some solutions. He doesn’t, but as he’s a member of the Web Standards Project‘s DOMscripting task force I’m guessing it’s being worked on.

The project that really kicks ass in this section is a file manager, like the one in most people’s web site control panels, where you can actually drag and drop the icons, like an operating system, and the server does the work. Langridge carefully goes through all of the steps, all of the pitfalls and all of the code needed to make this happen in any modern browser.

It doesn’t take a lot of imagination to realise just how this could revolutionise the Web experience. Drag and drop products into a shopping cart. Drag the shopping cart to the checkout icon. Moving money around bank accounts in some integrated internet banking application. The possibilities are huge.

Conclusion

The whole technique of unobtrusive DOMscripting needs further research before it’s ready for primetime – particularly from an accessibility point of view, but then as an accessibility bore you’d expect me to say that. I think it’s beyond question that there’s ideas in here that radically enhance the usability of web-based applications by making them more intuitive and more like the desktop drag-and-drop interface we know from our desktops.

This is a good-humoured, thoroughly-researched book that combines theory with practical learn-by-doing examples. To this reviewer, the code appears scalable and sensible. This book is never going to appeal to the quivering aesthete designers – probably because it’s fundamentally about code. But precisely because it proposes a complete separation of code and design, it facilitiates the advancement of the Web.

Review cross-posted to Slashdot where the comments are entertaining.


DHTML Utopia:Modern Web Design Using JavaScript & DOM” by Stuart Langridge, published by Sitepoint. And to the cynical bastard who emailed me: no, Sitepoint don’t give me a kickback, except for the free review copy. I just like books, and I like web standards.

© Bruce Lawson 2005

8 Responses to “ review: “DHTML Utopia” – Stuart Langridge ”

Comment by Stuart Langridge

Glad you liked the book, Bruce. Your hypothesis is correct: the Scripting TF are looking at how JavaScript and screenreaders interact, among other things; the reason I didn’t suggest any solutions is that right at the moment I don’t have any, and I’m rather hoping that other clever people will come up with techniques that will allow the rest of us to maintain screenreader support without too much extra effort.

If you come across the free beer millionaire, let me know.

sil

Comment by Nate Rock

Sweet. I was looking for a book that had information on this exact subject. I work for a company that is investigating AJAX and this is one of the first books I have been able to track down on the subject.

Sadly because we have to support IE 5.1 on Mac OS 9 we have been steering away from using XMLHttpRequest
for a while but I have been given the go ahead to start looking into more of the dynamic DOM after pointing out it’s usefulness and small traffic footprint.

We currently do dynamic loading (droplists, form creation) using hidden iframes but as previously stated, this method is cloodgy at best.

I just put my copy on hold at the local B&N store down the road and will pick it up after work. I look forward to reading it!!!

-rOcK

Comment by Simon Mackie

Thanks for your excellent review, Bruce.

@ Matt – yes, the book is currently on sale. You can buy it from our site (see http://www.sitepoint.com/books/dhtml1/) – if you order directly from us you also get a really cool JavaScript reference poster. We have fast shipping to anywhere in the world. Alternatively, you can buy it from Amazon or your local bookstore may have it in stock – if not, they should be able to order it for you.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.