AJAX Frameworks


Published on

Presented @ Ignite Chicago Eent on Dec 06, 2007. Moving Towards RIA - Birds eye view on the available technology, primarily AJAX frameworks and toolkits.

Published in: Technology
1 Comment
  • Presented @ Ignite Chicago Eent on Dec 06, 2007. Moving Towards RIA - Birds eye view on the available technology, primarily AJAX frameworks and toolkits.

    Feel free to comment on various frameworks and classification, for everybody's benefit....<br /><br/>
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • AJAX Frameworks

    1. 1. 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
    2. 2. Personal Background… Today’s Focus – Available UI Tech for RIA teraction formation terface Experience Usability In { } User Business Technology
    3. 3. AJAX Frameworks, Toolkits and Libraries And many more
    4. 4. AJAX Frameworks, Toolkits and Libraries <ul><li>Can we get some grounding on all these frameworks and toolkits? </li></ul><ul><li>Starting with some understanding on AJAX & the Need for Frameworks and Toolkits </li></ul>
    5. 5. AJAX – “ Asynchronous ” JavaScript + XML <ul><li>What it is NOT </li></ul><ul><ul><li>Ajax is not a new technology. </li></ul></ul><ul><li>What it is </li></ul><ul><ul><li>is a Web development technique </li></ul></ul><ul><li>What has enabled AJAX </li></ul><ul><ul><li>The de-facto standard XMLHttpRequest </li></ul></ul><ul><li>Ajax incorporates </li></ul><ul><ul><li>standards-based presentation - XHTML and CSS; </li></ul></ul><ul><ul><li>dynamic display and interaction using the DOM; </li></ul></ul><ul><ul><li>data interchange and manipulation - XML / XSLT; </li></ul></ul><ul><ul><li>asynchronous data retrieval - XMLHttpRequest; </li></ul></ul><ul><ul><li>and JavaScript binding everything together. </li></ul></ul>Ajax Frameworks Basics Client side - Handles JS Requests Server Side - Process requests
    6. 6. Need for AJAX Frameworks & Toolkits <ul><li>Building AJAX based RIA is easy ... </li></ul><ul><ul><li>If you are a JavaScript guru </li></ul></ul><ul><ul><li>Handle entire DOM API </li></ul></ul><ul><ul><li>DHTML, JavaScript, CSS </li></ul></ul><ul><ul><li>Master all the hacks for each technology </li></ul></ul>
    7. 7. Need for AJAX Frameworks & Toolkits <ul><li>Building AJAX based RIA is easy ... </li></ul><ul><li>Building AJAX based RIA is hard ... </li></ul><ul><ul><li>If you come from a mostly static HTML/CSS background </li></ul></ul><ul><ul><li>If your primary use of JavaScript is cut-n-paste of cool in-page behaviors </li></ul></ul><ul><ul><li>Even If you are a programmer with Asp, Jsp, Php, .Net, Java… skills – Handle JS issues ? Nay that’s low Key! </li></ul></ul>
    8. 8. Need for AJAX Frameworks & Toolkits <ul><li>Can we make this simpler </li></ul><ul><ul><li>Build out-of-box, ready to use library of widgets and components </li></ul></ul><ul><ul><li>Hide functionality behind simple building blocks </li></ul></ul><ul><ul><li>Framework for assembling complicated stuff from simple things </li></ul></ul><ul><ul><li>Embed the encapsulations inside development tools that can do some of the grunt work </li></ul></ul><ul><li>Now lets look at the popular frameworks & toolkits with some soft classification! </li></ul>
    9. 9. Browser - Asynchronous Communication <ul><li>Browser has Asynchronous comm built in! </li></ul><ul><li>Support JavaScript, XHTML, XML, XHR object… </li></ul><ul><li>Even before AJAX – we were hacking with iFrame </li></ul><ul><li>Pros: Can build AJAX app w/o any framework! </li></ul><ul><li>Cons: Handle Browser incompatibility, lot of code! </li></ul>Hacking with IFrames Supports JS, XHR…
    10. 10. Communication Libraries <ul><li>Handle browser differences internally </li></ul><ul><li>Some support even non-AJAX browsers </li></ul><ul><li>Offer strong CSS and DOM capabilities </li></ul><ul><ul><ul><ul><ul><li>Prototype </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>DWR </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>JSON-RPC </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>SAJAX </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>AJAX.NET </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Script.aculo.us </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Pros: Light weight libraries - Prototype (94kb) </li></ul></ul></ul><ul><ul><ul><li>Cons: Want more building blocks! </li></ul></ul></ul>Browser Differences Strong CSS / DOM
    11. 11. User Interface Toolkits <ul><li>Ready Out of box UI Components </li></ul><ul><li>Retrieve data in the background & Render it in the Interface </li></ul><ul><ul><li>Dojo </li></ul></ul><ul><ul><li>Rico </li></ul></ul><ul><ul><li>Ext JS </li></ul></ul><ul><ul><li>Yahoo UI </li></ul></ul><ul><ul><li>Zimbra </li></ul></ul><ul><ul><li>eBusiness-Apps </li></ul></ul><ul><li>Pros: Cool UI Controls - trees, Tabs… </li></ul><ul><li>Cons: May not share common libraries </li></ul>Ready UI Components Cool User Experience
    12. 12. AJAX based RIA Framework <ul><li>Ready built, fully integrated libraries </li></ul><ul><li>Share common infrastructure </li></ul><ul><ul><li>Bindows </li></ul></ul><ul><ul><li>Smartclient </li></ul></ul><ul><ul><li>BackBase </li></ul></ul><ul><ul><li>JackBe </li></ul></ul><ul><ul><li>Tibco GI </li></ul></ul><ul><li>Pros: Common approach to data acquisitions & communication </li></ul><ul><li>Visual authoring & custom IDE for rapid development </li></ul><ul><li>Offer server side modals and client side libraries </li></ul><ul><li>Cons: Are these really new app development frameworks? </li></ul>Share Common Infrastructure Fully integrated Libraries
    13. 13. Web Application Framework with AJAX Extensions <ul><li>Web frameworks that are becoming aware of AJAX </li></ul><ul><li>Early supporters, Ruby on Rails, Shale, Echo2, Wicket </li></ul><ul><li>Major programming languages are represented </li></ul><ul><ul><ul><li>C++ (wt-witty) </li></ul></ul></ul><ul><ul><ul><li>Java (GWT, Thinware) </li></ul></ul></ul><ul><ul><ul><li>Net (Asp.Net - Atlas) </li></ul></ul></ul><ul><ul><ul><li>Php (XAJAX) </li></ul></ul></ul><ul><ul><ul><li>Python (Phylon, Django) </li></ul></ul></ul>AJAX Extensions Use JS Library internally <ul><li>Pros: Minimum or no requirement of JavaScript coding </li></ul><ul><li>Cons: Use native extensions, but with limited power and performance </li></ul>
    14. 14. 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.
    15. 15. So What Should You Use? <ul><li>Assuming you are on Java tech… </li></ul><ul><ul><li>Use AJAX enabled JSF components, with JSF enabled IDE like Visual Web Pack </li></ul></ul><ul><ul><li>If not committed to JSF components, Use jMaki instead </li></ul></ul><ul><ul><li>If you already have swing apps that you want to Ajaxify or do not want to deal with JS at all, use GWT </li></ul></ul><ul><ul><li>If you want total control on client side JavaScript coding, use Dojo or YUI library </li></ul></ul><ul><ul><li>If you are already on a particular web application framework, use native AJAX extensions… </li></ul></ul><ul><ul><li>Explore more tools - based on the earlier model ;) </li></ul></ul>
    16. 16. Rich Internet Apps Alternatives <ul><li>Plug-in based </li></ul><ul><ul><li>Flex, SVG </li></ul></ul><ul><li>Browser based </li></ul><ul><ul><li>XUL, XAML, UIML </li></ul></ul><ul><ul><li>Laszlo XML </li></ul></ul><ul><li>Cool stuff gaining ground! </li></ul><ul><ul><li>Adobe Apollo / AIR </li></ul></ul><ul><ul><li>Microsoft Silverlite / WPF/E </li></ul></ul><ul><ul><li>Sun JavaFX </li></ul></ul><ul><ul><li>Google Gears </li></ul></ul>
    17. 17. Lets Move Towards Rich Internet Applications… Fiserv FGS - Tech COE [email_address] www.usability.in