March 27, 2007 - 2 comments

New York Web Standards Meetup Group Presentation

These are the notes to my recent presentation on AJAX and forms to the New York Web Standards Meetup Group. These notes were purposefully left open and vague to facilitate discussion based on attendees’ interests—during the presentation a lot of good questions were asked. That dialogue is not represented here.

Hello, my name is Jeffrey Barke. I’m the Senior Developer and Information Architect for the US office of theMechanism and I plan on talking briefly about how to easily use AJAX to improve the usability of forms and admin/control panel interfaces.

Before I do that, though, I wanted to mention that while AJAX can enhance usability for the “average” web user, it requires the client to have JavaScript enabled and it’s not necessarily accessible. Because of this, theMechanism first programs all forms to work in the traditional manner and then AJAXifies them. This way they degrade nicely.

The foundation to all of our AJAX work is script.aculo.us, a dynamic visual effects library in JavaScript. script.aculo.us is built and dependent on the Prototype JavaScript Framework.

Even if you're haven't developed with these libraries, I'm certain you've seen them in application. Digg, Basecamp, Wetpaint, and many others all use script.aculo.us. WordPress's admin section also utilizes it.

While not web standards, script.aculo.us and Prototype are increasingly becoming part of the standard web development kit and I'd like to see even more people using them. In order to minimize bandwith and i/o, all of the JavaScript functions I write today assume the presence of these libraries and build from them.

Let’s look at some examples of client-side validation. GIANT uses Builder and inserts DOM nodes. We feel this is nicer than the standard JavaScript alert box.

I particularly like the real-time feedback in theMechanism's contact forms.

So, these are some pretty basic examples of AJAX and forms. Here we’re simply doing client-side validation with AJAX and then posting the form in the traditional way. The next example, an admin panel I'm building, posts the form using AJAX and performs client-side sorts.

For the admin panel, I also used Standardista Table Sorting, a JavaScript module developed by Neil Crosby for sorting tables client-side. According to Neil (and I agree): it works, it's unobtrusive, it's fast, and it knows about different data types. What he means is that the codebase has been tested across a large number of web browsers. In the few cases where it doesn't work, it degrades gracefully. It is very fast, though some of the mods I've made to it slow it down.

It requires tables to have a <thead> and <tbody>, which, since this is a standards group, should be there anyway.

The module as is contains three files, one of which deals with events. The version theMechanism uses has been modifed by me to work with Prototype's event handlers. This allowed me to drop one include, saving bandwidth and file i/o.

I also modified it to permit "no sorts," since by default it sorts every column. Finally, I removed some of its default caching, since the admin panel changes the tabular data. This version of Standardista will be going up on our website either this weekend or early next week.

With the admin project, I’ve also begun to move away from XML toward JSON. JSON is a relatively new data interchange format. Maybe some of you have seen the articles that XML is dead? Well, while I think of lot that is marketing talk for JSON, I do find JSON particularly well-suited for the types of tasks that I do with AJAX. It's faster and easier to consume than than XML, particularly in JavaScript.

There are some security issues related to the use of JSON that should be understood prior to use. I recommend using a JSON parser. There’s a production one available at JSON.org, though the beta version of Prototype 1.5.1 contains a built-in JSON parser.

References and More Information

Published by: jeffreybarke in The Programming Mechanism

Comments