This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

AJAX Application Architecture
Given the challenges associated with AJAX, it is particularly important to architect an AJAX application properly. Otherwise the result can be either lackluster performance or a code maintenance nightmare, or both.

Two items significantly impact AJAX application architecture: the choice of an AJAX engine and client-side application logic implementation.

The AJAX Engine
From the point-of-view of software architecture, the big difference between an AJAX application and a classic HTML Web application is the introduction of a client-side engine. This engine, which runs inside the Web browser, acts as an intermediary between the application's UI and the server. User activity leads to calls to the client-side engine instead of a page request to the server. And data transfer takes place between the server and the client-side engine rather than involving the Web browser directly.

The AJAX engine is key to the AJAX application model. Without it, every event generated by user activity has to go back to the server for processing. Figure 1.7 illustrates this, while Figure 1.8 illustrates the more efficient AJAX model.

There are many different ways to implement the client-side AJAX engine. One approach is to write it from scratch based on the application's needs. Another approach is to use an AJAX toolkit. There are many AJAX toolkits today, a lot of them open source. Some are communication libraries, some are rich user interface components and some provide both. Choosing the right toolkit significantly lowers the application development and maintenance challenge.

Application Logic Partition
Regardless of the client-side AJAX engine implemented, how one partitions the application logic directly impacts application performance and maintainability. "Application logic partition" refers to the amount of application logic that runs on the client side versus the amount of logic that runs on the server side. Putting more logic on the client side delivers better application performance. However, client-side logic can easily result in a lot of hard-to-maintain JavaScript code. For example, Google Maps is a relatively simple application with limited functionality, but it still has more than a 100KB of JavaScript logic on the client side (after obfuscation and compression). But putting more logic on the client side can potentially create application maintenance problems that are expensive and hard-to-scale.

What kind of logic should be put on the client side? How much logic and how should the logic be implemented? These are key questions that developers have to weigh carefully in order to build manageable and maintainable applications.

The AJAX development model offers a lot of flexibility in application logic partition as shown in Figure 1.9. On the left side of the figure, most of the application logic as well as data are on the client side. This is a client-centric model that closely resembles your typical desktop application model. On the right side of the figure, all the application logic resides on the server side. This is a server-centric model that is very similar to the classic HTML Web application model except for the "RIA" (Rich Internet Application) AJAX engine on the client side. Obviously, developers can partition their applications anywhere between these two extremes.

What is worth pointing out here is that the server-centric model is fully capable of delivering a rich user experience such as a rich UI and asynchronous partial updates because of the RIA AJAX engine. In this model, the number of round-trips is not necessarily reduced compared to the classic HTML application model, but the amount of data to be transferred is much smaller. The asynchronous nature of the AJAX engine enables a "continuous" user experience. The popular JavaServer Faces (JSF) model is a server-centric model that encourages all the processing to happen on the server side. The benefits of this model include a more enhanced user experience than the classic HTML application, compliments of the client-side AJAX engine as well as good application maintainability. Because all logic stays on the server side, it's much easier to develop and maintain application code on the server side than deal with JavaScript code on the client side.

By comparison, a server-centric model will not deliver the same performance and availability as a client-centric model. In client-centric models, a significant amount of application logic runs on the client side. As a result, most user interactions can be processed locally without incurring a roundtrip to the server. Further, the application can be more "resistant" to sporadic network connectivity drop-off. Application availability is improved because of this reduced network dependency. The drawback to such a client-centric model is the challenge associated with developing, sharing, and maintaining the client-side JavaScript code.

Some AJAX toolkits provide frameworks that facilitate the appropriate partitioning of application logic between the client side and the server side. For example, JSF is a framework that encourages putting all the logic on the server side.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.