Tips & Tricks
Your SlideShare is downloading.
AJAX The white Tornado ? AJAX The white Tornado ?
Like this document? Why not share!
by Wasiq Zia
by MIlan Skoric
by Julie Meloni
Email sent successfully!
Show related SlideShares at end
AJAX The white Tornado ? AJAX The white Tornado ?
Apr 29, 2010
Comment goes here.
12 hours ago
Are you sure you want to
Your message goes here
Be the first to comment
Be the first to like this
Number of Embeds
Flagged as inappropriate
Flag as inappropriate
No notes for slide
Transcript of "AJAX The white Tornado ? AJAX The white Tornado ?"
1. ® Emerging Internet Technologies AJAX The white Tornado ? Tony Fricko firstname.lastname@example.org © 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 Sample projects Web Shop showcase jStart projects Demo Getting started & enterprise considerations Framework / tooling selection – experience and opinions Accessibility and other gotchas © Copyright 2006, IBM Corporation 1
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 Outlook Domino Web Access Web Access Oddpost Thunderbird Gmail Zimbra Other Applications Alphablox Flickr Google Maps Frameworks Flex JSF szlo LaDojo MS Atlas Platforms & languages Macromedia PHP ASP JSP XUL Central WPF/XAML Flash Dashboard Firefox 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 XMLHttp XMLHttp AdaptivePath function added function is in coins the term to IE most browsers “Ajax” © Copyright 2006, IBM Corporation 3
Emerging Internet Technologies Open source Strong presence in open source community – provides momentum Many Ajax open source projects bring the power of community- based 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 7
Emerging Internet Technologies Traditional WebUI vs. AJAX Ready for SOA UI “Contract” “Contract” UI Services Server Browser Server Browser Services In the typical web application, UI In an Ajax application if the UI in the browser component runs on server and uses needs the same services, they must either be services provided in the server exposed remotely (server round trip to service), container in rendering page or else traditional-style rendering on server can fragments be used for page fragments (server round trip for rendering UI) Example services: Identity Mgmt, This means that traditional container services Authentication & Authorization, used by portlets can be REST-enabled for use Preferences/Personalization, by AJAX and thick clients, and still be used by UI Extension, etc. traditional web UI’s © Copyright 2006, IBM Corporation ® Emerging Internet Technologies AJAX Toolkit Framework Emerging Internet Technologies Group © Copyright 2006, IBM Corporation 11
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 Overview The AJAX Toolkit Framework is an extensible framework for an Integrated Development Environment (IDE). Provides Tools to develop any DHTML/AJAX application Tight integration with the existing Eclipse user interface and development paradigm Plug-ins to facilitate use of various AJAX toolkits and/or class libraries Targets AJAX Application Developers and Toolkit Developers © Copyright 2006, IBM Corporation 12
Emerging Internet Technologies External Dependencies AJAX Toolkit Framework is a collection of Eclipse Plugins. The environment in which Plugins need to work is dependent on Eclipse Web Tools, Mozilla Xul Runner and Java Connect. Plugins dependent on external packages are For Java Script development enhancements Rhino and JSLint For individual AJAX toolkit personality Zimbra, Rico and other Ajax tool kits © Copyright 2006, IBM Corporation Emerging Internet Technologies AJAX Toolkit Framework is Eclipse Plugins E C AJAX Toolkit AJAX Toolkit Framework Framework L is a collection of Eclipse plugins I P Eclipse WebTools S E Mozilla Legend: External XULRunner & Javaconnect © Copyright 2006, IBM Corporation 13
® Emerging Internet Technologies Open Ajax Alliance Industry Collaboration © 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 17
Shop-DemoEmerging Internet– Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion – Motivation – Ajax Technologies © Copyright 2006, IBM Corporation Emerging Internet Technologies Motivation Requirement: highly useful, fast, intuitive Statistics from online shops – drop-off because of shortcomings in usability Almost 50% of visitors drop from the website without completing the sale Overall statistics for 2005 40 – 70 % Quelle: Nielsen Norman Group, 2000 © Copyright 2006, IBM Corporation 21
Emerging Internet Technologies Use of Ajax in Online-Shops Product search: autocompletion at data entry Google Suggest © Copyright 2006, IBM Corporation Shop-Demo Emerging Internet Technologies – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion © Copyright 2006, IBM Corporation 22
Emerging Internet Technologies Use of Ajax in Online-Shops Product search: autocompletion at data entry Google Suggest Product filtering: show effect of filtering live and display result count Amazon Diamond Search © Copyright 2006, IBM Corporation Shop-Demo Emerging Internet Technologies – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion © Copyright 2006, IBM Corporation 23
Emerging Internet Technologies Use of Ajax in Online-Shops Product search: autocompletion at data entry Google Suggest Product filtering: show effect of filtering live and display result count Amazon Diamond Search Product information: Availability of different versions of product s.oliver Move a selected product into the shopping basked: IBM Ajax demo Registration: verify existance of a user name RememberTheMilk.com © Copyright 2006, IBM Corporation Emerging Internet Technologies © Copyright 2006, IBM Corporation 24
Emerging Internet Technologies Architecture - overview Ajax Views Event Handler - Text - JSON - XML Request Views - XHTML Preparation Ajax Lib Request Browser Web Controller Config Registry Response Controller Ajax Controller Preparation Commands Response Task Ajax Task Handler Commands Commands DB New development Existing components Client Server © Copyright 2006, IBM Corporation Emerging Internet Technologies Code example: Event & Response Handler © Copyright 2006, IBM Corporation 25
Emerging Internet Technologies Code example: configuration © Copyright 2006, IBM Corporation Emerging Internet Technologies Code example: AjaxTaskCommand © Copyright 2006, IBM Corporation 26
Emerging Internet Technologies Results Technology Ajax can be the basis for new interaction models Event und Response Handler can be easily set up Components can by relatively easy extended or exchanged User experience Improved efficiency on interacting with the system Business results Satisfied customers Increased rate of interaction Higher usage and less drop-offs means more sales © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Other project experience © Copyright 2006, IBM Corporation 27
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 28
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 30
Emerging Internet Technologies SNAP – results preview © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Getting started and enterprise considerations © Copyright 2006, IBM Corporation 31
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 Next-generation applications (Web 2.0 and RIAs) Ajax opportunities: Replacement for desktop applications The runtime companion for SOA Mashups, dashboards and other composite applications Collaboration Ajax-powered wikis Cross-device applications (desktop and mobile) © Copyright 2006, IBM Corporation 32
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 www.myco.com Browser 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 This is why all the mash-up applications comes from the same domain 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 36
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 38
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 41