AJAX: Dawn of a new developer

The latest tools and technologies for AJAX developers

Asynchronous JavaScript with XML, or AJAX, is the crown jewel in the current Web evolution that has been dubbed Web 2.0. Thanks to the technologies that make up the AJAX acronym, the interactivity of Web applications, such as Flickr, Backpack, and Google, has jumped by leaps and bounds over the past year. The term was originally coined by James Jesses Garrett of Adaptive Path to describe the shift in development from Webpage-based Web applications to data-based applications. In data-centric applications, the data requested by a user, such as a list of emails or contacts, can be retrieved from the server behind the scenes independently of the actual Webpage and can be dynamically inserted into the Webpage, rendering the once slow and painful Web application experience as one more similar to that of desktop applications.

Although most developers have dabbled with XMLHttp in the past or used Iframes to load data behind the scenes, only now are we seeing conventional developers and companies adopting these techniques. As with any new programming language or model comes some growing pains as developers learn new skills and how to best leverage new technologies. This article examines the tools and technologies developers need to get up to speed with AJAX.

AJAX patterns

Many of the important techniques and AJAX development patterns can be cannibalized from existing knowledge. For example, in applications that send many requests to a server, mechanisms must track the request order, precedence, timeouts, error handling, and callbacks, much of which has already been considered in the realm of Web services and, more recently, service-oriented architectures. AJAX developers have a wealth of systems architecture knowledge at their finger tips. At the same time, a lot of room is available for innovation as the technology matures, particularly in the field of user interface usability.

Many factors differentiate AJAX development from traditional client-server programming. These differences introduce many new programming issues, the most notable of which is usability. Due to the dependence of AJAX on JavaScript and XML in the browser, cross-browser compatibility and adherence to standards is also becoming increasingly important as is JavaScript's runtime performance. Many of these issues seem unique to AJAX due to the menagerie of Web browsers, servers, and technologies that must be understood to best leverage the technique.

As a result of such varied technologies and the highly coupled client and server environments, AJAX demands a new type of developer. AJAX developers must understand the traditional Model-View-Controller (MVC) architecture, where strict boundaries exist between application layers. At the same time, these developers must continue to think outside the client-server box and use AJAX techniques to reshape MVC boundaries to their will. Most importantly, AJAX developers must stop thinking about Web applications as collections of pages and rather as a single page. The once obvious sharp and marked distinction between user interface designers and server architects has been blurred by AJAX; developers with new and varied skill sets are required.

Keeping the audience in mind

One of the biggest challenges tackled by AJAX is the user experience. In the process of making more responsive and innovative applications, the rules that define Web applications are being rewritten; for that reason, developers must be mindful of their audience. To date, users are finally coming to grips with how to work with Web applications. A typical user, for example, expects every button click to result in a several-second delay and screen refresh, but AJAX visionaries are breaking this longstanding (in Internet terms) tradition. Thus, users must be retrained as to the new results of their button clicks.

Usability is one area where AJAX is truly blazing an exciting path and has already spawned several novel techniques. There are bound to be many more. The most notable technique is the so-called "yellow fade," pioneered by 37signals, whereby data updated in the user interface turns yellow before quickly fading back to the default color to notify users when new information has been inserted into the Web application. AJAX developers have the power to release users from the burden that was Web applications; by carefully leveraging the rich interfaces that AJAX affords, soon desktop developers may be looking to AJAX for direction.

Tools and technologies

With AJAX being thrust into the limelight so quickly, I imagine that developers' caffeine intake has increased drastically over the past few months as they try to catch up with this progressing technology. As with any new technology, the rise of AJAX also necessitates the birth of a new ecosystem of development tools, programming languages, and related technologies.

JavaScript

As the name suggests, the most important, and marginalized, aspect of AJAX is the ubiquitous JavaScript (or ECMA script) programming language. JavaScript is the glue that holds the various parts of an AJAX application together on both the client and server. For the most part, JavaScript has traditionally been viewed by server-side developers as an irritation not bred for enterprise applications and should be avoided like the plague. This notion has resulted from previous experiences with writing JavaScript code: a tedious and error-prone endeavor. Similarly, it is also considered poor form for application logic to spread across both the server and client, thereby complicating bug discovery and code reuse. JavaScript is primarily used in AJAX applications as a simple conduit to move data from the user interface to the server and back. The XMLHttpRequest object is responsible for data transport over HTTP, while, once the data is on the client, it is inserted in the Webpage using the Document Object Model (DOM).

XMLHttpRequest

The XMLHttpRequest object is implemented in most popular Web browsers and presents a simple interface that allows data to be transferred from the client to the server and vice versa, while the user continues to interact with the Webpage. The data sent using XMLHttpRequest can be in any format—as long as the server is expecting it—though, as the name suggests, it was created with XML in mind.

