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 Alternatives
AJAX is a viable way to develop richer, more interactive Web applications. These kinds of applications are typically referred to as "Rich Internet Applications" (RIAs). RIA is a term that describes the next-generation Web applications that combine the performance and functionality of desktop software with the universal deployment advantages of the Web.

Though it's still evolving rapidly, today's RIA marketplace is already rich in choice, and IT is challenged to match its technology options with business goals. But while there are various approaches and products available for building and deploying RIAs, they nearly all fall into one of two basic categories:

1. Object-Oriented Programming (OOP)-Based Approaches: Java and .NET
2. Scripting-Based Approaches: AJAX and Flash

The Strength and Weakness of RIA Approaches
In general, OOP approaches have the advantage of object-oriented programming and are better suited to enterprise-class applications. Scripting-based approaches have the advantage of scripting, which is better suited to getting simple tasks done quickly but they are not necessarily good for application maintenance.

Table 1.1 summarizes the advantages and disadvantages of the four approaches:

Table 1-1 Advantages and Disadvantages of RIA Aproaches

One Size Does Not Fit All
In typical enterprise environments, there are always different application profiles. Some applications are large scale and business critical, and their performance and reliability are of paramount importance. Such applications are typically written by a large development team. The maintainability of these applications weighs more than the initial development. On the other hand, some applications are small, not critical, and written by one or two developers. The maintainability of these applications isn't crucial. Then there are the many applications that would fall between these two.

It is important to point out that AJAX is not a solution for all applications. In general, large-scale business programs that require team development and long-term maintenance are better served by OOP-based approaches like Java and .NET. Scripting-based approaches are more suited to applications where the tasks are simpler, the development team smaller, and maintainability less of a concern.

Given the diverse application profiles and developer skill sets in any given enterprise environment and the fact that each RIA approach has its own strengths and weaknesses, the inevitable conclusion is that "one size does not fit all." No one RIA approach (Java, AJAX, .NET, or Flash) will exclusively own the enterprise environment. There are some applications that are better served by a scripting-based approach like AJAX, some by Flash, some by .NET, while others are best served by a Java-based RIA solution. These four technologies will co-exist in any significant enterprise environment.

Alternative Products to AJAX
There are quite a few alternative products available today for building rich Internet applications. Each of them fit into one of the approaches mentioned earlier. Some of the solutions come with tooling that can simplify development and maintenance. Table 1.3 lists solutions available today.

Though these are different RIA solutions and they are all based on different underlying technology platforms, the general RIA programming model is actually converging into a common declarative UI development model. It is centered on using an XML-based UI markup language to create a rich user interface.

XML-based UI markup provides a higher level of abstraction than HTML for building rich user interfaces. XML UI frees programmers to focus on the application's core logic and significantly reduces the need for scripting (for more detailed benefit description see the XML Journal, "XML for Client-side Computing," March 10, 2004).

Below we will give examples from scripting-based approaches (Adobe Flex and Laszlo Systems) as well as an OOP-based approach (Nexaweb). All solutions are zero-install and so can be run inside any popular Web browser today without any installation or software download. On the client side, Flex and Laszlo require the Flash engine (Flash 8 and above) while Nexaweb requires a JVM (JDK 1.1 and above).

Flex
Flex is Adobe's product for delivering Rich Internet Applications. Flex is a Flash-based solution. Developers create a Flex application using an XML-based UI markup language called "MXML" (Macromedia Markup Language) and write application logic using ActionScript. The Flex Presentation Server compiles the MXML files into SWF (Flash movie format) and delivers the compiled SWF to the client-side Flash engine, which runs the application.

Listing 1.1 Flex Code

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml" title="Logon">
    <mx:Form>
       <mx:FormItem label="UserId" required="true">
         <mx:TextInput id="userId" width="150"/>
       </mx:FormItem>
       <mx:FormItem label="Password" required="true">
         <mx:TextInput id="password" width="150"/>
       </mx:FormItem>
       <mx:FormItem>
         <mx:HBox horizontalGap="30">
           <mx:Button label="Logon"/>
           <mx:Button label="Cancel" click="this.deletePopUp()"/>
         </mx:HBox>
       </mx:FormItem>
    </mx:Form>
</mx:TitleWindow>

