Ajax Runtime Toolkits

IBM Emerging Technologies

What is an AJAX Toolkit/Framework?

An AJAX Toolkit/Runtime is more than just XMLHTTPRequest

Should includes: Network Communication UI Controls Programming Model

OO JavaScript Declarative

Drag and Drop Easily extensible Data Model

AJAX Pros & Cons

Pros Back-channel communication with server (fewer page

refreshes) UI state maintained on the browser (less load on the server) Richer interfaces (Drag & Drop, Animation, Effects, UI

Controls) No additional Plug-in necessary

Cons Some cross-browser issues remain (LCD) JavaScript Performance Lack of tooling History & Back button support difficult Same domain sandbox restrictions

JavaScript Evolved

Early Use (1996-2004) Individual Snippets intermixed with markup Conditional code for different browsers/versions Some "libraries" of utility code, typically function

based and often hard-coded around a web page Low reusability Used XHttpRequest or iframe trick

1st Generation AJAX (2004-2005) Reusable components wrapped as in JavaScript

objects. Object Orientation done by explicit use of prototype

chain. Browser compatibility code hidden in base libraries. Standardize use of XMLHttpRequest Better reusability and extensibility.

Latest Generation AJAX Declarative grammar or simpler Behavior

attachment mechanisms. Better OO practices by using closures and

inheritance. Hides the use of the prototype chain. Introduces Namespaces for better organization of

code. Highest reusability and extensibility.

Rico

Overview Uses unobtrusive JavaScript approach to assign behavior to

markup elements using IDs. Limited control set (Accordion, Live Grid) Animations and Effects (Position, Size, Fade, Rounded

Corners) Drag and Drop support (customizable) IO – XHR abstraction requires response messages to be

wrapped with Rico specific tags. 2 ways: Object - Binds response to a JavaScript object InnerHTML – Response is set as InnerHTML of the Id element.

Rico (continue)

Built on top of prototype.js Foundation set of JavaScript functions and Objects Serves as a compatibility layer between Browsers Defines a way to use JavaScript in a more OO way (new

classes, inheritance, constructors,…). Provides basic abstraction for XMLHTTPRequest. Used by Ruby on Rails for AJAX support.

Rico (continue)

Sample code

<div id="accordion">

<div id="panel1">

<div id="panel1Header">Panel 1 Header</div>

<div id="panel1Content">Panel 1 Content</div>

</div>

<div id="panel2">

<div id="panel2Header">Panel 2 Header</div>

<div id="panel2Content">Panel 2 Content</div>

</div>

<div id="panel2">

<div id="panel2Header">Panel 2 Header</div>

<div id="panel2Content">Panel 2 Content</div>

</div>

</div>

<script>

new Rico.Accordion( 'accordion', {panelHeight:300} );

</script>

Element ID

Rico Behavior

Rico (continue)

www.openrico.org

Uses No known uses.

License and Community Apache 2 License (Partial Copyrights owned by Sabre

Airlines Solutions) Lacks development community (Key developers now at

Yahoo)

Zimbra

Overview Modeled after SWT. Follows the traditional Windowing

Toolkit patterns. ~100% of development done in JavaScript Abstraction for controls (Button, Label, Dialog, …) Basic abstraction for XHR (simple object containing setup

information and callbacks). Drag and Drop support Pub/Sub abstraction on top of DOM Event model.

Zimbra (continue)

Sample code

var tree = new DwtTree(parent, null, null, DwtControl.ABSOLUTE_STYLE);

tree.setBounds(0, 0, Dwt.DEFAULT, "100%");

var ti = new DwtTreeItem(tree);

ti.setText("Accounting");

ti.setImage(ExImg.I_FOLDER);

ti.setData("DEPT", "Accounting");

ti.setToolTipContent("Accounting Department");

var ti2 = new DwtTreeItem(ti, null, "Bob Brown", ExImg.I_ICON);

ti2.setDragSource(ds);

ti2.setData("EMPINFO", {name: "Bob Brown", id: 987261, dept: "Accounting"});

ti2.setToolTipContent("<b>ID: </b>987261");

ti = new DwtTreeItem(tree, null, "Engineering", ExImg.I_FOLDER);

ti.setData("DEPT", "Engineering");

ti.setDropTarget(dt);

ti.setToolTipContent("Engineering Department");

parent control

absolute positionin

g

tree node

Zimbra (continue)

http://www.zimbra.com

Uses Toolkit behind Zimbra Communication Suite

License and Community Zimbra AJAX Public License, just recently donated as a

Incubator in Apache. Lacks development community (Key developers are all at

Zimbra). Apache Incubator will facilitate a community.

Dōjō

Overview 2 main ways of using Dojo’s components

Attach behavior to HTML element (i.e. DIV) – Uses special attribute “dojoType” to bind to a Dojo component. This approach provides UI degradation.

Custom markup (i.e. dojo:FloatingPane) – Markup is parsed and interpreted by Dojo. DOM is modified and JavaScript behaviors assigned.

Dojo’s core is a simple package loading system. Provides a Pattern for augmenting the Dojo library (custom

packages, namespaces, and objects).

Dōjō (continue)

Ever-growing set of controls

XHR support – simple bind() method to set a callback. Interesting MIME type support. For Example, Dojo calls eval() on MIME type of “JavaScript” (built-in JSON support).

Event Binding – several ways: connect() method dojoAttachEvent attribute (for Widgets) Aspect Oriented Programming

Dōjō (continue)

Sample code

<script language="JavaScript" type="text/javascript">

dojo.require("dojo.widget.FloatingPane");

dojo.require("dojo.widget.Tree");

</script>

<dojo:FloatingPane title="Inlook Express“

style="width: 500px; height: 300px; left: 100px; top: 100px;">

<div dojoType="Tree" toggle="fade">

<div dojoType="TreeNode" title="Mail Account">

<div dojoType="TreeNode" title="Inbox"></div>

<div dojoType="TreeNode" title="Sent Mail"></div>

<div dojoType="TreeNode" title="Deleted"></div>

<div dojoType="TreeNode" title="Saved Mail">

<div dojoType="TreeNode" title="Friends">

<div dojoType="TreeNode" title="Bob"></div>

<div dojoType="TreeNode" title="Jack"></div>

</div>

<div dojoType="TreeNode" title="Work"></div>

</div>

</div>

</div>

</dojo:FloatingPane>

loading of JavaScript

declarative instantiatio

n

behavior attachment

custom attributes

Dōjō (continue)

http://www.dojotoolkit.org

Uses Toolkit behind JotSpot

License and Community Dual Licensing

Academic Free License v2.1 BSD License

Existing and active community with CLA in place.

script.aculo.us

Coming soon

Resources

http://www.petefreitag.com/item/514.cfm AJAX Strategy Whitepaper (C. Mitchell, et al) http://openrico.org http://zimbra.com/pdf/Zimbra%20AJAX%20TK%20White

paper.pdf http://www.dojotoolkit.org/