WP2 - Next-Generation Applications Using Ajax and OpenAjax

From MemberWiki

Jump to: navigation, search

NOTE: This wiki page holds one of the 4 white papers that are under collaborative development by the Marketing Committee. Together these 4 white papers will represent the 2nd generation set of white papers produced by OpenAjax Alliance. When completed, the white papers will be posted as HTML and PDF files on the OpenAjax Web site.



The OpenAjax Alliance has assembled a set of white papers as a guide to help Web developers and IT managers understand and evaluate Ajax, define a successful Ajax strategy, and become familiar the important role OpenAjax plays in the development of the Ajax market.

The white papers are:

Next-Generation Applications Using Ajax and OpenAjax


This article examines the next-generation applications that Ajax and OpenAjax make possible and the productivity improvements that these technologies bring to application developers.

Next-generation applications

Ajax enables the next-generation of Web applications, which provide a richer user experience, enhanced user productivity and lower development costs.

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:

  • Mashups - A mashup is a website 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 enables collaborative applications, such as:

  • WYSIWYG collaborative content creation - Web-based collaborative applications such as wikis can leverage Ajax to 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.
  • Planning - A work group or social group can use an Ajax-powered application to work together to plan and schedule their activities.
  • Information and content sharing - Ajax enables richer sharing of information and experiences, enabling convenient user interfaces for posting content (including multimedia content) in environments that enable tagging, attaching annotations, or marking up document and photos.
  • 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.

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:

  • Use 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 the mobile browsers for Nokia and Apple phone, which are built from the same KHTML/WebKit code base as the Apple Safari desktop 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.
  • Use 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, WICD Mobile.
  • Use 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.

Next-generation application development

The combination of Ajax and OpenAjax promote easier delivery of rich Web experiences that build on open standards while achieving lower development costs.

Open standards

Ajax leverages a combination of open technologies that are native to browsers. Most 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:

  • JavaScript -- its official standards name is ECMAScript
  • HTML -- often delivered via well-formed XHTML
  • CSS -- for marking up and styling information
  • DOM and DOM Events -- for client-side scripting APIs that interact with and control the web page
  • XMLHttpRequest -- for client-server communications without requiring page refreshes (not yet an official standard, though under consideration by the W3C)
  • XML -- a format for transferring data between the server and client (other formats can be used with Ajax, including preformatted HTML, plain text and JSON)
  • SVG -- the standards-compliant vector graphics component for web pages (supported by recent releases of popular browsers; browsers that do not yet support SVG, Ajax libraries use other vector graphics support, such as VML in Internet Explorer)

Ajax builds on open standards that are widely available as native features (i.e., without plugins) in popular browsers. In most cases, Ajax restricts itself to the commonly implemented subset of particular standards (e.g., DOM2 and DOM3, which are not supported completely yet) or sometimes supports commonly implemented extensions (e.g., the innerHTML property within the DOM is implemented by most popular browsers but is not covered by W3C specifications).

Open source

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. Today, many Ajax open source projects bring the power of community-based open development models and no-cost licensing models to developers. Here are some of today's Ajax open source projects:

ActiveMQ (Apache)
Ajax Anywhere (SourceForge)
Ajax for JavaServer Faces | Ajax4JSF (java.net)
AjaxTags (SourceForge)
AJAX Toolkit Framework | ATF (Eclipse)
Google Web Toolkit
jMaki (java.net)

JSP Controls
OpenLink AJAX Toolkit | OAT (SourceForge)
Plex Toolkit
Rich Ajax Platform | RAP (Eclipse)

Simple Web Framework (java.net)
Tacos (SourceForge)
TIBCO General Interface
Wicket (SourceForge)
Xajax (SourceForge)
XAP (Apache)
Yahoo UI Library
Zimbra Collaboration Suite

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).

Compatibility with HTML and existing web development technologies

Ajax can be added incrementally to existing HTML applications for a smooth and natural growth path to an Ajax-powered Web 2.0 and RIA user experience. Most of the technology behind Ajax is already familiar to the large pool of web developers who already know HTML and JavaScript. It is easy for them to learn quickly how to leverage Ajax to deliver next-generation solutions.

Ajax is fully compatible with the HTML application development infrastructure that exists today, including application servers (e.g., J2EE and .NET), server scripting languages (e.g., ASP, JSP and PHP), server application frameworks (e.g., JSF and Struts), web services, and service oriented architecture (SOA).

Option for phased adoption

Organizations have the option of moving from HTML to Ajax in a phased manner.

  1. Add snippets of Ajax code within an HTML application
  2. Use Ajax for the entire UI for one or more pages within a larger, primarily HTML web application
  3. Use Ajax for the entire web application
  4. Use Ajax as the basis for all web application development within your organization

Multiple alternative Ajax programming models

Ajax offers a wide range of architectural options. This diversity allows Ajax developers to choose from many different commercial products and/or open source technologies to find the ones that best match their existing application development infrastructure and technology preferences.

Developer productivity gains

Developer is fully empowered, but many opportunities exist for higher abstraction levels

With Ajax, the learning curve is shortened and investments minimized since application execution relies on Open standards support in web browsers. As a result, existing development and deployment frameworks and techniques still apply. The developer works in an environment he knows well and keeps full visibility and control, with the ability to code and debug all the way down to the DOM calls that affect what the browser displays. But Ajax also provides productivity advantages. Ajax toolkits typically offer declarative markup and APIs at higher abstraction levels and take care of lower-level details automatically.

The result is that Ajax offers the best of both worlds: automation advantages while still leaving the developer fully empowered.

Large ecosystem, off-the-shelf components

With so many Ajax commercial products vendors and open source initiatives, developers are likely to find the off-the-shelf components, toolkits, frameworks, educational materials, and other resources they need to deliver and maintain next-generation Web 2.0 applications built with Ajax.

Declarative UI

Many Ajax technologies provide declarative options (HTML/XML) for defining large parts of an Ajax application. These declarative options often automate large parts of the application development process and enable better leverage of IDEs.

Data management and data binding

Ajax libraries often provide the following features to enable client-side management of data:

  • Data providers (e.g., web services)
  • Validation
  • Bi-directional data binding between client-side data blocks and associated UI controls

IDE integration

Some Ajax libraries deliver various JavaScript-oriented application development convenience features, such as JavaScript packaging and debugging aids. Some Ajax libraries go even further and deliver full application development platforms, sometimes in conjunction with associated software products such as IDEs. IDEs sometimes provide both server-side and client-side debugging.

The role of OpenAjax Alliance

The OpenAjax Alliance plays a key role in defining key Ajax interoperability standards and educating the community on how to be successful with Ajax applications development. The OpenAjax Alliance's various activities are key enablers to fulfilling the Ajax promise of lower-cost development of rich user experiences.

Personal tools