Enhace, Extend, Transform

Web 2.0 Magazine

Subscribe to Web 2.0 Magazine: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get Web 2.0 Magazine: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Web 2.0 Authors: Glenda Sims, Serafima Alex, Xenia von Wedel, Harry Trott, Larry Alton

Related Topics: RIA Developer's Journal, Enterprise Mashups, Web 2.0 Magazine, IBM Journal, SOA & WOA Magazine, OpenAjax Alliance News, Zimbra on Ulitzer

RIA & Ajax: Article

The OpenAjax Technology Vision: Accelerating Customer Success with AJAX

Committed to Open Technologies and Architectural Diversity

OpenAjax ­ Fulfilling AJAX's Promise
One would think that an industry would slow down as it matures, but the Web has proven to be just the opposite. Innovations are happening at breakneck speed. Companies have to move faster than ever to keep up and survive.

AJAX is clearly a case in point. The term "AJAX" was first mentioned publicly in February 2005 by Jesse James Garrett. But roughly 18 months later, we have hundreds of companies delivering AJAX products, dozens of AJAX open source projects, and nearly everyone in the industry planning to adopt AJAX techniques as part of their future Web development strategies.

OpenAjax ­ How It Was Born
In late 2005, thanks largely to the globetrotting of David Boloker, IBM's CTO of Emerging Internet Technologies, a small number of leading companies brainstormed about how to ensure that AJAX fulfills its potential as the industry standard rich application platform based on open technologies. These early discussions came to a climax on Feb. 1, 2006, with the announcement of the "OpenAjax Initiative,"whose 15 original members included BEA, Borland, the Dojo Foundation, Eclipse Foundation, Google, IBM, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, Oracle, Red Hat, Yahoo, Zend and Zimbra.

Between February 1 and May 15, another 15 organizations joined "OpenAjax,"and the (then) 30 members held a two-day kickoff meeting in San Francisco to lay out the blue-print for the initiative moving forward. At the meeting, the group decided to call itself the OpenAjax Alliance, defined its mission, agreed on an interim organizational process, and established its initial activities. Today, the organization has more than 50 members and is growing rapidly.

OpenAjax Alliance ­ Mission and Objectives
The OpenAjax Alliance is an organization of leading vendors, open source projects, and companies using AJAX that are dedicated to the successful adoption of open and interoperable AJAX-based Web technologies. The prime objective is to accelerate customer success with AJAX by promoting a customer's ability to mix and match solutions from AJAX technology providers and by helping to drive the future of the AJAX ecosystem.

The set of technologies under the OpenAjax banner will provide the following benefits to Web developers:

  • Lower development costs and faster delivery of Web 2.0 innovations
  • Vendor choice and interoperability
  • Richer web experience and greater collaboration that can be added incrementally to existing HTML websites or used for creating new applications
Alliance Activities
The OpenAjax Alliance will provide value to the software community through both marketing/communications and technical channels.

Marketing and communications
The OpenAjax Alliance will engage in various educational and communications activities. Its Web site will provide a standard vocabulary for industry terms such as "AJAX" and "OpenAjax," and will include whitepapers and block diagrams on AJAX technologies and associated best practices, with a focus on cross-vendor interoperability. Representatives will speak about OpenAjax at conferences and other industry events.

The OpenAjax Alliance Web site will provide a central point of information about the OpenAjax vision, explaining how to adopt AJAX successfully so that IT developers will feel confident about their technology and vendor choices.

Technical Committee Work
Most of the technical work is accomplished in committees. The following committees were established at the initial kickoff meeting in May:

  • Marketing / Architecture Committee ­ This committee produces the Alliance's architecture vision documents, which help the IT manager and developer understand the AJAX landscape, the various AJAX technology alternatives (e.g., client-side AJAX toolkits vs. server-side AJAX toolkits), and criteria by which a product or technology is OpenAjax-compliant.
  • Interoperability Committee - This group focuses on the ability to mix JavaScript components from different AJAX toolkits within the same Web application. Among the first topics is JavaScript name collision prevention, toolkit loading and event management in the presence of multiple AJAX runtimes used in the same Web application.
  • Declarative Markup Committee - This group focuses on HTML/XML markup interoperability issues. Among the topics so far is mixing markup (HTML and/or XML markup) from different AJAX toolkits within the same Web application.
It is likely that other committees, such as a Mobile Committee, will be formed and begin work soon.

