AJAX Frameworks

Moving Towards Rich Internet Applications… AJAX Frameworks, Toolkits and Libraries Birds Eye View on the available tools… Ravi Shankar Fiserv FGS - Tech COE [email_address] www.usability.in

Personal Background… Today’s Focus – Available UI Tech for RIA teraction formation terface Experience Usability In { } User Business Technology

AJAX Frameworks, Toolkits and Libraries And many more

AJAX Frameworks, Toolkits and Libraries

Can we get some grounding on all these frameworks and toolkits?

Starting with some understanding on AJAX & the Need for Frameworks and Toolkits

AJAX – “ Asynchronous ” JavaScript + XML

What it is NOT

Ajax is not a new technology.

What it is

is a Web development technique

What has enabled AJAX

The de-facto standard XMLHttpRequest

Ajax incorporates

standards-based presentation - XHTML and CSS;

dynamic display and interaction using the DOM;

data interchange and manipulation - XML / XSLT;

asynchronous data retrieval - XMLHttpRequest;

and JavaScript binding everything together.

Ajax Frameworks Basics Client side - Handles JS Requests Server Side - Process requests

Need for AJAX Frameworks & Toolkits

Building AJAX based RIA is easy ...

If you are a JavaScript guru

Handle entire DOM API

DHTML, JavaScript, CSS

Master all the hacks for each technology

Building AJAX based RIA is easy ...

Building AJAX based RIA is hard ...

If you come from a mostly static HTML/CSS background

If your primary use of JavaScript is cut-n-paste of cool in-page behaviors

Even If you are a programmer with Asp, Jsp, Php, .Net, Java… skills – Handle JS issues ? Nay that’s low Key!

Can we make this simpler

Build out-of-box, ready to use library of widgets and components

Hide functionality behind simple building blocks

Framework for assembling complicated stuff from simple things

Embed the encapsulations inside development tools that can do some of the grunt work

Now lets look at the popular frameworks & toolkits with some soft classification!

Browser - Asynchronous Communication

Browser has Asynchronous comm built in!

Support JavaScript, XHTML, XML, XHR object…

Even before AJAX – we were hacking with iFrame

Pros: Can build AJAX app w/o any framework!

Cons: Handle Browser incompatibility, lot of code!

Hacking with IFrames Supports JS, XHR…

Communication Libraries

Handle browser differences internally

Some support even non-AJAX browsers

Offer strong CSS and DOM capabilities

Prototype

DWR

JSON-RPC

SAJAX

AJAX.NET

Script.aculo.us

Pros: Light weight libraries - Prototype (94kb)

Cons: Want more building blocks!

Browser Differences Strong CSS / DOM

User Interface Toolkits

Ready Out of box UI Components

Retrieve data in the background & Render it in the Interface

Dojo

Rico

Ext JS

Yahoo UI

Zimbra

eBusiness-Apps

Pros: Cool UI Controls - trees, Tabs…

Cons: May not share common libraries

Ready UI Components Cool User Experience

AJAX based RIA Framework

Ready built, fully integrated libraries

Share common infrastructure

Bindows

Smartclient

BackBase

JackBe

Tibco GI

Pros: Common approach to data acquisitions & communication

Visual authoring & custom IDE for rapid development

Offer server side modals and client side libraries

Cons: Are these really new app development frameworks?

Share Common Infrastructure Fully integrated Libraries

Web Application Framework with AJAX Extensions

Web frameworks that are becoming aware of AJAX

Early supporters, Ruby on Rails, Shale, Echo2, Wicket

Major programming languages are represented

C++ (wt-witty)

Java (GWT, Thinware)

Net (Asp.Net - Atlas)

Php (XAJAX)

Python (Phylon, Django)

AJAX Extensions Use JS Library internally

Pros: Minimum or no requirement of JavaScript coding

Cons: Use native extensions, but with limited power and performance

Putting it all Together XMLHTTP, JSON, (Even iframe) DOJO, RICO, ZImbra, Yahoo UI Ext JS, MooTools, eBusiness-Apps, Bindows, Smart client, JackBe, Tibco GI, Backbase Shale, Echo2, Ruby on Rails, GWT, ASP.Net, ADF (JSF) DWR, JSON-RPC, Prototype, SAJAX, AJAX.Net, Script.aculo.us *Not Authoritative - Personal classification of the 100s of AJAX tools - for the mental model, *Each framework has different focus & purpose and are constantly evolving, expanding into other dimensions.

So What Should You Use?