Interoperability/RegisterResource

From MemberWiki

Contents 1 Introduction 2 Use Cases 3 Final notes & thoughts 4 Acknowledgments 5 References

Introduction

Given the rise of Ajax and web applications, IBM is leading a great initiative called OpenAjax to standardize methods and best-practices among AJAX based technologies.

Among the challenges faced is making sure AJAX technologies can interoperate and communicate effectively. Collaborative work is underway from members of alliance who delivered a first release to address the communication problem through the use of the OpenAjax Hub (http://www.openajax.org/OpenAjax%20Hub.html). Additional work has begun on the OpenAjax registry to provide an “industry-wide Ajax toolkit and JavaScript global object registration authority that helps prevent JavaScript object collision within complex Ajax applications”.

Currently missing from the equation is a way to mix components from one AJAX toolkit to the other. The following proposal (RFC) is to demonstrate how we can achieve that goal using a very simple interface that may be implemented by AJAX toolkits.

The proposed interface is available here: http://www.openmv.com/OpenAjax/interface.js

A proof-of-concept has been made available here including all modified source files: http://www.openmv.com/OpenAjax/tests/all-compressed.html

Use Cases

OpenAjax.provide

       OpenAjax.provide(‘acme.DialogTree’);
       OpenAjax.provide(‘dijit.Dialog’);

OpenAjax.require

   1.	 OpenAjax.require(‘dijit.Dialog’);
        OpenAjax.require(‘YAHOO.widget.tree’);

   2.	 OpenAjax.require(‘dijit.Dialog’, ‘YAHOO.widget.tree’);

   3.
       example.js
       //This file provides ‘acme.DialogTree’ but requires two other resources.
       OpenAjax.provide(‘acme.DialogTree’);
       OpenAjax.require(‘dijit.Dialog’, ‘YAHOO.widget.tree’);

OpenAjax.registerResource

Load resource locally

       OpenAjax.registerResource ({‘acme.DialogTree’: {uri: ‘file://acme/widgets/dialogtree.js’}});
       OpenAjax.registerResource ({‘acme.DialogTree.css’: {uri: ‘file://acme/widgets/dialogtree/custom.css’, type: ‘css’}});

Load resource remotely

       OpenAjax.registerResource({‘acme.DialogTree’: {uri: ‘http://cdn.acme.com/widgets/dialogtree.js’}});
       OpenAjax.registerResource ({‘acme.theme.blue’: {uri: ‘http://cdn.acme.com/themes/blue?v6.0’, type: ‘css’}});

Load dijit and YUI from CDN

      OpenAjax.registerResource({‘dijit.Dialog’: {uri: ‘http://o.aolcdn.com/dojo/0.9.0beta/dijit/ Dialog.js’},
      ‘YAHOO.widget.tree’’: {uri: ‘http://cnd.yahoo.com/somewhere/tree.js’}, true);

Or

      OpenAjax.registerResource ({‘dijit.*’: {uri: ‘http://o.aolcdn.com/dojo/0.9.0beta/dijit’},
      ‘YAHOO.*’’: {uri: ‘http://cnd.yahoo.com/somewhere/*’}, true);

The first example tells the resource registry it should load dijit Dialog and a yahoo tree remotely from a CDN. Similarly, the second example forces all dijit.* and YAHOO.* resources to be loaded from a remote location.

Notice that the second argument is set to true (overwrite) which means we want to override any values already existing in the registry.

      example.js
      //This file provides ‘acme.DialogTree’ but requires YAHOO from CDN and dijit.Dialog from default location.
      OpenAjax.provide(‘acme.DialogTree’);
      OpenAjax.registerResource(‘YAHOO.widget.tree’’: {uri: ‘http://cnd.yahoo.com/somewhere/tree.js’}, true);
      OpenAjax.require(‘dijit.Dialog’, ‘YAHOO.widget.tree’);

Final notes & thoughts

I am using dojo as a starting point since in my opinion it has done a very good job in planning for interoperability and has a simple, flexible concept for resource loading. It is worth noting that Tibco also has a very advanced dynamic loader and uses a require mechanism (jsx3.require). The Tibco GI further allows loading XML and CSS dynamically. Microsoft AjaxControlToolkit uses a similar approach: AjaxControlToolkit.AccordionBehavior.registerClass('AjaxControlToolkit.AccordionBehavior', AjaxControlToolkit.BehaviorBase);

Although I use remote loading examples in the use cases, it has not been implemented primarily for security concerns. In an ideal world, we would have a faster, more secure transport to load and evaluate cross-domain scripts. For example if we had a “bst” protocol (better script transport), we could do something like this:

      OpenAjax.registerResource ({‘dijit.*’: {uri: ‘bst://o.aolcdn.com/dojo/0.9.0beta/dijit’},
      ‘YAHOO.*’’: {uri: ‘bst://cnd.yahoo.com/somewhere/*’}, true);

Further enhancements to this proposal should support versioning and loading resource dependencies from an XML file.

Acknowledgments

Big thanks to dojo and Tibco for open-source work they have contributed in this area and to the OpenAjax initiative.

References