Programmers should also be familiar with many other XML-related technologies. To access data in an XML document XPath, a good understanding of the XML DOM is indispensable. Similarly, Extensible Stylesheet Language Transformations (XSLT) is generally the easiest and fastest way to produce HTML or XML output from XML data. Many developers are already familiar with both XPath and XSLT, so XML makes sense as the data interchange format of choice for AJAX. XSLT can also be used on both the client and server, which reduces the amount of application logic written in JavaScript.

Although AJAX was originally conceived with XML in mind, another popular data format is JavaScript Object Notation (JSON). It is based on a subset of the JavaScript language such that it is easily readable and can be interpreted by the JavaScript interpreter to instantiate objects.

Cascading Style Sheets

To get the right look for your AJAX application, Cascading Style Sheets (CSS)—a World Wide Web Consortium (W3C) standard—is a crucial weapon in the AJAX developer's arsenal. CSS provides the mechanism for separating the style and design of your application from the content itself. Although CSS plays a prominent and important role in AJAX applications, it also tends to be one of the bigger stumbling blocks in building cross-browser compatible applications since there are widely varying levels of support from different browser vendors.

The server side

Meanwhile, on the server side, unlike on the client, AJAX applications primarily use well-known mechanisms in established languages such as Java, .Net, and PHP; the AJAX phenomenon has not radically changed this area. Having said that, interest has rapidly increased for the Ruby on Rails framework. At a little more then one year old, Ruby on Rails has attracted a large developer base due to its concise yet powerful approach to building not only Web applications, but also AJAX applications. Though many rapid application development tools do exist, Ruby on Rails seems to have garnered unprecedented attention due to the ease with which one can build AJAXed applications.

Development tools

To actually build an AJAX application, you need little more than a text editor. Since JavaScript is not compiled, it can be written easily and run immediately in a Web browser; however, many tools provide useful additions such as syntax highlighting and IntelliSense, which are standard for most IDEs.

Several IDEs provide varying degrees of support for JavaScript. IntelliJ IDEA from JetBrains is one of the better IDEs for JavaScript development, while many developers (despite any open source political leanings) also like the features of Microsoft's Visual Studio product—which promises to have improved AJAX support in the latest version. Two free JavaScript editor plug-ins are available for the Eclipse framework as well as the commercial Komodo IDE from ActiveState.

Another large problem with programming in JavaScript and AJAX is debugging difficulties. Different Web browsers provide different and often cryptic runtime error information, and JavaScript pitfalls, like dual variable assignment (often due to the lack of data types), make debugging even more difficult. In AJAX development, debugging is further complicated by the complexity in identifying whether the client or the server is spawning errors. In the old days, the method of JavaScript debugging involved removing all your code and adding it back line by line until the error appeared. Now, more and more people turn to the Microsoft Script Debugger for Internet Explorer and Venkman for Mozilla-based browsers.

Browser compatibility

The real complexity in JavaScript programming results from the different Web browsers' support for varied technologies and standards. Building an application that runs on different browsers (IE and Mozilla's Firefox) is a difficult task to say the least. To that end, several AJAX JavaScript frameworks (commercial and open source) either generate JavaScript code based on server-side logic or tag libraries, or provide a client-side JavaScript library to facilitate cross-browser AJAX development. Some of the more popular frameworks include AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us.

Frameworks are excellent for giving developers freedom in their applications so they need not worry about cross-browser issues and instead get down to work. While these frameworks enable developers to build applications from the ground up, a slightly different tact is evolving in the AJAX component market where vendors have developed packaged component solutions for more precise user interface problems. There are, for example, several vendors of common user interface components, such as the combo box and the data grid (like Microsoft Excel), which can be used in an application to create a rich experience for viewing and editing data in a spreadsheet-like format. These components encapsulate everything needed to present not only the component's user interface, but also any communication with the server for loading or saving data. Components are usually implemented using a familiar tag-based format such as ASP.Net or JavaServer Faces controls.

Looking ahead

As the latest browser war between Firefox and Internet Explorer heats up, AJAX developers need to be as agile and responsive as ever. There may be convergence on some issues such as CSS or XML, yet each browser camp has a different attitude towards adoption of the latest standards: Mozilla embraces the Scaling Vector Graphics (SVG) and ECMAScript for XML (E4X) standards as well as XML User Interface Language (XUL) in the latest beta version of Firefox. Microsoft stands by their Extensible Application Markup Language (XAML) technology. All of these technologies represent a marked change in direction from the current AJAX mainstays of JavaScript and XML.

As a result, AJAX developers must keep abreast of the latest technologies and take advantage of the most productive toolsets now more than ever. Successful AJAX developers also need to be mindful of their audience and avoid viewing every problem as a nail for their AJAX hammer. Instead, AJAX developers need to continue to innovate, creating new and unique patterns that further enhance Web application usability.

Dave Johnson is cofounder and XML evangelist at eBusiness Applications, a software consulting company based in Vancouver, Canada. Johnson has been working with all things XML (XSD, XSLT, WS-*, ebXML) for more than seven years.
1 2 Page 1
Page 1 of 2