Enrich Your Web Applications

By Akash Mehta
2008-02-24


Behaviour

So, we've tweaked the design of your web application a little. How about we add a bit of behaviour through Javascript.

AJAX

If there's one technology from the web 2.0 boom that you should take note of, its AJAX. Chances are you've worked with it a little in the past, or at least have a general idea of what it is. If not, have a quick look through AJAX on Wikipedia before continuing. The advantage of AJAX lies in the fundamental concept - you can make a request to fetch or update specific data. Being able to do just a little at a time is the key. With AJAX, you can simply keep showing the user information and content with very low system resource use.

You can also make small changes - such as creating a new item in your database - without reloading the enitre page. Importantly, however, you can do this all in the background and use vanilla JavaScript to make the change on the frontend immediately, giving the user an impression of instant effect, where they don't have to wait around while your pages load.

I won't go into much detail here, but look into using AJAX for small things to make life easier. For example, on a Digg.com story page, you can post a comment. When you enter your comment and click the submit button, the comment instantly appears in the comment list. In the background, an AJAX request submits the comment to the database. You can also edit your comment inline - click to edit and the comment text turns into a textbox - with AJAX for the update. Through JS and AJAX, three page views are saved, and users wait time is eliminated - a very encouraging user-friendly approach.

Edit-in-place

We briefly covered this under AJAX, but edit in place is a seperate concept altogether that is often coupled with AJAX. The idea is that instead of moving the user between different pages, a single interface is used to manage information, and the user can edit information at the source. Edit-in-place is much faster than the typical click, wait, enter new value, submit, wait approach, especially with AJAX. This encourages users to make changes and contribute information, increasing the rate of user interaction with a site.

For example, in the Digg comment system we just covered, if you click the comment edit link, you aren't taken to a comment edit page. You aren't even taken to the comment form at the bottom of the page. The text of the comment itself is wrapped in an editable text box, and you can literally edit the comment in its place. This is especially useful for small snippets of information.

We won't cover implementation details here, but take a look at these examples: Edit in Place with Javascript and CSS, AJAX edit in place with Prototype and the same with jQuery.

Act-in-place

The parent of edit-in-place is, in a way, act-in-place. Think of it as edit-in-place without any data to edit. This involves an action, typically a simple form submission, taking place without a new page or significant change to the existing page. For example, take the Digg.com login system. The header has a login link:

If you click the login link, a login form fades in appearing right beside it:

This also solves the problem of maintaining state during login - if you redirect a user to a dedicated login page, you have to somehow redirect them back (or risk making them take an action again). While not a terribly complex task, this can create various problems if there was data waiting to be submitted elsewhere on the current page. With AJAX added, you could allow a user to authenticate-in-place (so to speak) and have a login session ready when they take an action on the current page.

Date input helpers

Web developers frequently struggle with users inputting dates, such as dates of birth. Date data can come in many different formats, and users and developers have not yet agreed on one standard format for entering them.

For example, some sites have a single input box and expect input like "1/1/2000". Others are similar but expect "01-01-2000", and others still "2001-01-01". Some have inpux boxes for day, month and year, however with users between the US and UK making different assumptions over the order of day and month, this can also be a problem. Finally, some have dropdown menus for all three values, however this requires either a lot of data transfer (5KB of HTML just for a form!) or non-degrading Javascript.

As you can imagine, this was quite a mess for web developers in years gone by. Thankfully, the invention of a date picker, otherwise known as a date input helper, eased the pain. Have a look at this:

A visual calendar appears either when the input box has focus, or when the user clicks a calendar icon adjacent to the input box. Users have grown accustomed to this, and the general consistency of calendars has allowed web developers to rest in peace, knowing that their users will not have any problems. Next time you need users to input a date, show them a date picker. Plugins are available for jQuery, Prototype/Scriptaculous, MooTools and more.

Tutorial Pages:
» Introduction
» The Rich Internet Application
» Our approach
» Design
» Behaviour
» Conclusion

Related Tutorials: » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables » Navigation Bar and Bulleted Lists