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.

The Web Page as an Application
AJAX is the right technology for a Web-enabled rich user interface (UI). But as with any technology, unstructured software created using it is a recipe for failure. AJAX is a set of powerful and flexible technologies but its disorderly use can result in spaghetti code. If the code isn't structurally sound, the interface it presents to users is unfriendly and non-intuitive, whereas a structurally sound and cohesive system flows smoothly and delights its user. A cohesive and structurally sound UI is also conducive to iterative refinement by its users, enabling a positive feedback loop. It is cost effective, affordable by a small organization and individuals. And it provides a foundation for easily mixing in works of UI designers and artists.

Unfortunately in the past building a structurally sound UI for a complex business application was hard. Developers stumbled on a UI project only to find out that building a structurally sound UI, where a designer's work can be thrown at will, is tough. It soon became a time-consuming and labor-intensive undertaking. To make matters worse, prototyping one or two scenarios often gave a false estimate of the complexity. The real complexity came when a number of scenarios interacted with each other and the UI started to fall apart from a lack of structure. Building a rich UI was notably harder than a static or semi-dynamic Web UI. The aim of this chapter is to demonstrate how AJAX has solved some of the fundamental issues with building rich user interfaces and simplified it. We will demonstrate that it is relatively easier to build a structurally sound and cohesive UI using AJAX as opposed to other rich client technologies such as Swing and WinForms. An AJAX-based UI is well suited for iterative refinement and provides a clean interface for incorporating UI designers and artists' works.

The original title of this chapter was "The Web Page as Application, Maintain Structure and Cohesion of Complex AJAX Pages." Since the business problems people solve using computers are inherently complex, the solutions tend to be complex in spite of the project team's best attempts to keep them simple. Often software system design and implementation becomes incomprehensible. Focusing our attention back on the user interface aspects of a software system, a sound structure is the key to a comprehensible and flexible UI implementation. If we can identify a set of repeatable patterns in user interface software, then it is possible to build relatively simple software even for complex business problems. If so our chapter heading can be "The Web Page as Application: Maintaining Structure and Cohesion of AJAX Pages for Solving Complex Business Problems." The business problem may be complex but the structure of the software doesn't have to be. So here we'll try to describe a structure for AJAX UIs that solves inherently complex business problems but isn't in itself complex.

Having played with AJAX for about a year and having spent many years building UIs using Swing, WinForms, JSF and JSP technologies, there seems to be a light at the end of the tunnel. HTML DOM, CSS, scripting through JavaScript and an XML pipe to the data and services are enough for a flexible, easy-to-use and structurally sound UI framework.

To summarize:

1. Business problems are inherently complex with ever-changing requirements.
2. A structurally sound and cohesive design leads to an intuitive and delightful UI for solving complex business problems.
3. A structurally sound UI is conducive to refinements and artists and UI designers can contribute.
4. AJAX has the right ingredients for building a structurally sound and cohesive UI.

The rest of this chapter will attempt to build an appreciation of these points through discussion and illustration. The goal is not to prove them conclusively. Instead, it is to make significant enough progress so users can augment them for a particular domain by induction, interpolation, or extrapolation. The resulting output will prove these points more conclusively for the particular domain.

The initial sections of this chapter will discuss concepts abstractly. Later sections go into detail about the concepts through examples. The complete code for the examples given here can be downloaded from www.vertexlogic.com. It is available under the MIT open source license.

Assumptions and Guidelines
A brief look at the assumptions made and the guidelines used in the following discussion:

1. A rich UI using AJAX doesn't mean popping up multiple property sheets, split panes, and docking windows. At the same time it doesn't preclude any of these constructs if required for the scenario.
2. An AJAX UI doesn't mean precluding a page-oriented UI that is successful, easy-to-use and popular in Web applications.
3. A rich UI using AJAX is expected to combine the two styles. How much of one over the other depends on the domain.
4. An AJAX UI should necessarily lead to higher user productivity and satisfaction.
5. We choose to stay within the realm of standard technologies and not introduce entirely new concepts and technologies such as a new tag language.
6. We don't use any open or proprietary framework in our examples. The idea is not to introduce readers to a framework but to discuss concepts that provide insight into how a framework works and can be built. Other chapters will cover the available frameworks.

AJAX UI in a Nutshell
For completeness, the basic workings of an AJAX UI can be described as follows:

1. HTML pages with JavaScript code are served to the browser.
2. Instead of fetching a new page each time, JavaScript code fetches data from the back-end over HTTP/HTTPS or using Web Services.
3. The data is mixed with the HTML document object model (DOM) and the final user views are created in the browser space.
4. User interaction is handled using JavaScript code in the browser space. Based on the type of interaction, JavaScript code fetches new data and HTML templates from the back end or updates the UI state locally.

AJAX UI Architecture
Figure 5.1 shows the architecture of a system that will be used in our discussion. It is generic and something we say will apply to any variation. Even if the architecture is changed, the principles discussed should hold. In the next few sections we'll provide an overview of the components shown in the diagram. These components will be discussed at greater length with example code and illustrations in subsequent sections.

So the architecture can be viewed in two parts:

1. Server side
2. Client side

The server side consists of one or more instances of controller servlets, business services, and data sources. The controller servlet is the AJAX UI's interface to all the other components on the server side. The server-side components behind the controller servlet can include anything from legacy systems to Web Services. These are abstracted through APIs exposed by the controller servlet to the client. In this chapter, we'll focus on the interface exposed by the controller servlet. Any specific discussion of pure server-side component implementation is beyond the scope of this chapter.

The client-side consists of the HTML pages and JavaScript code embedded in the HTML pages or included from separate files. HTML templates and JavaScript files are physically deployed with the server, but they are really a part of the client side. HTML pages and JavaScript code morph into Model, View, and Controller components in the browser space by design intent.

XML over HTTP/HTTPS is used for interfacing between the client and server. It's possible to use Web Services for client/server interaction. But for purposes of the current discussion, we've limited the interface to XML over HTTP/HTTPS. In the example code, we've modularized the client-side implementation of this interface. It can easily be changed to work with Web Services instead of the controller servlet.

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.