AJAX The white Tornado ? AJAX The white Tornado ?
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

AJAX The white Tornado ? AJAX The white Tornado ?

  • 3,353 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,353
On Slideshare
3,342
From Embeds
11
Number of Embeds
5

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 11

http://amkesolution.com 6
http://192.168.1.5 2
http://www.amkesolution.com 1
http://xamenhatlantida.blogspot.com 1
http://xamenhatlantida.blogspot.gr 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ® Emerging Internet Technologies AJAX The white Tornado ? Tony Fricko anton_fricko@at.ibm.com © Copyright 2006, IBM Corporation Emerging Internet Technologies Agenda Intro to Ajax technology What is it: technology components, architecture What is available: frameworks, toolkits ATF - Ajax Toolkit Framework OpenAjax Alliance Objectives and deliverables 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
  • 2. Emerging Internet Technologies The white tornado By Heidi Kriz | Also by this reporter 14:30 PM Oct, 20, 1998 The king of toothpaste, soap, and household cleaners has backed away from its demand that a small, noncommercial Web site change its domain name. Benjamin Kite, co-founder of Ajax.org, is convinced that an Internet campaign -- which threatened a boycott of Colgate-Palmolive products -- brought the consumer products giant to its knees. The company said that it backed down for other reasons. © Copyright 2006, IBM Corporation ® Emerging Internet Technologies AJAX Asynchronous JavaScript and XML © Copyright 2006, IBM Corporation 2
  • 3. 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
  • 4. Emerging Internet Technologies Ajax - What’s IBM’s experience? Web 2. 0 Technologies & Experiences Early Ajax-enabled Products Shipped Alphablox (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 Hype Could 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 Very high function mail & calendar access, in the browser engineers interviewed for AJAX positions had the level of skills required Reached about 10 million users Subtle browser inconsistencies, complex JavaScript Fragile JavaScript code was a problem Back button, bookmarking, losing your state Memory consumption, page load times, and sheer Hard to index pages for search amount of JavaScript created performance issues Cross-domain security restrictions Latency © Copyright 2006, IBM Corporation Emerging Internet Technologies Two complimentary centers of gravity… …which are becoming less distinguishable over time Appliance Interaction (e.g. PDA) Fidelity Laptop Desktop “Reactive” Device Fidelity Managed Client Containers Request (“installed”) & Browser Frameworks Response (“built in”) None Always Mostly Sometimes Never Connection Fidelity © Copyright 2006, IBM Corporation 4
  • 5. Emerging Internet Technologies AJAX Positioning Appliance Interaction (e.g. PDA) Fidelity Laptop Desktop “Reactive” Device Fidelity AJAX Managed Client Containers Request (“installed”) & Browser Frameworks Response (“built in”) None Always Mostly Sometimes Never Connection Fidelity © Copyright 2006, IBM Corporation Emerging Internet Technologies What is AJAX? Asynchronous JavaScript and XML coined by Jesse James Garrett http://www.adaptivepath.com/pu blications/essays/archives/00038 5.php not a technology, but a group of technologies that are used together CSS DHTML XmlHttpRequest ( - this is new ) XML, XSL © Copyright 2006, IBM Corporation 5
  • 6. Emerging Internet Technologies AJAX: Asynchronous JavaScript And XML AJAX is a particular method of using JavaScript, DHTML, and the XMLHttp behavior in the browser to provide dynamic content on a Web page without a page refresh The AJAX programming model focuses on the client; most AJAX applications are completely agnostic to the server (could be J2EE, PHP, ASP.Net, REST, SOAP, etc.) server Server Browser Server Browser In the typical web application, An Ajax application begins the same way. each request causes a complete refresh of the browser page After the initial page loads, JavaScript code retrieves additional data in the background and updates specific sections of the page © Copyright 2006, IBM Corporation Emerging Internet Technologies Ajax or DHTML / JavaScript? Ajax DHTML/JavaScript Reload of information from server Pre-loaded data can be presented upon request when needed Fast loading of start page Start pages may take longer for initial (Short) delay for additional data display request Immediate display of additional info Any data can be dynamically requested for display from server Only pre-loaded data can be shown Reduced server and traffic when Data will be loaded with start page, only small amount of data being irrespective of whether it will be needed required Small to medium amount of data Pre-loaded data for immediate on request from server *) display on request *) potentially from a huge data set © Copyright 2006, IBM Corporation 6
  • 7. 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
  • 8. Emerging Internet Technologies Making an Asynchronous Request/Response Create XMLHttpRequest Object: xmlhttp = new XMLHttpRequest() (Mozilla) xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") (Internet Explorer*) Set callback function: xmlhttp.onreadystatechange = <function name> Open URL: xmlhttp.open(<"GET“ | “POST”>,<URL>,true) xmlhttp.send(<optional post data>) *In IE7, ActiveX objects are disabled by default. The XMLHttpRequest, however, will be natively supported. Response Callback Handler: function callback() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { data = xmlhttp.responseXML //do something with data } else { //handle error } } } The text of the response data is also available through the responseText attribute © Copyright 2006, IBM Corporation Emerging Internet Technologies Document Object Model Browser stores data (HTML, XML, CSS) as a hierarchical collection of nodes exposed through DOM interface Allows page content to be modified programmatically through javascript. Node Types Element – equivalent to XML elements <…></…> Attribute – equivalent to XML attributes name=“value” Text – equivalent text between XML elements <…>text</…> Element <HTML> <HTML> <BODY> <A href=“file.html>Link</A> <BODY> </BODY> Attribute Text </HTML> <A> href=“file.html” “Link” © Copyright 2006, IBM Corporation 8
  • 9. Emerging Internet Technologies Client-side Ajax transformations •For client-side Ajax, the application HTML browser client server usually requires no additional Ajax-specific server software. Data Original HTML+JS+… Ajax •All Ajax transformations come from UI Logic engine the client-side Ajax runtime library. User interface •One advantage of this option is the (HTML DOM) independence from the server side technology. The server code creates Application server and serves the page and responds to the client's asynchronous requests. Deployed application This way either side can be Web pages swapped with another (HTML, PHP, JSP,…) Application logic Data implementation approach. © Copyright 2006, IBM Corporation Emerging Internet Technologies Server-side transformations An Ajax server component performs most or all of the Ajax HTML browser client transformations into appropriate client-side HTML+JavaScript. HTML+JS+ Output from Client-side User interface Often, the server-side Ajax Server-side Ajax engine (HTML DOM) Ajax engine toolkit downloads its own client- side Ajax library which communicates directly with the toolkit's server-side Ajax Application server component. Benefit: Deployed application It allows the use of server-side Server-side languages for debugging, Ajax engine editing, and refactoring tools with which developers are Web pages Application logic Data already familiar, but at the price (HTML, PHP, JSP,…) of dependence on a particular server-side technology. © Copyright 2006, IBM Corporation 9
  • 10. Emerging Internet Technologies AJAX – Different Programming Models…. Some are “server agnostic” The “client” is all what matters. Can interact with any kind of server Some is “bound” to a server architecture Generally Java Sometimes PHP MSFT has its own (XAML) There is an embryonic (in most cases) concept of a “client-side container” to insulate the client code Mostly a JavaScript shell ..but it may be “Gecko” …. Or Vista !!!! © Copyright 2006, IBM Corporation Emerging Internet Technologies What is out there - Frameworks, Libraries, Tools JavaScript Frameworks: Mulitpurpose frameworks: < 30, Dojo, Zimbra, Rico, Tibco, Backbase,.. Remoting Frameworks; > 15, Javelin Teleport, vcXMLRPC, … Effects frameworks, > 5, Script.acol.us, … Flash frameworks, ~ 3, AMFPHP, … Logging frameworks, ~ 5, Log4Js, jsTracer, … XML frameworks, ~5, Backbase XML/XSLT/XPath, Google AJAXSLT, … Specialized frameworks, ~3, CAPXOUS, … Server-Side and Hybrid Frameworks: C++ Ajax Frameworks(1), Coldfusion(4), DotNet (>15), Java (>30), Lisp(1), Lotus Notes(1), Multi-Language (>9), Perl (2), PHP (>25), Python (4), Ruby (1), SmallTalk (1) Ajax Tools: IDEs and plugins (8 – ATF), DOM inspectors (6), Traffic Sniffers (4), etc. All numbers are rough estimates – status Sept 2006 © Copyright 2006, IBM Corporation 10
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Emerging Internet Technologies AJAX Toolkit Framework Components Eclipse Plugins Personalities DOM Inspector JavaScript Syntax Java Script And JavaScript Validator Debugger Personality Builder Console Rhino JSLint Rico Zimbra AJAX “X” Embedded Mozilla Browser Personality Personality Personality Rico Zimbra AJAX “X” Personality Common Libraries Mozilla Eclipse WebTools XULRunner & JavaConnect 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 Builder JavaScript Editor JavaScript Debugger Embedded Mozilla Browser DOM Inspector / JavaScript Console Integrated Deployment • J2EE / JSP • Apache / PHP © Copyright 2006, IBM Corporation 14
  • 15. Emerging Internet Technologies Zimbra - What is being proposed for contribution Ajax Runtime Toolkit — Kabuki Toolkit JavaScript 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 library HTML, 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.) © Copyright 2006, IBM Corporation 15
  • 16. Emerging Internet Technologies AJAX Toolkit Framework Components JavaScript Editor Batch and as-you-type syntax validation JavaScript Debugger Tight integration with Eclipse debug UI to provide flow control in Mozilla and the ability to examine JavaScript code and variables Embedded Mozilla Browser Access to Mozilla XPCOM DOM Inspector / JavaScript Console Mozilla tools integration for DHTML developers as Eclipse Views. Integrated Deployment J2EE / 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 Developers Deployment 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 © Copyright 2006, IBM Corporation 16
  • 17. ® 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
  • 18. Emerging Internet Technologies Open Ajax - Industry Collaboration This group will support the development of open Ajax technologies & tooling IBM is proposing to contribute a tooling framework & Eclipse plug-in for Ajax toolkits (Ajax Toolkit Framework) • “…toolkits can be supported in less than 30 minutes…” Zimbra is working with Apache on Kabuki - an Ajax toolkit; (Eclipse Ajax Toolkit Framework support included) Dojo - an open source JavaScript/Ajax toolkit that enables users to create rich, lightweight UIs; (Eclipse Ajax Toolkit Framework support included) Mozilla™ - IBM is proposing to contribute code to Mozilla™ to enable Eclipse developers to employ Mozilla™ & Mozilla's debugging capabilities within Eclipse Founded: Feb 1st 2006 © Copyright 2006, IBM Corporation Emerging Internet Technologies Recent OpenAjax Alliance activities Three workgroups set up: Marketing/Architecture Create group web site containing: Ajax Definitions, White Papers, Block-diagrams Interoperability Focus on ability to mix widgets from different Ajax toolkits Declarative Markup Focus on creation of a unified approach to UI Markups © Copyright 2006, IBM Corporation 18
  • 19. Emerging Internet Technologies OpenAjax Hub – addressing Ajax runtime interoperability Simple and lightweight JavaScript library Central facility for different Ajax toolkits to: prevent JavaScript and HTML/XML markup collisions and to provide appropriate bridging The four main interoperability issues initially addressed are : 1. JavaScript collision checking, 2. toolkit loading 3. markup mixing and 4. event management. OpenAjax Hub will consist of detailed specifications and open source JavaScript code. © Copyright 2006, IBM Corporation Emerging Internet Technologies OpenAjax Alliance has grown > 50 members Next Face-to-face meeting early October 2006 in Silicon Valley © Copyright 2006, IBM Corporation 19
  • 20. Emerging Internet Technologies Summary – OpenAjax Alliance Key industry leaders are collaborating to insure the success of Ajax across Operating systems Browsers Languages Greater Open & Closed Source Community is working to create integrated Ajax Runtimes and Tooling targeting Web “design center” — Augmenting existing HTML with Ajax JavaScript “design center” — Full OO GUIs in Ajax “Mash-ups” of traditional and Ajax Web Uis Web Site – Web Site - http://www.openajaxalliance For information about the alliance, including how to join, contact: Jon Ferraiolo jferrai@us.ibm.com © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Prototype for a web shop Ajax showcase © Copyright 2006, IBM Corporation 20
  • 21. 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
  • 22. 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
  • 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 © Copyright 2006, IBM Corporation Shop-Demo Emerging Internet Technologies – Motivation – Ajax – Einsatzmöglichkeiten – Architektur – Ergebnis – Diskussion © Copyright 2006, IBM Corporation 23
  • 24. 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
  • 25. 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
  • 26. Emerging Internet Technologies Code example: configuration © Copyright 2006, IBM Corporation Emerging Internet Technologies Code example: AjaxTaskCommand © Copyright 2006, IBM Corporation 26
  • 27. 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
  • 28. 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
  • 29. Emerging Internet Technologies Study on performance for German ‘business hub’ appl Do you have statistical data on user behavior ? Zeitverhalten bei Klicks 45 40 35 30 Sekunden 25 Java-Applet 20 JavaScript-Baum 15 10 5 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Klicks © Copyright 2006, IBM Corporation Emerging Internet Technologies Example of ‘autocomplete’ © Copyright 2006, IBM Corporation 29
  • 30. 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
  • 31. Emerging Internet Technologies SNAP – results preview © Copyright 2006, IBM Corporation ® Emerging Internet Technologies Getting started and enterprise considerations © Copyright 2006, IBM Corporation 31
  • 32. 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
  • 33. 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 Internet Start experimenting Decide on JavaScript strategy Tooling (debugging) Available libraries Performance (footprint, startup) Evaluate existing toolkits Commercial 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 © Copyright 2006, IBM Corporation 33
  • 34. 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 background Has many widgets - more than one can use, but ugly to modify Is 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 Toolkit YUI Rico Dojo Zimbra Browser Compatibility IE5, FF ,NS6 IE 5.5, FF, IE 5.5, FF 1.0, FF 1.0, Safari, Camino /Mac Safari, Opera IE5.5, Camino/Mac Size – of all sw + 2(10)MB 135kb / 2.5(10)MB 4.1MB documentation / demo Enabled debugging Y N Y Y Maturity and importance of 10 5 10 5 the community Ability to work with in-house framework (Open source MVC framework – extension of struts) Richness of documentation – D10 E10 D1 E5 D5 E10 D5 E5 Documentation / Examples Ease of use 5 1 10 5 Functional report weight / richness Licensing BSD Apache 2.0 academic free MPL or Apache license 2.1 or BSD © Copyright 2006, IBM Corporation 34
  • 35. Emerging Internet Technologies Beyond the Hype: This is an emerging pattern Difficulties with JavaScript Browser inconsistencies Poor tool support for JavaScript and CSS Lack of established programming practices and design patterns Skillset: Web Developers != Java Programmers != COBOL Programmers UI Issues Back button doesn’t work as expected Bookmarking doesn’t work Accessibility & Internationalization Performance Issues Latency bigger problem when making multiple requests Increased load on browsers Security Issues Doesn’t work across domains © Copyright 2006, IBM Corporation Emerging Internet Technologies JavaScript considerations Co-existence of libraries AjaxHub from OpenAjax Alliance © Copyright 2006, IBM Corporation 35
  • 36. 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
  • 37. Emerging Internet Technologies What are the issues with Ajax (accessibility) ? AJAX relies on JavaScript Most graphical browsers support JavaScript but could be an issue for mobile devices or text-only browsers. World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 1.0 require Web sites to function with JavaScript turned off ! WCAG 2.0, - still under development has removed the restriction on scripting-as long as the site remains accessible © Copyright 2006, IBM Corporation Emerging Internet Technologies Accessibility – What is IBM doing ? IBM has contributed to the W3C Protocols and Formats group technology that allows the creation of fully accessible Web components. Two emerging standards from this roadmap States and Adaptable Properties Module Role Taxonomy for Accessible Adaptable Applications are designed to address the accessibility of RIAs IBM will be providing expertise to integrate Dynamic Web Accessibility (from W3C) into the Dojo Toolkit widget set. Dynamic Web Accessibility provides a mechanism for creating RIAs that are: fully accessible via the keyboard and when using assistive technologies • E.g. screen readers and screen magnifiers. © Copyright 2006, IBM Corporation 37
  • 38. 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
  • 39. Emerging Internet Technologies Recommendations KISS – Keep It Simple and Safe • Start slowly • Don't rely on new skills for critical tasks Enhance an existing application Maintain standard MVC design • Keep the “M” and “C” on the server • Extend the “V” to Server and Client! • Don't put too much controller logic in JavaScript Have FUN • People get excited about making the browser dance • This is cool stuff! © Copyright 2006, IBM Corporation Emerging Internet Technologies Thank You! anton_fricko@at.ibm.com © Copyright 2006, IBM Corporation 39
  • 40. Emerging Internet Technologies References Toolkits • Dojo http://dojotoolkit.org/ • Rico http://openrico.org/ • DWR http://getahead.ltd.uk/dwr/ • script.aculo.us http://script.aculo.us/ • Behaviour http://www.ripcord.co.nz/behaviour/ • Zimbra http://www.zimbra.com/ AJAX Toolkit Framework • http://www.alphaworks.ibm.com/tech/ajaxtk • http://www.eclipse.org/proposals/atf/ © Copyright 2006, IBM Corporation Emerging Internet Technologies Reference, cont. AJAX Design Patterns • AJAX Patterns http://ajaxpatterns.org/ Examples and Tutorials • http://www.clearnova.com/ajax/index.html • http://www.yourhtmlsource.com/javascript/ajax.html • http://en.wikibooks.org/wiki/Programming:AJAX Books • AJAX in Action, Manning • Dynamic HTML, The Definitive Guide, O'Reilly • JavaScript, The Definitive Guide, O'Reilly © Copyright 2006, IBM Corporation 40
  • 41. 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