The technical committees will produce documents and (open source) source code. Documents will include roadmaps, whitepapers, and technical specifications. Given the focus on JavaScript issues, it is likely that most of the open source code produced by the Alliance will be JavaScript.

The Alliance is committed to royalty-free, unencumbered technologies in a manner that is friendly toward inclusion within commercial software products.

How OpenAjax Alliance Differs from Established Standards Bodies and Open Source Initiatives
The Alliance will purposely avoid competition with existing open standards and open source initiatives and instead will collaborate with and support any relevant open technology initiative.

The OpenAjax Alliance fills the AJAX interoperability gap in the industry. Other standards organizations such as W3C develop standards focused on what building-block features browsers must support, such as HTML, CSS, DOM, SVG, and JavaScript/ECMAScript. The OpenAjax Alliance addresses a technology layer above these browser formats, where the alliance defines "OpenAjax" specifications and best practices such that multiple AJAX toolkits will coexist and interoperate with the same AJAX-powered application.

To date, more than 50 organizations have joined the OpenAjax Alliance, including:

American Greetings (AG/Interactive)
Bling Software
Dojo Foundation
Eclipse Foundation
edge IPK
eLink Business Innovations
ENOVIA MatrixOne
Fair Isaac
The Front Side
Laszlo Systems
Merced Systems
Mozilla Corporation
OpenLink Software
Openwave Systems
Red Hat
Seagull Software
Software AG
Sun Microsystems
Vertex Logic
Zend Zimbra

Open and Interoperable: The OpenAjax Technology Vision
The Alliance's mission is to accelerate customer success with AJAX by promoting a customer's ability to mix and match solutions from AJAX technology providers and by helping to drive the future of the AJAX ecosystem.

The members of the Alliance have worked together to produce a shared AJAX technology vision that is described in this article. The most fundamental aspects of the technology vision were established during the two-day kickoff meeting for the alliance (May 15-16, 2006). The rest of the vision is the result of the Alliance's committee work since the kickoff meeting.

Getting the Best of Web 2.0 and 1.0
First and foremost, the OpenAjax Alliance's technology vision represents a commitment towards open technologies. The Alliance believes that a large part of industry excitement over AJAX is due to its promise of rich user experiences through open technologies; therefore, open technologies are central to the OpenAjax technology vision.

Another reason for industry excitement with AJAX is that it promises the benefits of Web 2.0 through incremental adoption of new application development techniques while retaining the existing back-end infrastructure that has been set up around HTML. But AJAX frameworks deliver AJAX benefits in many different ways. Some AJAX frameworks do most of the AJAX work on the client, while others do most of the work on the server. Some AJAX frameworks integrate tightly with server application frameworks such as JSF; others move large parts of the application logic to the client. The OpenAjax Alliance embraces this diversity because it promotes innovation and provides customers with a rich set of choices, thereby enabling them to choose the AJAX technology approach that best matches their needs and preferences.

Open Technologies
Open standards
OpenAjax builds on the open technologies that are native to browsers. Most of the base technologies are official Web standards, while many of the rest have been implemented widely in browsers but have not been formally recognized by a standards body. Standards include JavaScript, HTML, CSS, DOM, DOM Events, XMLHttpRequest, XML and SVG.

Open source and commercial products
While open source software is not mandatory for AJAX projects, a large part of AJAX's momentum is due to the open source community's commitment to AJAX. OpenAjax embraces open source alternatives and seeks partnership with both AJAX open source initiatives and commercial products.

Platform independence (OS, server, browser, IDE)
One of the main attractions of AJAX is that it does not lock developers to a particular hardware platform, operating system, application server, web browser or IDE. Developers are free to choose among many technology providers, commercial and open source, to find the products or open source technologies that best match their unique requirements and preferences, while achieving the key benefit of write-once, run-everywhere, across multiple computing devices, operating systems, and web browsers.

Typically, AJAX toolkits deliver cross-platform and cross-browser functionality by providing a platform-neutral and browser-neutral abstraction layer to the developer. This layer is sometimes delivered as a set of client-side JavaScript libraries, and other times in the form of server-side software (e.g., Java).

Open Architectures
Multiple architecture options
AJAX developers have the ability to choose among multiple technical approaches to find the ones whose programming model best fits their needs. The following are some of the ways to categorize AJAX toolkits and frameworks.

