AJAX Application Design: Tips & Tricks. Must know issues.

The AJAX developers need to keep in mind some crucial points when they are developing and designing applications. These facts are applicable from small to large applications. Personally I believe every AJAX developer should know all these facts for developing more robust and reliable applications. Okay, let us see them now.

The Back Button and Bookmarks are going to break down

The back button of the browser is dependent on the history object. Whenever you browse successive pages, these pages are loaded and browser’s history object saves data so that you can go back. But when you are using JavaScript to control the content and behavior of the page, the back button and bookmarks will not work any more.

So, you may develop and set your own JavaScript back button so that the user can navigate to a previous page.

There are ways to solve this problem although pretty complex.

Use Visual Cues

In most cases, AJAX applications work behind the scene. The application may take long time to load or to process lots of data. In such times, it is hard for the user to understand whether the connection with the server is dead or it is still loading and/or working. The user will feel comfortable if you can use a gif image to show that the application working and/or busy. It is common to use a rotating hourglass until data is fully loaded. You can make it appear until the data is loaded and disappear whenever all data are loaded.

document.getElementById(“loading”).style.visibility = “visible”;

document.getElementById(“loading”).style.visibility = “hidden”;

Instead of a rotating hourglass, you can also keep a blue line creeping from left to right slowly.

Let the User Control the Application

It is meaningless if the user types a wrong word and your application immediately stores it in the database. This may annoy the user easily since every user will want to correct it before it is saved in the database. It is a better way to give the user a way so that she herself can store the data when she is ready to do so. Let the user feel comfortable with your application and do not bug her with too much client server interactions.

Also remember to keep a way so that the users can undo errors they have done.

Test Your Application in Different Browsers

Even the most used two browsers Internet Explorer and Firefox do not handle the same coding in the same way. To make your coding cross browser supported, you need to be careful from very beginning.

After you develop a part and test it using the commonly used browsers or by the browser the application will be used is a good practice. The more browsers support your application, the more robust and reliable you application is.

What would you do if your application does not support Safari browser but the Safari users becomes 30% of all users after one year? Will you code the whole application once again?

I think I should mention an interesting information – Internet Explorer and Firefox users are 96% of all internet users. But this ratio may vary at any time as we all know.

Make the User Notice When Data Changes

Your application may automatically change or load data without consulting with the user. These data can be text, image, background color etc and you can place them in <div>, <span> etc tags. But make sure that you have designed in such a way the user has noticed the change. Suppose that you have changed a color of some text inside a <div></div> tags, you can make the color of the text in such a way that it is noticed by the user. Here is a simple example to make the color red:

document.getElementById(“targetDiv”).style.color = “red”;

Or you can change the background color to draw the attention of the user:

document.getElementById(“targetDiv”).style.background-color = “red”;

So, the message is simple. If your application loads data from the server for the user, make sure that it is noticed by user in a easy way.

Sluggish Browser Problem

AJAX application can be huge and also can consume lots of resources such as CPU processing and memory. In such cases, the browser may stop before all data are processed or loaded and browser may even hang. If you can play carefully in such situations, your application is going to be more robust and reliable.

It is a great suggestion for all AJAX developers that do not use AJAX everywhere rather use it when it is necessary. Some developers use AJAX since it is a new technology. You also need avoid this tendency.

Be Careful in Handling Sensitive Data

Suppose that some users of your application do not want your application to save or store their social security number, credit card information, password etc. But your application automatically stores it in the database or somewhere else. This may be dangerous for you. For any problem occurred from storing information without permission may bring legal and/or other actions for you.

Using JavaScript and client-server interaction, you can store the sensitive data in the database easily. But do no do it all the times. So, it is better if you design your application in such a way that the user herself will send the sensitive data to store whenever she thinks appropriate.

A Backup Plan is always a great idea

There is a very little possibility that your users will be online every time they see your information. They can access your pages being offline or your server may go down during the use of your application. In these cases, your application will crash or face problem if your application is fully dependent on persistent (i.e. continued) server processing. You can avoid such situations by creating a backup plan.

How do you handle the situation when JavaScript is turned off? I mean the user can turn off JavaScript and you need to keep a way so that you application still works.

Also please remember to create a backup plan if there is possibility that the browser gets (or may get) slow in procession lots of data.

Search Engine Optimization (SEO)

Google, Yahoo and other search engines tries to visit all your pages and get contents by mapping. What I mean by mapping is the search engine will first come to any of the page suppose the homepage. Now from the homepage, it will visit all the links (i.e. pages) it finds in this page. After going to the new link, it will read and take the contents (text, image, link etc.) of the page. The process will loop until it does not find any new link.

So, the search engine crawlers will not get your page contents if it needs user interaction which is not possible for the crawler. Thus it is always a better practice to keep a way for the search engine crawlers so that they can map all your pages if you want your contents to show up in search engines.

Here a suggestion is to use <meta> tag in the <head></head> section of your page such as this:

<meta name=”description” content=” AJAX Application Design: Tips & Tricks. Must know issues. “>

<meta name=”keywords” content=”AJAX, Design, Tips, Tricks, Tutorials “>

Avoid Browser’s Cache

Browsers store information in the client machine to reduce browsing time and for some other reasons. This kind of storing is termed as caching and all the files stored are called cache. Internet Explorer is very aggressive in caching. If the browser is showing you information from cache, you will miss the updated information which was changed between your last and current visit. To make your application cross-browser supported, you can follow the follow two easy steps and avoid cache problems.

<?php

header(“Cache-Control”, “no-cache”);

header(“Pragma”, “no-cache”);

header(“Expires”, “-1″);

?>

Now you need to place this code in your PHP script. The above code works only in PHP scripts. If you are using ASP or other server-side language, you need to use equivalent code.

Although the above solution will solve unexpected cache problem in most browsers, it may fail in case of Internet Explorer. So, here is the second solution that will force Internet Explorer to reload the page and show the updated information.

If you add a variable in the URL and set a unique value every time, this problem is solved. You can do it this way:

var targetUrl = “script.php?category=perfume” + “&timeStamp=” + new Date().getTime();

I have used the timestamp variable which is actually meaningless or useless and set a value in such a way that it is unique (or will change every time in other words).

You need to use both the ways.

I wish to update this article with more examples in some later time.

You can also get the PDF version of this article from here below:

AJAX Application Design: Tips & Tricks. Must know issues.