Optimal use of Ajax – use Ajax the smart way

Web 2.0 is the thing that can make your site stand out from the hoard of web sites springing up day by day. But are they efficient enough to make a big impression? You need to analyze on some common principles to make the best impression. These principles make you use it in the smart way! Web 2.0 today dominates mostly in the usage of Ajax today. I had written on how to go about choosing the right framework and the different types of frameworks which are available to you to join the web 2.0 league. Today let’s see how can you can use Web 2.0 features in the smart manner because the smartness will inspire others to work efficiently as well.

Looking at the features of Ajax that hundreds of frameworks today provide, you might get sometimes tempted to use them all. Its pleasing when the user interface is more interactive and more user friendly at the same time attractive. To make these you have to use the framework which provides such eye candy. But before you decide on a particular you must have these things in mind.

  1. Size of the total number of JavaScript pages
  2. Check for frameworks or API for memory leaks
  3. Don’t bloat your code
  4. Use interactivity only where required
  5. Don’t try to use Ajax where bookmarking is heavily used
  6. Test your Ajax code properly

Let’s see each one in detail.

1. Size of the total number of JavaScript pages
This is one of the most important aspects when you go for deciding a framework. The JavaScript in the pages is nothing else than the code which the client has to download, in order to make available the features for the frameworks. If you find the download of a particular framework package very heavy then it would be the same feeling that the end user would be getting if you use the same framework API. This is because for using the eye candy features for the framework the end user’s browser would first download the JavaScript files and then execute the features.

2. Check for frameworks or API for memory leaks
This is the second most important thing you should watch out for. Normally while you program you work with an IDE. The IDE automatically alerts you when you make an infinite loop in your code accidentally. But when you code either in raw JavaScript or use any framework you do not have any IDE because there are not many good IDE’s that handle JavaScript well. So it might happen that you leave out a loop in a infinite manner or you could introduce a recursive functions which never ends. This often results in memory overloading on the client side thus crashing the browser or system. The other reasons for a memory leak might be the framework itself.

If you had seen the DOJO toolkit site earlier which works on DOJO you might have sometimes cursed the loading time for the site. Many a times my browser has crashed the moment I opened the site. This is because frameworks like DOJO implement the Ajax behavior and other features using a lot of code. And hence when the site loads the features use up the system memory for rendering the widgets in the browser.

3. Don’t bloat your code
Using some multiple free script’s is good but using multiple frameworks is a big no no. This is because of the same reason as stated in the earlier example. Bloating of code takes time to get downloaded and you can sometimes leave some part of the code unattended which results in memory leaks. Bloating of code can also occur if you unnecessary import all the necessary JavaScript file required for the entire website in a single page itself.

This is a common phenomenon since we generally put the import tags in the header files of the site. These header files are included in every page for displaying the header. But behind the load of each page the JavaScript files unnecessary get loaded into the browsers memory on the client side which slows down the execution of the site. In order to avoid this it is important that you just import the required JavaScript files in the appropriate pages and thus make the execution of the pages faster.

4. Use interactivity only where required
Never think in the manner that since your site is having the web 2.0 feature each and everything in it should be made via scripts. This is bad thinking. Ajax promotes interactivity hence it is must that you just make the page interactive when there are many components on the page. If you have personalized the Google homepage you might probably know about this very well. In the personal homepage you can see how convenient it is to modify a single component without disturbing the others. So Ajax fits in the picture in such a case.

Now lets take the example of a blog. On the homepage of a blog you see a list of posts and when you click the title of a post, the post page loads up. Now whether you simply load the page in the normal fashion or if Ajax is used in here, the time taken is the same. No fast loading takes place nor nothing on the site looks more appealing if Ajax is used in such situation since the data to be fetched from the server does not change.

The point I am trying to make is that Ajax should be used in those places where it solves some purpose and not in the places where it seems unnecessary. It is just a waste of time to put the efforts in this case.

5. Don’t try to use Ajax where bookmarking is heavily used.
If you are a blog owner then you might understand the importance of trackbacks or permalinks. Those are the blog’s savior since they are universally unique and reachable to any person who uses it whenever required. Ajax has a very undesirable feature which might make a blog less popular i.e Ajax pages cannot be bookmarked. If you use Ajax to load a post as I had mentioned in the example of point number 4. then the post loads up the same page without changing the URL. This is because it is loaded asynchronously.

Now if a person looks at such a loaded page and likes the content he might immediately bookmark without a second thought. But when he requests for the same page again.. voila! he doesn’t see the post. Instead he sees your homepage. Of course you can avoid this by explicitly specifying the trackback URL but you can never gaurantee that the reader of your content might be even knowledgeable of what Ajax is and what trackbacks are used for. Hence your blog traffic might suffer.

6. Test your Ajax code properly
There are not many testing tools available in the market nor very well practiced approaches for testing but you can be sure of making your code work properly by using some utilities which target the JavaScript behavior in the browser. One such utility is the FireBug which is absolutely marvelous when it comes to checking the Ajax code. I have not explored it completely but it helped to cure many bugs when I had worked in Ajax for a web application. It is freely available and comes as a plugin for Firefox. So make sure that you test the Ajax code to the maximum since a bug in the Ajax code can have many side effects.

3 thoughts on “Optimal use of Ajax – use Ajax the smart way

  1. I gather always different opinions about web 2.0 and how to market with the different mindset of the \”new\” Internet. Will social interaction and networking really make the web different? Thanks for your thoughts on this!

  2. Nice work! I’m new to the site … stuff like this really gives the whole project cred; good on you.

    A lot of what you’ve written might be painfully obvious to folk who code 24/7 but for the rest of us, there’s a lot to consider.

    What I really appreciate is how /all/ the frameworks have improved over the years. (Growth comes in spurts; I’m not suggesting they’ve all updated recently.)
    Would I be dead wrong to say that picking any of the top 5 would be a safe bet? I don’t think so.


  3. @Ben –

    I had written this article a long ago. At that time Ajax frameworks were springing up everywhere. That is why I had thought of putting in some safe practices.

    But if we take a look at frameworks now, there are leaders in this space like ExtJS, JQuery, Dojo etc.

    I guess it would be a safe bet to consider these for our projects because all of them have matured over the same period of time. We would have to rethink only if we are considering a framework which is entirely new.

Leave a Reply

Your email address will not be published. Required fields are marked *