Client-side vs. server-side Most AJAX technologies transform a platform-independent definition of the application (usually consisting of a combination of markup and logic) into the appropriate HTML and JavaScript content that is then processed by the browser to deliver a rich user experience. Some AJAX designs perform most of their transformations on the client. Others perform transformations on the server. Client-side AJAX transformations
Figure 1 shows a common approach to client-side AJAX.

The developer provides the green-color components, the AJAX toolkit provides the orange-colored components, and the yellow-colored components represent the final HTML DOM after the AJAX runtime library has performed its client-side transformations.

For client-side AJAX, the application server usually requires no additional AJAX-specific server software. All AJAX transformations come from the client-side AJAX runtime library.

One advantage of this option is the independence from the server side technology. The server code creates and serves the page and responds to the client's asynchronous requests. This way either side can be swapped with another implementation approach.

Server-side transformations
Server-side AJAX sometimes follows the model shown in Figure 2.

For server-side AJAX, an AJAX server component performs most or all of the AJAX transformations into appropriate client-side HTML+JavaScript. Often, the server-side AJAX toolkit downloads its own client-side AJAX library which communicates directly with the toolkit's server-side AJAX component.

The implementation strategies of server-based AJAX frameworks vary. At one side of the spectrum, the server handles all the application events. On the other side of the spectrum, many events are handled on the client. For some frameworks, the development and debugging phase handles all events on the server, but in production mode many events are handled on the client.

The main benefits of this approach are that it preserves back-end server-resident infrastructure, eliminates the need for extensive JavaScript programming, and preserves developer core competencies, development practices, and tools because it allows the use of server-side languages for debugging, editing, and refactoring tools with which developers are already familiar. This can be at the price of dependence on a particular server-side technology. As a general rule, server-side AJAX frameworks expect application code to be written in the server-side language (e.g. Java or RoR). These frameworks typically hide all the JavaScript that runs in the browser inside widgets, including their events. If pre-built capabilities don't suffice, however, new component development exposes the programmer to JavaScript.

Single-DOM vs. Dual-DOM (client-side and server-side)
Some AJAX runtime toolkits use a Single-DOM approach where the toolkit uses the browser's DOM for any original source markup and any HTML+JavaScript that results from the toolkit's AJAX-to-HTML HTML+transformation logic. Figure 3 illustrates the Single-DOM Approach.

The Single-DOM approach is particularly well-suited for situations where the developer is adding islands of AJAX capability within an otherwise non-AJAX DHTML application, as the programming model matches the traditional approach used in DHTML applications.

Dual-DOM (client-side)
Other AJAX runtime toolkits adopt a Dual-DOM approach that separates the data for the AJAX-related markup into an "AJAX DOM" tree that is kept separate from the original "Browser DOM" tree. Figure 4 illustrates the Dual-DOM (client-side) approach:

With this approach, in model view controller (MVC) terms, the AJAX DOM can be thought of as the model, the Browser DOM as the generated view, and the AJAX runtime toolkit as the controller.

It is usually necessary to establish bidirectional event listeners between the AJAX DOM and the Browser DOM in order to maintain synchronization. Sometimes having a separate AJAX DOM enables a more complete set of XML and DOM support, such as full support for XML Namespaces, than is possible in the Browser DOM.

The Dual-DOM approach has two flavors: Client-side Dual-DOM and Server-side Dual-DOM. With Client-side Dual-DOM, the second DOM tree typically consists of a separate tree of JavaScript objects. With Server-side Dual-DOM, the second DOM tree is stored on the server. The following section describes Server-side Dual-DOM.

Dual-DOM (server-side)
Some AJAX technologies combine server-side AJAX transformations with a Dual-DOM approach (see Figure 5).

In this scenario, the primary job of the client AJAX engine is to reflect back to the server any interaction state changes. Most of the UI logic is handled on the server.

Server-side Dual-DOM enables tight application integration with server-side development technologies such as Java Server Faces (JSF).

The OpenAjax Alliance has a commitment to open technologies and architectural diversity.

A key part of the Alliance technical work are its technology initiatives focused on AJAX interoperability. The OpenAjax Hub, one of the Alliance's first interoperability initiatives, prevents collisions and enables linking together of multiple AJAX technologies within the same Web application (see sidebar).

OpenAjax Hub: Enabling AJAX Togetherness
The OpenAjax Hub is a set of standard JavaScript functionality defined by the OpenAjax Alliance that addresses key interoperability issues that arise when multiple AJAX libraries are used within the same web page. The OpenAjax Hub represents a key part of the initial technical work of the OpenAjax Alliance.

