Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Back to the Future with AJAX


AJAX is an amalgamation of technologies that give web applications the look-and-feel of desktop applications. At its most simple level, AJAX enables web applications to mimic the speed and immediacy of native clients. Tired of waiting for MapQuest maps to refresh? Images on Google Maps immediately update as users click on various parts of the map. Want an online dictionary that starts looking up definitions before you've finished typing? ObjectGraph Dictionary starts finding and presenting definitions before users have finished spelling the word in question.

Examples such as these demonstrate the first generation of AJAX implementations that dramatically reduce the delay associated with web interactions. However they only scratch the surface of AJAX's potential, namely the creation of web applications that fully replicate a Windows experience in a hosted environment. Imagine enabling users to navigate through a web application with the same degree of familiarity and usability as a desktop application--complete with right-click, treeviews and drop down file menus. In this article, I examine whether AJAX can truly morph browsers into feature-rich, virtual clients and as such usher in a new era in the client/server evolution.

A Brief History

In the beginning large mainframes processed information for dumb terminals. Centralized networks were easy to manage but stifled individual creativity. Then intelligent PCs emerged. Object-oriented development standards and sophisticated user interfaces unleashed the power of end-users but turned MIS departments into management nightmares. Then came the web. Suddenly surfers and mobile workers had access to a network of millions of servers but they could only experience it through early DOS-like web browsers that were plagued by click-and-wait delays.

By empowering web browsers with the potential to deliver the immediacy as well as the look and feel of native clients, AJAX represents another cycle in the client/server evolution--one that merges centralized service delivery with sophisticated user interfaces. Jesse James Garnett of Adaptive Path famously named AJAX as a shorthand way of referring to "Asynchronous JavaScript + XML." While these technologies have been around for awhile, the naming of the effect they have when mixed together triggered a wave of interest in this new way of thinking about web applications.

AJAX applications differ primarily from their predecessors by disguising the sharing of information between browsers and servers. A standard web application communicates with the server synchronously. Users click on a link, sees the all-too-familiar hour glass, and then the page refreshes. AJAX applications communicate with the server asynchronously enabling users to continue working while the server and browser communicate in the background.

AJAX asynchronous communications are achieved through an invisible AJAX engine that is downloaded when users click on AJAX applications. These engines are stored in a user's cache and serve as a bridge between the user's web browser and a server. In this engine sits all the tabs, formatting, presentation commands and callbacks that the user will need to interact with the application independently of the server. The browser submits a request through an XMLHttpRequest to the server and retrieves data that the AJAX engine incorporates back into the user interface without refreshing the whole page. For example an engine can store code to render a graph and by doing so it can process user entries without having to refresh the entire page, communicating asynchronously with the server only when additional data is requested.

AJAX Advantages

By providing a richer user experience, AJAX web applications offer an alternative to desktop applications that increasingly fail to meet today's computing needs. Desktop applications present pain points and added costs to developers and MIS departments that have to support multiple operating systems, and end-users that lack the technical skills to deal with upgrade and operating system complications. Nor do desktop applications address the growing demand from mobile workers and next generation web users for hosted services. AJAX web applications address these issues by enabling:

  • Zero footprint installations.
  • Lower maintenance and development costs by being operating system agnostic.
  • Accessibility from any Internet connected device.
  • Web 2.0 applications that enable the creation of rich multimedia content in a shared environment.
  • Bandwidth savings that are achieved by storing presentation commands, for say a graph or table, in the AJAX engine in the user's cache. The only information exchanged between a browser and server is the data that changes rather than the presentation that stays the same. For sites with large volumes of users, these savings can amount to megabits of bandwidth.
  • Increased scalability by eliminating distribution of applications or downloads of cumbersome plugins or Active X.
  • Greater security since accepted standards are in place for managing Internet solutions and, unlike desktop applications, web applications only save content in a user's cache leaving the PC untouched.

Is AJAX Ready for the Enterprise?

The emergence of AJAX applications that replicate Windows applications, such as Writely ("The Web Word Processor") and Gmail (Google's email program) demonstrate the beginnings of a new trend in AJAX hosted applications. However there are a number of hurdles that lie between developers and AJAXian end-products:

  • Steep learning curve. Developers need to understand a number of error prone coding languages, such as XML, JavaScript and HTML.
  • Loose connection with object-oriented programming--the proven way of programming that has evolved over the last 20 years.
  • No equivalent Visual Studio or Eclipse type of solution for integrated development environments for large scale projects.
  • Lack of available standardized and interoperable widgets that can result in multi-vendor integration conflicts and slower time to market.
  • Painful and expensive testing to remove bugs resulting from JavaScript, DHTML, XMLHttpRequest, and DOM browser implementation variations.
  • Design challenges to create applications that do not present learning curves to end-users or inferior usability than desktop applications.
  • No expedient way of imposing uniform behavior throughout an application.
  • Need to meet demands for localization and accessibility as defined by Section 508 of the Rehabilitation Act.

To address these shortcomings, frameworks for creating AJAX applications have emerged. One such example is Bindows from my company MB Technologies. Bindows is a framework for creating AJAX-enabled Web 2.0 and zero footprint client-side applications that can operate in any service-oriented architecture regardless of server or back-end platform.

Bindows framework.

Bindows comes with an SDK that includes a windowing system, with a wide array of widgets such as menus, forms, grids, sliders, gauges, and more. The Bindows SDK expedites development and user adoption by porting Windows object-oriented standards into AJAX applications.

The HyperionBusiness Performance Management Workspace provides an example of how companies are migrating their product lines to AJAX applications in service oriented architectures. With $703 million in revenues in 2004, Nasdaq listed Hyperion (HYSL) developed the first business performance management system that integrates a modular suite of financial management applications with a comprehensive set of business intelligence features and functionality for reporting and analysis. Hyperion's tools originally included traditional clients for desktop machines. To lower total cost of ownership, Hyperion decided to create a web version that would simplify deployment with a single, modular integrated systems Workspace that would be easy to manage and maintain.

The first generation of Hyperion's web-based application marked a major step forward for the sector but it was based on a lot of HTML, little JavaScript and few styles. Defining yet another industry milestone, Hyperion decided to develop a second generation web application however the company faced a number of challenges. Moving from a static to a dynamic environment requires a lot of in-house technical expertise in the areas of presentation cascading style sheets (CSS), structure (HTML), and behavior (JavaScript.) Hence, transforming a department rich in programmers to one with this range of web application expertise would have been a time-consuming and expensive process that conflicted with Hyperion's ROI commitment to customers and short software cycles.

Hyperion chose the Bindows framework for developing its second-generation web client because Bindows collapsed these three distinct areas of web expertise into one entity and leveraged its existing programming talent. With Bindows, Hyperion's developers only needed to know JavaScript and the Bindows API/web library. For example, to create a context menu without Bindows, Hyperion developers first had to come up with the HTML, then the behavior, then how it looks. With Bindows there's an API that invokes a context menu so the developer only has to pass in parameters and then it automatically gets populated.

Yoram Meriaz is CEO of MB Technologies.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.