1. Ajax Runtime Toolkits IBM Emerging Technologies

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

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

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

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

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

7. Rico (continue) Sample code Panel 1 Header Panel 1 Content Panel 2 Header Panel 2 Content Panel 2 Header Panel 2 Content new Rico.Accordion( 'accordion', {panelHeight:300} ); Element ID Rico Behavior

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

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

10. 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(" ID: 987261"); ti = new DwtTreeItem(tree, null, "Engineering", ExImg.I_FOLDER); ti.setData("DEPT", "Engineering"); ti.setDropTarget(dt); ti.setToolTipContent("Engineering Department"); parent control absolute positioning tree node

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

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

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

14. Dōjō (continue) Sample code dojo.require("dojo.widget.FloatingPane"); dojo.require("dojo.widget.Tree"); <dojo:FloatingPane title="Inlook Express“ style="width: 500px; height: 300px; left: 100px; top: 100px;"> loading of JavaScript declarative instantiation behavior attachment custom attributes

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

16. script.aculo.us Coming soon

17. 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%20Whitepaper. pdf http://zimbra.com/pdf/Zimbra%20AJAX%20TK%20Whitepaper. pdf http://www.dojotoolkit.org/