The following features have been identified for the first version of the OpenAjax Hub:

1.  AJAX library loading and unloading control - The Hub will have APIs that AJAX libraries must invoke when those libraries are initialized, identifying load and unload callback functions which are invoked at document load and unload time. The Hub manages and coordinates the invocation of these callback functions. The callback functions must be non-destructive outside of the global objects that the library has registered with the Hub (see next item). Markup handling should not occur as part of the load event callback function; instead, markup handling should occur via callback functions that are invoked by the Hub's markup scanner (see below).

2.  Techniques and tools to minimize JavaScript object collision - The AJAX libraries must register with the Hub at initialization time a full and accurate list of all global objects and functions that they define when included in a page. The Hub will include run-time error check logic that can be turned on to verify that AJAX libraries are not colliding due to attempting to manage the same global objects.

3.  Event hub - The event hub allows libraries to publish and subscribe to events in a reliable manner in order to coordinate actions across components from different AJAX libraries.

4.  Markup scanner - The OpenAjax Hub controls markup scanning at the highest level. At initialization time, AJAX libraries identify to the Hub the pattern matching criteria for the markup that the given library controls. When the Hub scans the document, whenever it encounters markup that matches the criteria, it invokes the library's appropriate callback function.

Unlocking Productivity and Flexibility Gains with OpenAjax
AJAX is an industry phenomenon. Hundreds of companies, including industry heavyweights, have announced AJAX products, and dozens of AJAX open source projects have been launched. Most Web developers say they are already using AJAX or plan to use AJAX in upcoming projects in order to achieve next-generation user experiences, improve developer productivity, and lower bandwidth requirements.

However, various challenges remain for AJAX to achieve its potential and deliver its full set of benefits. Some of these challenges are informational - providing the industry with easy access to information on how to be successful with AJAX. Other challenges are technical - today's AJAX products work well, but do not interoperate with other AJAX products. In recognition of these various challenges, leading companies and open source projects have joined forces to create the OpenAjax Alliance, whose mission is to take on these challenges to accelerate industry adoption and success with AJAX.

In this article, I provide an overview of what the OpenAjax Alliance envisions as the applications that AJAX and OpenAjax will enable and the value proposition that we want to see fulfilled as quickly and completely as possible.

More Productive End-Users, Lower BandWidth, and Strong ROI
In most businesses, decision makers are interested mainly in how information technology can increase revenue, reduce costs or make better use of information assets. Factors that are typically considered include:

  1. Time spent waiting for data to be transmitted. Over many repetitions, the time employees spend waiting for pages to load can add up to significant costs.
  2. Time spent completing a particular task. Inefficient user interfaces can translate into long periods of lowered end-user productivity.
  3. Bandwidth consumed for the entire task. If repetitious tasks consume considerable bandwidth, IT costs can grow dramatically.
AJAX technologies help with all of the above. Because AJAX supports dynamic and continuous user experiences, user productivity increases significantly and measurably (e.g., seconds-saved-per-transaction x number-of-transactions-per-year). Because AJAX provides similar advanced user interface features to those in desktop applications (e.g., advanced UI controls, animated effects and adjustable layout controls) ­ thereby providing the visual and interaction tools needed to make the application self-explanatory ­ users spend less time learning and operating the application. AJAX's partial page update feature offers reduced communications overhead versus HTML's traditional approach of click, wait, and then full-page refresh.

Next-Generation Applications (Web 2.0 and RIAs)
Replacement for desktop applications
AJAX offers a desktop-like user experience while retaining the benefits of server-based application deployment, centralized infrastructure administration, easier scalability and immediate availability of application updates to all users. As a result, AJAX is accelerating the movement away from installable, two-tier, client-server applications to multi-tier web applications.

The runtime companion for SOA
As the natural evolution of HTML, AJAX's platform-independent runtime technology is well-suited for next-generation service-oriented architecture (SOA) applications. AJAX offers standards compliance and platform independence on the client, while SOA offers similar benefits on the server.

