® Emerging Internet Technologies AJAX The white Tornado ? Tony Fricko anton_fricko@at.ibm.com © Copyright 2006, IBM Corporation Emerging Internet Technologies Agenda Intro to Ajax technology What is it: technology components, architecture What is available: frameworks, toolkits ATF - Ajax Toolkit Framework OpenAjax Alliance Objectives and deliverables Demo Getting started & enterprise considerations Framework / tooling selection – experience and opinions Accessibility and other gotchas © Copyright 2006, IBM Corporation Emerging Internet Technologies The white tornado By Heidi Kriz | Also by this reporter 14:30 PM Oct, 20, 1998 The king of toothpaste, soap, and household cleaners has backed away from its demand that a small, noncommercial Web site change its domain name. Benjamin Kite, co-founder of Ajax.org, is convinced that an Internet campaign -- which threatened a boycott of Colgate-Palmolive products -- brought the consumer products giant to its knees. The company said that it backed down for other reasons. © Copyright 2006, IBM Corporation ® Emerging Internet Technologies AJAX Asynchronous JavaScript and XML © Copyright 2006, IBM Corporation Emerging Internet Technologies Ajax - Growing Market Interests Web 2.0 Technologies & Experiences Innovation in Ajax has been ongoing for the past 2-3 years Hitting a new inflection point toward broad marketplace Ajax is high up on the lists by businesses Ajax community in early formation Why? Creating richer user experiences leads to attracting new customers & increasing revenues Extending SOA to the client - very strong point with enterprise value point Built on Open standards and/or technology Can be supported by heterogeneous browsers Language independent & middleware agnostic Leverage existing investment: Web look and feel, security, and zero administration deployment model © Copyright 2006, IBM Corporation Emerging Internet Technologies A brief history of Ajax Mail Applications Domino Web Access Oddpost Thunderbird Gmail Outlook Web Access Other Applications Flickr Alphablox Zimbra Google Maps Frameworks Flex Platforms & languages PHP 1995 ASP 1996 Flash JSP 1997 1998 JSF Macromedia Central XUL Firefox 1999 XMLHttp function added to IE 2000 2001 2002 2003 2004 XMLHttp function is in most browsers szlo LaDojo MS Atlas WPF/XAML Dashboard 2005 2006 2007 2008 AdaptivePath coins the term “Ajax” © Copyright 2006, IBM Corporation Emerging Internet Technologies What is AJAX? Asynchronous JavaScript and XML coined by Jesse James Garrett http://www.adaptivepath.com/pu blications/essays/archives/00038 5.php not a technology, but a group of technologies that are used together CSS DHTML XmlHttpRequest ( - this is new ) XML, XSL © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX: Asynchronous JavaScript And XML AJAX is a particular method of using JavaScript, DHTML, and the XMLHttp behavior in the browser to provide dynamic content on a Web page without a page refresh The AJAX programming model focuses on the client; most AJAX applications are completely agnostic to the server (could be J2EE, PHP, ASP.Net, REST, SOAP, etc.) server Browser Server In the typical web application, each request causes a complete refresh of the browser page Browser Server An Ajax application begins the same way. After the initial page loads, JavaScript code retrieves additional data in the background and updates specific sections of the page © Copyright 2006, IBM Corporation Emerging Internet Technologies Open source Strong presence in open source community – provides momentum Many Ajax open source projects bring the power of communitybased open development models and no-cost licensing models to developers. Here are some of today's Ajax open source projects: Source: OpenAjax Alliance © Copyright 2006, IBM Corporation Emerging Internet Technologies Recipe for AJAX An event in the browser triggers a request. Asynchronous request is made to a server Server responds with XML (or other format) data Current page is updated by JS, based on response data Repeat as necessary © Copyright 2006, IBM Corporation Emerging Internet Technologies Making an Asynchronous Request/Response Create XMLHttpRequest Object: xmlhttp = new XMLHttpRequest() (Mozilla) xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") (Internet Explorer*) Set callback function: xmlhttp.onreadystatechange = <function name> Open URL: xmlhttp.open(<"GET“ | “POST”>,<URL>,true) xmlhttp.send(<optional post data>) *In IE7, ActiveX objects are disabled by default. The XMLHttpRequest, however, will be natively supported. Response Callback Handler: function callback() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { data = xmlhttp.responseXML //do something with data } else { //handle error } } } The text of the response data is also available through the responseText attribute © Copyright 2006, IBM Corporation Emerging Internet Technologies Document Object Model Browser stores data (HTML, XML, CSS) as a hierarchical collection of nodes exposed through DOM interface Allows page content to be modified programmatically through javascript. Node Types Element – equivalent to XML elements <…></…> Attribute – equivalent to XML attributes name=“value” Text – equivalent text between XML elements <…>text</…> Element <HTML> <HTML> <BODY> <A href=“file.html>Link</A> </BODY> </HTML> <BODY> Attribute Text <A> href=“file.html” “Link” © Copyright 2006, IBM Corporation Emerging Internet Technologies Client-side Ajax transformations • • • For client-side Ajax, the application server usually requires no additional Ajaxspecific server software. All Ajax transformations come from the client-side Ajax runtime library. One advantage of this option is the independence from the server side technology. • • The server code creates and serves the page and responds to the client's asynch requests. HTML browser client Original HTML+JS+… Data Ajax engine UI Logic User interface (HTML DOM) Application server Deployed application Web pages (HTML, PHP, JSP,…) Application logic Data This way either side can be swapped with another implementation approach. © Copyright 2006, IBM Corporation Emerging Internet Technologies Server-side transformations An Ajax server component performs most or all of the Ajax transformations into appropriate client-side HTML+JavaScript. Often, the server-side Ajax toolkit downloads its own clientside Ajax library which communicates directly with the toolkit's server-side Ajax component. Benefit: It allows the use of server-side languages for debugging, editing, and refactoring tools with which developers are already familiar, but at the price of dependence on a particular server-side technology. HTML browser client HTML+JS+ Output from Server-side Ajax engine Client-side Ajax engine User interface (HTML DOM) Application server Server-side Ajax engine Web pages (HTML, PHP, JSP,…) Deployed application Application logic Data © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX – Different Programming Models…. Some are “server agnostic” The “client” is all what matters. Can interact with any kind of server Some is “bound” to a server architecture Generally Java Sometimes PHP MSFT has its own (XAML) There is an embryonic (in most cases) concept of a “client-side container” to insulate the client code Mostly a JavaScript shell ..but it may be “Gecko” …. Or Vista !!!! © Copyright 2006, IBM Corporation Emerging Internet Technologies What is out there - Frameworks, Libraries, Tools JavaScript Frameworks: Mulitpurpose frameworks: < 30, Dojo, Zimbra, Rico, Tibco, Backbase,.. Remoting Frameworks; > 15, Javelin Teleport, vcXMLRPC, … Effects frameworks, > 5, Script.acol.us, … Flash frameworks, ~ 3, AMFPHP, … Logging frameworks, ~ 5, Log4Js, jsTracer, … XML frameworks, ~5, Backbase XML/XSLT/XPath, Google AJAXSLT, … Specialized frameworks, ~3, CAPXOUS, … Server-Side and Hybrid Frameworks: C++ Ajax Frameworks(1), Coldfusion(4), DotNet (>15), Java (>30), Lisp(1), Lotus Notes(1), Multi-Language (>9), Perl (2), PHP (>25), Python (4), Ruby (1), SmallTalk (1) Ajax Tools: IDEs and plugins (8 – ATF), DOM inspectors (6), Traffic Sniffers (4), etc. All numbers are rough estimates – status Sept 2006 © Copyright 2006, IBM Corporation Emerging Internet Technologies Traditional WebUI vs. AJAX Ready for SOA UI “Contract” “Contract” Browser Server UI Browser Services Server Services In the typical web application, UI component runs on server and uses services provided in the server container in rendering page fragments Example services: Identity Mgmt, Authentication & Authorization, Preferences/Personalization, UI Extension, etc. In an Ajax application if the UI in the browser needs the same services, they must either be exposed remotely (server round trip to service), or else traditional-style rendering on server can be used for page fragments (server round trip for rendering UI) This means that traditional container services used by portlets can be REST-enabled for use by AJAX and thick clients, and still be used by traditional web UI’s © Copyright 2006, IBM Corporation ® Emerging Internet Technologies AJAX Toolkit Framework Emerging Internet Technologies Group © Copyright 2006, IBM Corporation Emerging Internet Technologies The AJAX Toolkit Framework (ATF) Project The AJAX Toolkit Framework is a proposed open source project under the Eclipse Technology Project. http://www.eclipse.org/atf/ ATF will provide extensible frameworks and exemplary tools for building IDEs for the many different AJAX runtime offerings (Dojo, Zimbra, etc) in the market. These frameworks will contain features for developing, deploying, debugging and testing AJAX applications. ATF will provide for the development and incorporation of additional AJAX development tooling. ATF will use existing Eclipse extensions for web application deployment so that the environment will be "server agnostic“ Initial adapters will include a J2EE / JSP adapter and an Apache / PHP adapter. © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX Toolkit Framework is Eclipse Plugins E C L I P S E AJAX Toolkit Framework AJAX Toolkit Framework is a collection of Eclipse plugins Eclipse WebTools Mozilla XULRunner & Javaconnect Legend: External © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX Toolkit Framework Components Eclipse Plugins Java Script Debugger DOM Inspector And JavaScript Console Personalities JavaScript Syntax Validator Embedded Mozilla Browser Personality Builder Rico Personality AJAX “X” Dojo Zimbra Personality Personality Personality Zimbra Rico Dojo Ajax-x Personality Common Libraries Mozilla XULRunner & JavaConnect Eclipse WebTools Legend: External © Copyright 2006, IBM Corporation Emerging Internet Technologies Eclipse - What has been contributed An Eclipse plug-in framework with ability to support multiple personalities (runtime toolkits) Highlight of Eclipse Ajax framework toolkit: Personality Builder JavaScript Editor JavaScript Debugger Embedded Mozilla Browser DOM Inspector / JavaScript Console Integrated Deployment • J2EE / JSP • Apache / PHP © Copyright 2006, IBM Corporation Emerging Internet Technologies Enhancements in latest Release – Sept 2006 ¾ HTTP Web Server Support 9 Ability to configure, deploy, and run/debug on a Web Server ¾ HTTP or File URL support 9 Able to launch and debug an AJAX application using a URL 9 Application doesn’t have to reside in eclipse ¾ Simplified AJAX Project Creation 9 Ability to add AJAX support to existing project ¾ JavaScript Debugger Enhancements 9 Expression support 9 New preference items © Copyright 2006, IBM Corporation Emerging Internet Technologies URL Debugging and Running Creating a Debug configuration to debug an AJAX application using an URL. © Copyright 2006, IBM Corporation Emerging Internet Technologies URL Debugging and Running A file opened in the JavaScript editor using an URL © Copyright 2006, IBM Corporation Emerging Internet Technologies Debugger - Breakpoints Breakpoint can be set by double clicking in ruler. © Copyright 2006, IBM Corporation Emerging Internet Technologies CSS View Example of the Graphical box model created for selected DOM element with dimension, padding, border, and margin information © Copyright 2006, IBM Corporation Emerging Internet Technologies XHR Monitor XHR Monitor now has the ability to format XHR response body according to content-type specified © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Open Ajax Alliance Industry Collaboration © Copyright 2006, IBM Corporation Emerging Internet Technologies Open Ajax - Industry Collaboration This group will support the development of open Ajax technologies & tooling IBM is proposing to contribute a tooling framework & Eclipse plug-in for Ajax toolkits (Ajax Toolkit Framework) • “…toolkits can be supported in less than 30 minutes…” Zimbra is working with Apache on Kabuki - an Ajax toolkit; (Eclipse Ajax Toolkit Framework support included) Dojo - an open source JavaScript/Ajax toolkit that enables users to create rich, lightweight UIs; (Eclipse Ajax Toolkit Framework support included) Mozilla™ - IBM is proposing to contribute code to Mozilla™ to enable Eclipse developers to employ Mozilla™ & Mozilla's debugging capabilities within Eclipse Founded: Feb 1st 2006 © Copyright 2006, IBM Corporation Emerging Internet Technologies OpenAjax Alliance - the vision Grow Ajax adoption to the next phase Evolve tools that significantly reduce the development costs & skills of incorporating Ajax into a broad range of web applications Growing usage of Ajax in applications will foster innovation in open source frameworks The community & applications produced will enable Ajax future functionality Through the looking glass - innovation will lead to consolidation around a few Ajax personalities - i.e: • Web Developers - rich(er) desktop interactions thru the browser • Web Designers - rich visual user experiences © Copyright 2006, IBM Corporation Emerging Internet Technologies Recent OpenAjax Alliance activities Three workgroups set up: Marketing/Architecture Create group web site containing: Ajax Definitions, White Papers, Block-diagrams Interoperability Focus on ability to mix widgets from different Ajax toolkits Declarative Markup Focus on creation of a unified approach to UI Markups © Copyright 2006, IBM Corporation Emerging Internet Technologies OpenAjax Hub – addressing Ajax runtime interoperability Simple and lightweight JavaScript library Central facility for different Ajax toolkits to: prevent JavaScript and HTML/XML markup collisions and to provide appropriate bridging The four main interoperability issues initially addressed are : 1. JavaScript collision checking, 2. toolkit loading 3. markup mixing and 4. event management. OpenAjax Hub will consist of detailed specifications and open source JavaScript code. © Copyright 2006, IBM Corporation Emerging Internet Technologies OpenAjax Alliance has grown > 50 members Next Face-to-face meeting early October 2006 in Silicon Valley © Copyright 2006, IBM Corporation Emerging Internet Technologies Summary – OpenAjax Alliance Key industry leaders are collaborating to insure the success of Ajax across Operating systems Browsers Languages Greater Open & Closed Source Community is working to create integrated Ajax Runtimes and Tooling targeting Web “design center” — Augmenting existing HTML with Ajax JavaScript “design center” — Full OO GUIs in Ajax “Mash-ups” of traditional and Ajax Web Uis Web Site – Web Site - http://www.openajax.org For information about the alliance, including how to join, contact: Jon Ferraiolo jferrai@us.ibm.com © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Demo © Copyright 2006, IBM Corporation Emerging Internet Technologies CRM demo – Ajax showcase Developed on WAS-CE http://www.devx.com/ibm/Article/32128 AJAX Makes Your Applications Sizzle on WebSphere Application Server Community Edition © Copyright 2006, IBM Corporation Emerging Internet Technologies CRM demo – Ajax resources Resources Download the Sample Application for This Article Download WebSphere Application Server Community Edition Tutorial: Using AJAX with PHP and Sajax Tutorial: The AJAX Transport Method Tutorial: Build Apps Using AJAX Tutorial: Using AJAX with WebSphere Commerce © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Other project experience © Copyright 2006, IBM Corporation Emerging Internet Technologies Use cases – travel industry Hotel availability search This function tests the ‘autocomplete’ for entering a hotel location. After input of 2nd letter the server is contacted for suggestions and autocompletion of the entry. Subsequent db for hotel details can provide an undefined large number of result rows. This scenario will be used to validate various backend-access strategies Show the location of hotel(s) on a map Drag & drop function for hotel search and display of Google map Display Hotel Details In ‘mouse-over’ on map details of hotels will be fetched from backend and displayed Hotel Result Set sort Sort strategy for various result sets will be evaluated © Copyright 2006, IBM Corporation Emerging Internet Technologies Use cases – travel industry These use cases are typical examples of using Ajax Asynchronous handling of an unpredictable (huge) amount of (response) data GoogleMap is a great example of this Client side considerations is only part of the solution: • • • • Bandwidth Backend DB performance Caching strategy Handling of curser in result set Ajax might be overkill for small result sets: • E.g. 30k data result vs. 400k initial Ajax footprint © Copyright 2006, IBM Corporation Emerging Internet Technologies Study on performance for German ‘business hub’ appl Do you have statistical data on user behavior ? Zeitverhalten bei Klicks 45 40 35 Sekunden 30 25 Java-Applet 20 JavaScript-Baum 15 10 5 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Klicks © Copyright 2006, IBM Corporation Emerging Internet Technologies Example of ‘autocomplete’ © Copyright 2006, IBM Corporation Emerging Internet Technologies Another example of ‘autocomplete’ http://www.snap.com/ © Copyright 2006, IBM Corporation Emerging Internet Technologies SNAP – results preview © Copyright 2006, IBM Corporation Emerging Internet Technologies SNAP – results preview © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Getting started and enterprise considerations © Copyright 2006, IBM Corporation Emerging Internet Technologies Ajax Value Proposition – Why Ajax ? More productive end-users, lower bandwidth, and strong ROI In most businesses, decision makers are interested mainly in how information technology can increase revenue, reduce costs, or make better use of information assets. Among the factors that are considered: 1. Time spent waiting for data to be transmitted. Over many repetitions, the time employees spend waiting for pages to load can add up to significant costs. 2. Time spent completing a particular task. Inefficient user interfaces can translate into long periods of lowered end-user productivity. 3. Bandwidth consumed for the entire task. If repetitious tasks consume considerable bandwidth, IT costs can grow dramatically. © Copyright 2006, IBM Corporation Emerging Internet Technologies Ajax – ‘the face of SOA on the web’ © Copyright 2006, IBM Corporation Emerging Internet Technologies Sample evaluation Toolkit YUI Rico Dojo Zimbra Browser Compatibility IE5, FF ,NS6 IE 5.5, FF, Camino /Mac IE 5.5, FF 1.0, Safari, Opera FF 1.0, Safari, IE5.5, Camino/Mac Size – of all sw + documentation / demo 2(10)MB 135kb / 2.5(10)MB 4.1MB Enabled debugging Y N Y Y Maturity and importance of the community 10 5 10 5 Richness of documentation – Documentation / Examples D10 E10 D1 E5 D5 E10 D5 E5 Ease of use 5 1 10 5 BSD Apache 2.0 academic free license 2.1 or BSD MPL or Apache Ability to work with in-house framework (Open source MVC framework – extension of struts) Functional report weight / richness Licensing © Copyright 2006, IBM Corporation Emerging Internet Technologies Beyond the Hype: This is an emerging pattern Difficulties with JavaScript Browser inconsistencies Poor tool support for JavaScript and CSS Lack of established programming practices and design patterns Skillset: Web Developers != Java Programmers != COBOL Programmers UI Issues Back button doesn’t work as expected Bookmarking doesn’t work Accessibility & Internationalization Performance Issues Latency bigger problem when making multiple requests Increased load on browsers Security Issues Doesn’t work across domains © Copyright 2006, IBM Corporation Emerging Internet Technologies Dealing with response issues © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX – Cross Domain Security Issue www.other.com www.other.com www.myco.com Browser Browser www.myco.com www.myco.com The one exception is for images: images can come from any domain, without any security risk. For security reasons, scripts are only allowed to access data which comes from the same domain This is why all the mash-up applications involve images! They simply would not be possible for other kinds of data. (Click on the green server boxes to see the animation) © Copyright 2006, IBM Corporation Emerging Internet Technologies What are the issues with Ajax (accessibility) ? AJAX relies on JavaScript Most graphical browsers support JavaScript but could be an issue for mobile devices or text-only browsers. World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 1.0 require Web sites to function with JavaScript turned off ! WCAG 2.0, - still under development has removed the restriction on scripting-as long as the site remains accessible © Copyright 2006, IBM Corporation Emerging Internet Technologies Accessibility – What is IBM doing ? IBM has contributed to the W3C Protocols and Formats group technology that allows the creation of fully accessible Web components. Two emerging standards from this roadmap States and Adaptable Properties Module Role Taxonomy for Accessible Adaptable Applications are designed to address the accessibility of RIAs IBM will be providing expertise to integrate Dynamic Web Accessibility (from W3C) into the Dojo Toolkit widget set. Dynamic Web Accessibility provides a mechanism for creating RIAs that are: fully accessible via the keyboard and when using assistive technologies • E.g. screen readers and screen magnifiers. © Copyright 2006, IBM Corporation Emerging Internet Technologies Some good advise Ajax mistakes – by Alex Bosworth from backpackit http://alexbosworth.backpackit.com/pub/67688 © Copyright 2006, IBM Corporation Emerging Internet Technologies Exciting new themes For even less return trips to server and off-line Ajax clients: Sun provides Apache Derby as part of JDK 1.6 and has shown access through Ajax in one of their demos in Dec 2005: http://developers.sun.com/prodtech/javadb/overview/product_to ur/index.jsp See also Simon Phipps blog: New life for the applet ? Storage API in Firefox 2 via sqlite: mozStorage http://developer.mozilla.org/en/docs/Storage © Copyright 2006, IBM Corporation Emerging Internet Technologies Recommendations KISS – Keep It Simple and Safe • Start slowly • Don't rely on new skills for critical tasks Enhance an existing application Maintain standard MVC design • Keep the “M” and “C” on the server • Extend the “V” to Server and Client! • Don't put too much controller logic in JavaScript Have FUN • People get excited about making the browser dance • This is cool stuff! © Copyright 2006, IBM Corporation Emerging Internet Technologies Thank You! anton_fricko@at.ibm.com © Copyright 2006, IBM Corporation Emerging Internet Technologies References Toolkits • • • • • • Dojo http://dojotoolkit.org/ Rico http://openrico.org/ DWR http://getahead.ltd.uk/dwr/ script.aculo.us http://script.aculo.us/ Behaviour http://www.ripcord.co.nz/behaviour/ Zimbra http://www.zimbra.com/ AJAX Toolkit Framework • http://www.alphaworks.ibm.com/tech/ajaxtk • http://www.eclipse.org/proposals/atf/ © Copyright 2006, IBM Corporation Emerging Internet Technologies Reference, cont. AJAX Design Patterns • AJAX Patterns http://ajaxpatterns.org/ Examples and Tutorials • http://www.clearnova.com/ajax/index.html • http://www.yourhtmlsource.com/javascript/ajax.html • http://en.wikibooks.org/wiki/Programming:AJAX Books • AJAX in Action, Manning • Dynamic HTML, The Definitive Guide, O'Reilly • JavaScript, The Definitive Guide, O'Reilly © Copyright 2006, IBM Corporation Emerging Internet Technologies Accessibility Here's some pointers to our work in this area: Good Overview of Ajax & Accessibility: http://www-306.ibm.com/able/resources/ajaxaccessibility.html IBM Press Release on Dojo & Accessibility, Internationalization & .... http://www-03.ibm.com/press/us/en/pressrelease/19767.wss Good Reference Site for Accessibility: http://www-306.ibm.com/able/ © Copyright 2006, IBM Corporation