Laszlo
Laszlo is also a Flash-based product that's similar to Flex, developed by Laszlo Systems, and is currently offered as an open source product.

Listing 1.2 Laszlo Code

<canvas>
    <window title="Logon" resizable="true" closeable="true" id="logon" width="300">
       <simplelayout axis="y" spacing="10"/>
       <view width="100%">
          <simplelayout axis="x"/>
          <text width="80">UserId</text>
          <edittext width="180" id="userId"/>
       </view>
       <view width="100%">
          <simplelayout axis="x"/>
          <text width="80">Password</text>
          <edittext width="180" password="true" id="password"/>
       </view>
       <view width="100%">
          <reverselayout axis="x" spacing="10"/>
          <button text="Cancel" onclick="logon.close()"/>
          <button text="Logon" onclick="logon()"/>
       </view>
    </window>
</canvas>

Nexaweb Platform
Nexaweb Platform is a Java-based RIA product. Developers use an XML-based UI markup to create a rich user interface and build client-side business logic by writing client-side JavaBeans (called "Managed Client Objects"), which are standard Java program objects. The Nexaweb client runtime dynamically renders the XML UI markup to present a rich user interface and dynamically downloads client-side Java objects to the client side for execution in a "on-demand" fashion.

Listing 1.3 Nexaweb Code

<xal xmlns="http://www.openxal.org/xal">
    <dialog height="170" title="Logon" width="350" fontName="Verdana" id="logon">
       <panel height="80" width="320">
         <label height="20" text="UserId" width="100"/>
         <textField height="25" width="200" id="userId"/>
         <label height="20" text="Password" width="100"/>
         <passwordField height="25" width="200" id="password"/>
       </panel>
       <panel width="320">
         <flowLayout align="end"/>
           <button height="25" text="Logon" width="100" onClick="mco://logon.submit()"/>
           <button height="25" text="Cancel" width="100" onClick="mco://logon.close()"/>
       </panel>
    </dialog>
</xal>

As shown in the examples above, though Nexaweb uses Java and Laszlo and Flex use Flash, RIA UI development is conceptually identical in the different RIA solutions. The XML UI abstraction significantly lowers the complexity and cost of building rich user interfaces, and AJAX development can certainly learn and benefit from that.

Cross-Technology RIA Solutions
All RIA solutions are fundamentally constrained by their underlying technology: AJAX, Flash, Java, or .NET. If a developer picks Flex to build his RIA, he has to live with the pros as well the cons of Flash. If a developer picks an AJAX toolkit, he has to live with the challenges associated with DHTML and JavaScript. Each of the four technologies has its strengths and weaknesses.

There has been some very interesting development going on in the RIA marketplace recently: cross-technology RIA solutions. Both Laszlo Systems and Nexaweb announced that their products support more than one technology. The same application can be delivered and rendered on different platforms. Laszlo supports both Flash and AJAX (DHTML). Nexaweb supports Java and AJAX. Such a development accommodates not only different developer skill sets, but opens the door to combining the benefits of scripting-based approaches with those of OOP-based approaches, potentially delivering optimal results. In Figure 1.14, the architecture diagram shows how AJAX and Java can co-exist in the same programming model for the same application. It is primarily accomplished by using an XML abstraction layer that can be processed and rendered by either AJAX or Java on the client side.

Listing 1.4 is a sample application written using such an XML abstraction layer. The sample application is an RSS reader that would take an RSS feed from Yahoo and display it in a table.

Listing 1.4 A Simple RSS Feed Application

<xal xmlns="http://www.openxal.org/xal">
<data:documentDataSource xmlns:data="http://nexaweb.com/data" id="newsId"
source="http://newsrss.bbc.co.uk/rss/front_page/rss.xml"/>
    <table height="300" width="500" fontName="Verdana" fontSize="8pt">
       <column>
          <header text="Date"/>
       </column>
       <column>
          <header text="Title"/>
       </column>
       <column>
          <header text="Category"/>
       </column>
       <data:iterator xmlns:data="http://nexaweb.com/data" dataSource="newsId"
type="ONE_WAY" name="News" select="rss/channel/item/">
          <row>
             <cell text="{*('pubDate')}"/>
             <cell text="{*('title')}"/>
             <cell text="{*('category')}"/>
         </row>
       </data:iterator>
    </table>
</nxml>

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.