Mashups, dashboards and other composite applications
AJAX enables mixing and matching of multiple component technologies within the same application. This enables AJAX developers to build composite applications that leverage best-of-breed AJAX technologies from multiple suppliers, achieving many different types of composite applications, such as:

  • Mashups - A mashup is a Web site or Web application that uses content from more than one source to create a completely new service. One concrete example is a custom mapping application that talks to a company's own server to pull down XML address data and then leverages mapping services (e.g., Google or Yahoo) to show a map view in combination in an application-specific custom user interface. Mashups often enable rapid application development by integrating ready-made third-party components.
  • Portals and dashboards - Portals and dashboard applications consist of multiple panes that often can be configured by the user. Often, each pane is a separate application. AJAX technologies can be used to manage the entire composite application and its integrated applications.
  • Service compositions - In an SOA environment, composite business applications assemble multiple application services to create new functionality that supports innovative business processes. In some cases, the services from which the new application is composed have no user interface, so the composite application is completely responsible for the user interface. In other cases the services do have user interfaces, so that the composite application knits together not only back-end behavior components, but user interface components as well.
AJAX also enables collaborative applications, such as:
  • Next-generation chat and instant messaging (IM) - AJAX enables Web-based messaging applications that run in the browser.
  • Web meetings and whiteboarding - AJAX's rich user interface, network programming, and vector graphics features provide the infrastructure for browser-based Web meetings and shared whiteboards.
  • Collaborative content creation - Web-based collaborative applications such as wikis can transition from users having to learn arcane wiki markup languages to a WYSIWYG user experiences, comparable to what users experience today with desktop content creation tools.
  • Trip planning - A social group can use an AJAX-powered application to work together to plan and schedule their activities.
  • Photo sharing - AJAX enables richer sharing of experiences, such as attaching annotations, tagging or marking up photos.
Collaboration capabilities are based on XMLHttpRequest and other network communications technologies.

AJAX-powered wikis
An important new application area is the AJAX-powered wiki, where wikis go beyond text-based collaborative documents into the following scenarios:

  • Rich, lightweight portals ­ AJAX-powered wikis enables fast deployment of Enterprise rich dashboards by allowing a wiki page to contain both text content and AJAX-powered user interface components, such as data grids, forms fillout, mapping, and charting.
  • Personal mashups and dashboards ­ Many leading Internet companies provide the option today for customized home pages. When personalization is paired with AJAX-powered components and wiki back-end services, IT gains easy deployment and end-users gain the ability to manage their view on information.
Cross-device applications (desktop and mobile)
AJAX offers multiple approaches to achieving cross-device applications. This includes:
  • Using AJAX desktop technologies on high-end mobile devices - Today, some mobile devices offer mobile Web browsers that support the same feature set (HTML, JavaScript, etc.) as desktop mobile browsers. Examples include the Opera browser and Nokia's mobile browser, which is built from the same KHTML/WebKit code base as the Apple Safari browser. Web developers can reach this subset of mobile devices using the same AJAX source code as they use for desktop AJAX. Over time, as mobile devices become more powerful, increasingly larger percentages of mobile devices will ship with Web browsers that offer full desktop AJAX support.
  • Using a mobile subset of AJAX - The W3C and the Open Mobile Alliance (OMA) are working together to standardize appropriate mobile subsets of XHTML, SVG, CSS and ECMAScript to take into account the constraints of today's mobile devices, and combine them together to form a mobile standard for rich content using AJAX.
  • Using a server-side, multi-target AJAX toolkit - To reach a large number of mobile devices, some of which ship with more limited features sets, Web developers can take advantage of AJAX toolkits that provide a cross-platform abstraction layer. These toolkits adapt AJAX source into appropriate client-side instructions, such as mobile subsets of HTML+JavaScript, mobile SVG, or J2ME.
AJAX offers great promise, but challenges remain before AJAX can realize its full potential and deliver the benefits of Web 2.0. The OpenAjax Alliance has been established to address those challenges and accelerate industry success with AJAX-powered, next-generation rich applications. Target applications include replacements for desktop applications, SOA applications, composite applications, collaboration tools, next-generation wikis and cross-device applications.

More Stories By Jon Ferraiolo

Jon Ferraiolo is an employee of IBM within its Emerging Internet Technologies group. Jon is devoted exclusively to OpenAjax Alliance, where he manages operations and leads many activities.Before joining IBM in 2006, Jon worked at Adobe for 13 years where he was an architect, engineering manager and product manager.

Jon has been a speaker at every AJAXWorld conference since October 2006, and has spoken at dozens of other industry conferences in the past couple of years. AJAXWorld magazine has published 6 or 7 articles Jon has submitted over the past couple of years.

Comments (31)

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.