Liveblogging a session at Iceweb 2006 (Iceweb2006; Iceweb)
Wee but well-proportioned Shaun Inman took the stage after me at 2006.04.28 15:06.
Responsible asynchronous scripting is synonymous with Ajax, but the difference is it can be used with HTML.
Traditional request model:
- Client requests resource
- Server serves resource
- Repeat
Subsequent requests replace the previously-viewed resource.
In the asynchronous model, the first two steps are the same.
- Client requests resource
- Server serves resource
- Client issues subrequests
- Client updates the existing resource
The original resource is not replaced by subrequests.
It’s been around for a long time, as long as there have been Flash or Java applets. Originally you had to rely on a third-party technology, usually proprietary, like a Java applet, ActiveX control, or Flash movie as a proxy (for the interaction between client and server). In 2000, you could pass data to a server by sending an image and receiving a cookie. But cookies have certain size limitations (4K on a user’s machine before it starts deleting the older data).
Another technique is submitting data to an invisible iframe. A solid approach, but there are small browser bugs, like a click sound effect in IE/Win.
Yet another technique is attaching a new script element to the document, receiving a response in JavaScript (JSON: JavaScript Object Notation).
And now, using the XMLHttpRequest object (“XHR”), receiving an XML, JSON, JavaScript, or XHTML response. Encapsulates all the advantages of the other methods, but modern browsers interpret this in a standard way. Supported by IE 5+/Win, Firefox, Safari 1.2+, Netscape 7.1+, Opera 8+ (including apparently mobile Opera), but not IE5/Mac.
(Shows code samples and explains them.)
Ajax is excellent for small actions that happen in the page, but it’s terrible for navigation or large sections of content. Live search is good; any sort of navigation isn’t. Some sites, like blogs, use XHR to navigate category entries, with no fallback at all. So you can’t even bookmark the category page. Good: Autocomplete and as-you-type data validation (e.g., RemembertheMilk.com, which checks for your username as you type your real name); bad: the one-page E-commerce site (HiDefDVD.com). Good: Content rating and tagging (Flickr); bad: inline login forms.
Leaving a comment on a blog is a good candidate; adding or deleting an item from a shopping cart is, too. Replacing a list with a detail page for the item you just clicked on is a bad idea, because it isn’t bookmarkable. Remoting doesn’t break the back button; developers making bad decisions in using powerful technology break the back button.
(Shows yet more code samples and explains them. They look fabulous on their dark-grey backgrounds with live highlighting, but I can’t read them from here.)
Spinners (“synonymous with Ajax”), hourglasses, and progress bars inform the user that something is about to happen or has happened. Also animation and motion. Zip the old content upward, insert the new content, and expand it. The motion draws your eye to that content. And I guess that goes both ways: If you want to make a change that’s not really important, you can skip that technique. The yellow-fade technique was popularized by 37Signals.
(Scribe did not report audience questions.) Except: How do you notify a screen-reader user if the yellow-fade technique doesn’t work? (Shaun asked me [“Joe is just gonna shake his head at me”] and I said Derek Featherstone is the one who’s going to figure that out.)
Thus does IceWeb 2006 draw to a close (2006.04.28 15:49), and now we have cocktails.