AJAXWorld 2007 September OpenAjax Hub 1.0

From MemberWiki

Jump to: navigation, search

This wiki page holds a review draft of 1 of 3 articles that will be submitted for publication with the September print edition of AJAXWorld magazine. Here are links to drafts for the 3 articles:

Contents

Introducing OpenAjax Hub 1.0

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. This article introduces the alliance’s first major technical product, OpenAjax Hub 1.0.

The OpenAjax Hub is a set of standard JavaScript that, when included with an Ajax-powered Web application, promotes the ability for multiple Ajax toolkits to work together on the same page.

The central feature of the OpenAjax Hub is its publish/subscribe event manager (the “pub/sub manager”), which enables loose assembly and integration of Ajax components. With the pub/sub manager, one Ajax component can publish (i.e., broadcast) an event to which other Ajax components can subscribe, thereby allowing these components to communicate with each other through the Hub, which acts as an intermediary message bus.

The umbrella use case for the OpenAjax Hub is the set of scenarios in which an Ajax developer needs to deploy a single application that uses multiple Ajax libraries simultaneously. Here are some specific scenarios:

  • Your favorite Ajax library does not address all requirements - In some cases, an Ajax developer might choose to build the majority of his application using one particular Ajax library, but discovers that the library lacks a particular feature that he needs, and therefore would like to integrate a component from a different Ajax library. In other cases, most of the application might be (non-Ajax) DHTML, but the developer would like to incorporate two components of Ajax technology into the application, where the two components come from different Ajax libraries.
  • Mashups - A developer (or end-user) is likely to find that the different components participating in the mashup are based on different Ajax libraries.
  • Portals - Just as with mashups, it is likely that different Ajax-powered portlets will be based on different Ajax libraries.
  • Preference for a loosely coupled application architecture - The Hub's pub/sub engine provides an industry standard approach for a simple, loosely-coupled Ajax component integration facility within a Web page. Because the Hub's pub/sub engine is independent of particular toolkits, implementing to the Hub can sometimes provide modularization benefits that might allow for modular replacement of some technologies used within a given Web page.

The Hub's publish/subscribe manager

The Hub's pub/sub manager allows one part of a mashup to broadcast an event to which other application components subscribe. Let’s illustrate with an example.

Suppose we have a business intelligence application that uses the following Ajax runtime libraries:

  • UTILS.js, which provides highly useful extensions to the browser's JavaScript environment, such as XMLHttpRequestAPIs
  • CALENDAR.js, which provides a calendar widget
  • CHARTS.js, which provides a charting widget
  • DATAGRID.js, which provides an interactive data grid widget

Let's assume that the application has a single calendar widget which allows the user to pick a particular date or date range. Along with the calendar, there are various data visualization components in the form of chart widgets (such as a variety of bar charts for daily status, weekly status, monthly status, and yearly status) and data grid widgets (such as selectors for regional data versus national data, both with user-selected columns of interest). Whenever a new date or date range is selected in the calendar widget, the various user-specified visualization components -- that is, the charts and/or data grid widgets -- need to be updated.

One way to implement this application is to load the JavaScript for the OpenAjax Hub before loading the other Ajax libraries. For example: 

<html>
  <head>
    ...
     <script type="text/javascript" src="OpenAjax.js"/>
     <script type="text/javascript" src="UTILS.js"/>
     <script type="text/javascript" src="CALENDAR.js"/>
     <script type="text/javascript" src="CHARTS.js"/>
     <script type="text/javascript" src="DATAGRID.js"/>
    ...
  </head>
  ...

(Note: Some Ajax runtimes will include the OpenAjax Hub as part of their standard distribution, in which case, so long as the given Ajax runtime's JavaScript is loaded before other OpenAjax-compatible runtimes are loaded, it might not be necessary to include a separate <script> element for OpenAjax.js.)

To make the application work, the developer registers a callback function that is invoked whenever the user selects a new date in the calendar widget. This callback function then broadcasts the new date event using the OpenAjax Hub's publish() function: 

    <script type="text/javascript">
      ...
      // Somewhere in earlier JavaScript code, you need to invoke 
      // the calendar widget's APIs to register MyCalendarCallback 
      // as the callback function for when a new date is selected
      ...
      function MyCalendarCallback(...) {
        // Publish (i.e., broadcast) the "myapp.newdata" event via the OpenAjax Hub.
        OpenAjax.hub.publish("myapp.newdate", newdate);
      }
      ...
    </script>

Then the developer includes code such that each chart widget and data grid widget subscribes to the new date event and provides a callback function. The various callback functions then update the given visualization widget appropriately: 

    <script type="text/javascript">
      ...
      function SubscribeNewDateCallback(eventname, publisherData, subscriberData) {
        ...
        // Update the given visualization widget
        ...
      }
      // Subscribe to (i.e., listen for) any "myapp.newdata" events via the OpenAjax Hub.
      OpenAjax.hub.subscribe("myapp.newdate", SubscribeNewDateCallback);
      ...
    </script>

InteropFest 1.0 – examples of the Hub in action

The InteropFest 1.0 was an interoperability event spanning the months of July to September 2007 where multiple Ajax products and toolkits used the OpenAjax Hub 1.0 to achieve multi-toolkit integration. You can find several examples of OpenAjax Hub 1.0 in action on the wiki page for the InteropFest (http://www.openajax.org/member/wiki/InteropFest_1.0).

OpenAjax Hub 1.1 and beyond

The members of OpenAjax Alliance have already begun work towards OpenAjax Hub 1.1, which is likely to extend the pub/sub manager outside of a single browser frame and address the following scenarios:

  • Mediating multiple Comet connections - The Communications Hub Task Force at OpenAjax Alliance is addressing technical issues around Comet (Ajax server-push), particularly how to allow Comet to work in mashup scenarios in today's browsers where the mashup might have multiple push components (and thus exceed the browser's 2 connection limit).
  • Cross-frame messaging - Cross-frame messaging is likely to be a requirement in certain mashup scenarios.
  • Secure Mashups - The Security Task Force at OpenAjax Alliance is addressing the secure mashup question. The objective is to allow multiple arbitrary components to be used within a mashup, but in a manner where each component is isolated (sandboxed) from the other components and where the components communicate with each other over a secure message bus.

Down the road, OpenAjax Hub might add APIs for local persistent storage and offline support, a collection of standard messages and payloads, copy/paste and drag/drop support, and features to support data binding across Ajax libraries.

Today, OpenAjax Hub 1.0 provides key integration services that enable multiple Ajax toolkits to co-exist and talk to each other within the same Web page. Going forward, OpenAjax Hub 1.1 will expand into areas critical to Web 2.0 applications such as Comet-style communications, cross-frame messaging and secure mashups.

Links to the specifications and open source

Detailed information about the Hub can be found at the following locations:

Retrieved from "http://www.openajax.org/member/wiki/AJAXWorld_2007_September_OpenAjax_Hub_1.0"
Personal tools