AJAX The white Tornado?

Emerging Internet Technologies AJAX The white Tornado? Tony Fricko anton_fricko@at.ibm.com

Agenda Emerging Internet Technologies 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

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.

Emerging Internet Technologies AJAX Asynchronous JavaScript and XML

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

A brief history of Ajax Mail Applications Outlook Web Access Domino Web Access Oddpost Thunderbird Gmail Zimbra Other Applications Alphablox Flickr Google Maps Frameworks Flex JSF szlo LaDojo MS Atlas Platforms & languages Macromedia PHP ASP Flash JSP XUL Central WPF/XAML Dashboard Firefox 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 XMLHttp function added to IE XMLHttp function is in most browsers AdaptivePath coins the term Ajax

What is AJAX? Emerging Internet Technologies 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

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 Browser Server In the typical web application, each request causes a complete refresh of the browser page 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

Open source Emerging Internet Technologies 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

Recipe for AJAX Emerging Internet Technologies 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

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

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</ > <HTML> <BODY> <A href= file.html>link</a> </BODY> </HTML> Attribute <HTML> <BODY> <A> Element Text href= file.html Link

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. This way either side can be swapped with another implementation approach. Original HTML+JS+ Web pages (HTML, PHP, JSP, ) HTML browser client Ajax engine Application server Deployed application Application logic UI Logic Data Data User interface (HTML DOM)

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. HTML+JS+ Output from Server-side Ajax engine HTML browser client Client-side Ajax engine Application server User interface (HTML DOM) 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. Server-side Ajax engine Web pages (HTML, PHP, JSP, ) Deployed application Application logic Data

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!!!!

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

Traditional WebUI vs. AJAX Ready for SOA UI Contract Contract UI Services Browser Server Browser 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

Emerging Internet Technologies AJAX Toolkit Framework Emerging Internet Technologies Group

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.

AJAX Toolkit Framework is Eclipse Plugins E C L I P S E AJAX Toolkit Framework Eclipse WebTools AJAX Toolkit Framework is a collection of Eclipse plugins Mozilla XULRunner & Javaconnect Legend: External

AJAX Toolkit Framework Components Eclipse Plugins Java Script Debugger DOM Inspector And JavaScript Console JavaScript Syntax Validator Personalities Personality Builder Embedded Mozilla Browser Rico Personality Zimbra Personality Dojo AJAX X Personality Personality Rico Zimbra Dojo Ajax-x Personality Common Libraries Mozilla XULRunner & JavaConnect Eclipse WebTools Legend: External

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

Enhancements in latest Release Sept 2006 HTTP Web Server Support Ability to configure, deploy, and run/debug on a Web Server HTTP or File URL support Able to launch and debug an AJAX application using a URL Application doesn t have to reside in eclipse Simplified AJAX Project Creation Ability to add AJAX support to existing project JavaScript Debugger Enhancements Expression support New preference items

URL Debugging and Running Creating a Debug configuration to debug an AJAX application using an URL.

URL Debugging and Running A file opened in the JavaScript editor using an URL

Debugger - Breakpoints Breakpoint can be set by double clicking in ruler.

CSS View Emerging Internet Technologies Example of the Graphical box model created for selected DOM element with dimension, padding, border, and margin information

XHR Monitor Emerging Internet Technologies XHR Monitor now has the ability to format XHR response body according to content-type specified

Emerging Internet Technologies Open Ajax Alliance Industry Collaboration

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 1 st 2006

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

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

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.

OpenAjax Alliance has grown > 50 members Next Face-to-face meeting early October 2006 in Silicon Valley

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

Emerging Internet Technologies Demo

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

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

Emerging Internet Technologies Other project experience

Use cases travel industry Hotel availability search This function tests the autocomplete for entering a hotel location. After input of 2 nd 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

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

Study on performance for German business hub appl Do you have statistical data on user behavior? Zeitverhalten bei Klicks 45 40 35 30 Sekunden 25 20 15 10 5 Java-Applet JavaScript-Baum 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Klicks

Example of autocomplete

Another example of autocomplete http://www.snap.com/

SNAP results preview

SNAP results preview

Emerging Internet Technologies Getting started and enterprise considerations

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.

Ajax the face of SOA on the web

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 Ability to work with in-house framework (Open source MVC framework extension of struts) Richness of documentation Documentation / Examples D10 E10 D1 E5 D5 E10 D5 E5 Ease of use 5 1 10 5 Functional report weight / richness Licensing BSD Apache 2.0 academic free license 2.1 or BSD MPL or Apache

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

Dealing with response issues

AJAX Cross Domain Security Issue www.other.com www.other.com www.myco.com Browser www.myco.com Browser www.myco.com For security reasons, scripts are only allowed to access data which comes from the same domain The one exception is for images: images can come from any domain, without any security risk. 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)

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

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.

Some good advise Ajax mistakes by Alex Bosworth from backpackit http://alexbosworth.backpackit.com/pub/67688

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

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!

Thank You! anton_fricko@at.ibm.com

References Toolkits Emerging Internet Technologies 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/

Reference, cont. Emerging Internet Technologies AJAX Design Patterns AJAX Patterns http://ajaxpatterns.org/ Examples and Tutorials Books http://www.clearnova.com/ajax/index.html http://www.yourhtmlsource.com/javascript/ajax.html http://en.wikibooks.org/wiki/programming:ajax AJAX in Action, Manning Dynamic HTML, The Definitive Guide, O'Reilly JavaScript, The Definitive Guide, O'Reilly

Accessibility Emerging Internet Technologies 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/