Coach Wei

Subscribe to Coach Wei: eMailAlertsEmail Alerts
Get Coach Wei via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

Real-World AJAX Book Preview: AJAX Alternatives

Real-World AJAX Book Preview: AJAX Alternatives

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 comparative strengths and weaknesses of the different RIA approaches center on the programming model and application execution environment they employ. The programming model impacts development, maintenance effort, availability, cost of developer skills, and the availability of industry and development community support. The execution environment significantly impacts not only application performance, functionality, and reliability, but also the deployment model.

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 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:FormItem label="UserId" required="true">
         <mx:TextInput id="userId" width="150"/>
       <mx:FormItem label="Password" required="true">
         <mx:TextInput id="password" width="150"/>
         <mx:HBox horizontalGap="30">
           <mx:Button label="Logon"/>
           <mx:Button label="Cancel" click="this.deletePopUp()"/>

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

    <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 width="100%">
          <simplelayout axis="x"/>
          <text width="80">Password</text>
          <edittext width="180" password="true" id="password"/>
       <view width="100%">
          <reverselayout axis="x" spacing="10"/>
          <button text="Cancel" onclick="logon.close()"/>
          <button text="Logon" onclick="logon()"/>

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 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()"/>

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"
    <table height="300" width="500" fontName="Verdana" fontSize="8pt">
          <header text="Date"/>
          <header text="Title"/>
          <header text="Category"/>
       <data:iterator xmlns:data="http://nexaweb.com/data" dataSource="newsId"
type="ONE_WAY" name="News" select="rss/channel/item/">
             <cell text="{*('pubDate')}"/>
             <cell text="{*('title')}"/>
             <cell text="{*('category')}"/>

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.

More Stories By Coach Wei

Coach Wei is founder and CEO of Yottaa, a web performance optimization company. He is also founder and Chairman of Nexaweb, an enterprise application modernization software company. Coding, running, magic, robot, big data, speed...are among his favorite list of things (not necessarily in that order. His coding capability is really at PowerPoint level right now). Caffeine, doing something entrepreneurial and getting out of sleeping are three reasons that he gets up in the morning and gets really excited.

More Stories By Rob Gonda

Rob Gonda is an industry visionary and thought leader, speaks on emerging technologies conferences nationwide, and combines unique approaches to technology and marketing strategies. As a head of Creative Technologies at Sapient, Gonda is an interactive technical “guru,” who provides the knowledge and experience required to run high-level, multi-channel interactive campaigns that reach millions of consumers. Gonda has more than 15 years of experience in web development and 360 marketing campaigns for clients such as Coca-Cola, Adobe, Guinness, Toyota, Taco Bell, NBC, and others. His areas of specialty include emerging technologies, marketing strategy, social media, digital out-of-home, mobile, behavioral targeting, and multi-channel synergy. Before joining the strategy and technology leadership teams at Sapient, Gonda was co-founder and chief technical officer at iChameleon, a Hollywood FL-based agency renown for its emerging experiences and creative technology. In addition to his agency work, Gonda the chair for the digital media council at the Advertising Research Foundation, is the former editor-in-chief of the AJAX Developer’s Journal, co-author of “Real-World AJAX: Secrets of the Masters”, a passionate blogger who authors www.takemetoyourleader.com, and contributors to various publications such as Ad Age and Ad Week. He is a frequent figure on the speaker circuit, having presented at conferences from the senate’s CIO emerging technology to SXSW and Omma. Rob’s mission is to develop forward-thinking expertise that will ensure clients are always on par with rapidly changing technologies and maintain its ethos of evolving. You can reach him at rob[at]robgonda[dot]com and read his blog is at http://takemetoyourleader.com

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.