AJAX The white Tornado ? AJAX The white Tornado ?
-
Upload
sampetruda -
Category
Documents
-
view
2.955 -
download
9
Transcript of AJAX The white Tornado ? AJAX The white Tornado ?
1
®
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAXThe white Tornado ?
AJAXThe white Tornado ?
Tony [email protected]
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Agenda Intro to Ajax technology
What is it: technology components, architectureWhat is available: frameworks, toolkits
ATF - Ajax Toolkit Framework
OpenAjax AllianceObjectives and deliverables
Sample projectsWeb Shop showcasejStart projects
Demo
Getting started & enterprise considerationsFramework / tooling selection – experience and opinionsAccessibility and other gotchas
2
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
The white tornado
By Heidi Kriz | Also by this reporter14:30 PM Oct, 20, 1998The 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 ofColgate-Palmolive products -- brought the consumer products giant to its knees. The company said that it backeddown for other reasons.
®
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX
Asynchronous JavaScript and XML
3
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Ajax - Growing Market InterestsWeb 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 businessesAjax 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
Flex JSF
Flash
A brief history of Ajax
1996 1998 2000 2002 2004 2006 2008
Platforms & languages
OtherApplications
Gmail
Frameworks
Google Maps
1995 1997 1999 2001 2003 2005 2007
Thunderbird
DashboardMacromedia
Central
Zimbra
LaDojoszlo
Firefox
Flickr
Oddpost
Alphablox
JSPASPPHP XUL
OutlookWeb Access
DominoWeb Access
MS Atlas
WPF/XAML
XMLHttpfunction added to IE
AdaptivePathcoins the term “Ajax”
XMLHttpfunction is in most browsers
MailApplications
4
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Ajax - What’s IBM’s experience?Web 2. 0 Technologies & Experiences
Early Ajax-enabled Products ShippedAlphablox (2001)
Sash (2001)
Tivoli Presentation Services Web Console (2002)
Tivoli Composite Application Manager for Response Time Tracking
Java Server Faces Widget Library (JWL) (2004)
Workplace Designer (2006)
Bowstreet (2006)
Rational - Apollo (2006)
Lessons Learned - Beyond the HypeCould achieve desktop interactivity thru JavaScript - but a delicate balance
Downloading, caching, initializing JavaScript libraries large & time consuming when first used
XML data very slow to parse in JavaScript - JSON becoming practical approach
Specialized skills required - must understand internals of Browser DOM programming & refresh timings
Specialized folks: 40:1 IBM and others in the industry found only 1 in 40 engineers interviewed for AJAX positions had the level of skills required
Subtle browser inconsistencies, complex JavaScript
Back button, bookmarking, losing your state
Hard to index pages for search
Cross-domain security restrictions
Latency
Very high function mail & calendar access, in the browser
Reached about 10 million users
Fragile JavaScript code was a problem
Memory consumption, page load times, and sheer amount of JavaScript created performance issues
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Two complimentary centers of gravity……which are becoming less distinguishable over time
Connection Fidelity
Interaction Fidelity
Mostly NeverAlways Sometimes
Appliance(e.g. PDA)
Device Fidelity
Managed Client Containers(“installed”)Request
&Response
None
“Reactive”
LaptopDesktop
Browser Frameworks (“built in”)
5
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX Positioning
Connection Fidelity
Interaction Fidelity
Mostly NeverAlways Sometimes
Appliance(e.g. PDA)
Device Fidelity
Managed Client Containers(“installed”)
AJAX
Request&
Response
None
“Reactive”
LaptopDesktop
Browser Frameworks (“built in”)
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
What is AJAX?
Asynchronous JavaScript and XML
coined by Jesse James Garretthttp://www.adaptivepath.com/publications/essays/archives/000385.php
not a technology, but a group of technologies that are used together
CSS
DHTML
XmlHttpRequest ( - this is new )
XML, XSL
6
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX: Asynchronous JavaScript And XML
Browser Server Browser Server
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
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.)
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Ajax or DHTML / JavaScript?
AjaxReload of information from server upon request
Fast loading of start page
(Short) delay for additional data request
Any data can be dynamically requested for display from server
Reduced server and traffic when only small amount of data being required
Small to medium amount of data on request from server *)
*) potentially from a huge data set
DHTML/JavaScriptPre-loaded data can be presented when needed
Start pages may take longer for initial display
Immediate display of additional info
Only pre-loaded data can be shown
Data will be loaded with start page, irrespective of whether it will be needed
Pre-loaded data for immediate display on request
7
© 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 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
8
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Making an Asynchronous Request/ResponseCreate 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 ModelBrowser stores data (HTML, XML, CSS) as a hierarchical collection of nodes exposed through DOM interfaceAllows 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>
<HTML>
<BODY>
<A>
href=“file.html” “Link”
Element
Attribute Text
9
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Client-side Ajax transformations
•For client-side Ajax, the application server usually requires no additional Ajax-specific 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 asynchronous requests. This way either side can be swapped with another implementation approach.
Web pages(HTML, PHP, JSP,…)
Application logic Data
Deployed application
UI Logic
HTML browser client
Ajax engine
Application server
OriginalHTML+JS+…
User interface(HTML DOM)
Data
© 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 client-side 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.
Web pages(HTML, PHP, JSP,…)
Application logic Data
Deployed applicationServer-sideAjax engine
User interface(HTML DOM)
HTML browser client
Client-sideAjax engine
Application server
HTML+JS+Output fromServer-sideAjax engine
10
© 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 architectureGenerally JavaSometimes PHPMSFT 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
11
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Traditional WebUI vs. AJAX
Browser Server Browser Server
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
UI
Services
“Contract” UI Services
“Contract”
Ready for SOA
®
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX Toolkit Framework
Emerging Internet Technologies Group
12
© 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
Overview
The AJAX Toolkit Framework is an extensible framework for an Integrated Development Environment (IDE).
ProvidesTools 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
13
© Copyright 2006, IBM Corporation
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 areFor 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
MozillaXULRunner & Javaconnect
AJAX Toolkit Framework is Eclipse Plugins
EECCLLIIPPSSEE
Eclipse WebTools
AJAX Toolkit Framework
AJAX Toolkit Framework
is a collection of Eclipse plugins
Legend: External
14
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
MozillaXULRunner & JavaConnect Eclipse WebTools
Eclipse Plugins
AJAX Toolkit Framework Components
JavaScript SyntaxValidator
PersonalitiesDOM Inspector And JavaScript
Console
Java Script Debugger
Embedded Mozilla Browser
Personality Builder
Rico Personality
Zimbra Personality
AJAX “X”Personality
Rico Zimbra AJAX “X”
Personality Common Libraries
Rhino JSLint
Legend: External
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Eclipse - What is being proposed for contribution
An Eclipse plug-in framework with ability to support multiple personalities (runtime toolkits)
Highlight of Eclipse Ajax framework toolkit:
Personality BuilderJavaScript EditorJavaScript DebuggerEmbedded Mozilla BrowserDOM Inspector / JavaScript ConsoleIntegrated Deployment
• J2EE / JSP• Apache / PHP
An Eclipse plug-in framework with ability to support multiple personalities (runtime toolkits)
Highlight of Eclipse Ajax framework toolkit:
Personality BuilderJavaScript EditorJavaScript DebuggerEmbedded Mozilla BrowserDOM Inspector / JavaScript ConsoleIntegrated Deployment
• J2EE / JSP• Apache / PHP
15
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Zimbra - What is being proposed for contribution
Ajax Runtime Toolkit — Kabuki ToolkitJavaScript OO Runtime
Widget set modeled after SWT − Support for Menus, Buttons, Treelist, Calendar, HTML
authoring, Drag & Drop, …Framework components
− Event model− Sync./async. network/XML programming− Utility functions: I18n, Strings, Date, …
Server-side agnostic — Does not require/pre-req any particular frameworks Support for multiple browsers (IE, Firefox, Safari)
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
What is Dojo?
Portable, cross-platform JavaScript libraryHTML, SVG, command-line, Dashboard, every modern browser
30+ drop-in UI components, stylish effects & animations
Automated testing, documentation, compression, and packaging (makes dynamic apps faster)
Powerful, easy-to-use Ajax support. Server-agnostic.Broad community support
Corporate support: AOL, JotSpot, Renkoo, etc.
20+ individual committers, many more contributing patches
Open Source framework adoption (WebWork, Django, etc.)
16
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX Toolkit Framework Components
JavaScript EditorBatch and as-you-type syntax validation
JavaScript DebuggerTight integration with Eclipse debug UI to provide flow control in Mozilla and the ability to examine JavaScript code and variables
Embedded Mozilla BrowserAccess to Mozilla XPCOM
DOM Inspector / JavaScript ConsoleMozilla tools integration for DHTML developers as Eclipse Views.
Integrated DeploymentJ2EE / JSP
Apache / PHP
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Personality Builder
A set of Wizards which accept:Artifact data (AJAX toolkit libraries)
Build requirements data
New application templates
Code patterns• These may also be added by AJAX
DevelopersDeployment data
Wizards output a ‘basic’ Personality Plugin
The builder will provide necessary basic development features targeted for AJAX toolkits
Enables customization and addition of functionality
17
®
© Copyright 2006, IBM Corporation
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 phaseEvolve 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 frameworksThe 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
18
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Open Ajax - Industry CollaborationThis 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
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
Recent OpenAjax Alliance activities
Three workgroups set up:
Marketing/ArchitectureCreate group web site containing:
Ajax Definitions, White Papers, Block-diagrams
InteroperabilityFocus on ability to mix widgets from different Ajax toolkits
Declarative MarkupFocus on creation of a unified approach to UI Markups
19
© 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
20
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Summary – OpenAjax Alliance
Key industry leaders are collaborating to insure the success of Ajax across
Operating systemsBrowsersLanguages
Greater Open & Closed Source Community is working to create integrated Ajax Runtimes and Tooling targeting
Web “design center” — Augmenting existing HTML with AjaxJavaScript “design center” — Full OO GUIs in Ajax“Mash-ups” of traditional and Ajax Web Uis
Web Site – Web Site - http://www.openajaxalliance
For information about the alliance, including how to join, contact:Jon Ferraiolo [email protected]
®
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Prototype for a web shop
Ajax showcase
21
© Copyright 2006, IBM Corporation
Emerging Internet TechnologiesShop-Demo – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Motivation
Requirement: highly useful, fast, intuitiveStatistics from online shops – drop-off because of shortcomings in usability
Almost 50% of visitors drop from the website without completing the saleOverall statistics for 2005
40 – 70 %
Quelle: Nielsen Norman Group, 2000
22
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Use of Ajax in Online-Shops
Product search: autocompletion at data entryGoogle Suggest
© Copyright 2006, IBM Corporation
Emerging Internet TechnologiesShop-Demo – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion
23
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Use of Ajax in Online-Shops
Product search: autocompletion at data entryGoogle Suggest
Product filtering: show effect of filtering live and display result count
Amazon Diamond Search
© Copyright 2006, IBM Corporation
Emerging Internet TechnologiesShop-Demo – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion
24
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Use of Ajax in Online-Shops
Product search: autocompletion at data entryGoogle Suggest
Product filtering: show effect of filtering live and display result countAmazon Diamond Search
Product information: Availability of different versions of products.oliver
Move a selected product into the shopping basked:IBM Ajax demo
Registration: verify existance of a user nameRememberTheMilk.com
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
25
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Architecture - overview
Web ControllerBrowser
Ajax Controller
Ajax TaskCommands
Ajax Views
- Text- JSON- XML- XHTML
ConfigRequestRegistry
Event Handler
RequestPreparation
ResponseHandler
ResponsePreparation
AjaxLib
ControllerCommands
TaskCommands
DB
Views
New developmentExisting components Client Server
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Code example: Event & Response Handler
26
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Code example: configuration
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Code example: AjaxTaskCommand
27
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Results
TechnologyAjax can be the basis for new interaction models
Event und Response Handler can be easily set up
Components can by relatively easy extended or exchangedUser experience
Improved efficiency on interacting with the systemBusiness 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
28
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Use cases – travel industry
Hotel availability searchThis 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 DetailsIn ‘mouse-over’ on map details of hotels will be fetched from backend and displayed
Hotel Result Set sortSort 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 AjaxAsynchronous 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
29
© 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
0
5
10
15
20
25
30
35
40
45
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Klicks
Seku
nden
Java-AppletJavaScript-Baum
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Example of ‘autocomplete’
30
© 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
31
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
SNAP – results preview
®
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Getting started andenterprise considerations
32
© 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
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)
33
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Ajax – ‘the face of SOA on the web’
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Where would you start ?
Lots of free stuff on the InternetStart experimenting
Decide on JavaScript strategyTooling (debugging)Available librariesPerformance (footprint, startup)
Evaluate existing toolkitsCommercial offerings
Multiple alternative Ajax programming models Ajax offers a wide range of architectural options.
This diversity allows developers to choose from many different commercial products and/or open source technologies
34
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Toolkit observations - samples
Different performance of browsers on datagrids (for the same Ajax toolkit)
Do or Don’t use browser caching ?
IE is much slower than Mozilla on –Have seen different performance on handling data grids – I.E. much slower than Mozilla, sometimes up to 2 times !!
Other observations:Zimbra
Has a different programming model than Dojo, might be preferential to some users with this backgroundHas many widgets - more than one can use, but ugly to modifyIs all JavaScript, much more difficult to find individual components within the JavaScript implementation
Dojo is much easier to use and customize
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Sample evaluation
Functional report weight / richness
D5 E5D5 E10 D1 E5 D10 E10 Richness of documentation –Documentation / Examples
51015Ease of use
510510Maturity and importance of the community
Ability to work with in-house framework (Open source MVC framework – extension of struts)
YYNYEnabled debugging
MPL or Apacheacademic free license 2.1 or BSD
Apache 2.0 BSD Licensing
4.1MB2.5(10)MB135kb /2(10)MBSize – of all sw + documentation / demo
FF 1.0, Safari, IE5.5, Camino/Mac
IE 5.5, FF 1.0, Safari, Opera
IE 5.5, FF, Camino /Mac
IE5, FF ,NS6 Browser Compatibility
ZimbraDojoRicoYUIToolkit
35
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Beyond the Hype: This is an emerging pattern
Difficulties with JavaScriptBrowser inconsistenciesPoor tool support for JavaScript and CSS Lack of established programming practices and design patternsSkillset: Web Developers != Java Programmers != COBOL Programmers
UI IssuesBack button doesn’t work as expectedBookmarking doesn’t workAccessibility & Internationalization
Performance IssuesLatency bigger problem when making multiple requestsIncreased load on browsers
Security IssuesDoesn’t work across domains
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
JavaScript considerations
Co-existence of librariesAjaxHub from OpenAjax Alliance
36
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
Dealing with response issues
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
AJAX – Cross Domain Security Issue
Browser www.myco.com
www.other.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.
Browser www.myco.com
www.myco.com
www.other.com
(Click on the green server boxes to see the animation)
37
© Copyright 2006, IBM Corporation
Emerging Internet Technologies
What are the issues with Ajax (accessibility) ?
AJAX relies on JavaScriptMost 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 ModuleRole Taxonomy for Accessible Adaptable Applicationsare 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 RIAsthat are:
fully accessible via the keyboard and when using assistive technologies
• E.g. screen readers and screen magnifiers.
38
© 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_tour/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
39
© 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 applicationMaintain 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!
40
© 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
41
© 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/