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]



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



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.

®



AJAX

Asynchronous JavaScript and XML

3



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



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



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



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



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”)



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



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.)



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



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



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



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



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



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



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



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



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



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

®



AJAX Toolkit Framework

Emerging Internet Technologies Group

12



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.



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



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



MozillaXULRunner & Javaconnect

AJAX Toolkit Framework is Eclipse Plugins

EECCLLIIPPSSEE

Eclipse WebTools



is a collection of Eclipse plugins

Legend: External

14



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



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



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)



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



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



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

®



Open Ajax Alliance

Industry Collaboration



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



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



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



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

20



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]

®



Prototype for a web shop

Ajax showcase

21


Emerging Internet TechnologiesShop-Demo – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion



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



Use of Ajax in Online-Shops

Product search: autocompletion at data entryGoogle Suggest



23





Product filtering: show effect of filtering live and display result count

Amazon Diamond Search



24





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



25



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



Code example: Event & Response Handler

26



Code example: configuration



Code example: AjaxTaskCommand

27



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

®



Other project experience

28



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



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



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



Example of ‘autocomplete’

30



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



SNAP – results preview

31



SNAP – results preview

®



Getting started andenterprise considerations

32



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.



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



Ajax – ‘the face of SOA on the web’



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



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



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



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



JavaScript considerations

Co-existence of librariesAjaxHub from OpenAjax Alliance

36



Dealing with response issues



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



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



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



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



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!



Thank You!

[email protected]

40



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/



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



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/

Documents

AJAX The white Tornado ? AJAX The white Tornado ?