ajax copyright © 2006 accenture. all rights reserved. accenture, its logo, and accenture high...

AJAX

Copyright © 2006 Accenture. All rights reserved. Accenture, its logo, and Accenture High Performance Delivered are trademarks of Accenture.

Yulin Zhao, Farah Charania

April 12, 2006

© 2006 Accenture. All rights reserved. 2

AGENDA

– Introduction and background

– AJAX deep dive

– AJAX patterns

– AJAX frameworks & tools

– Summary

– Q & A


INTRODUCTION AND BACKGROUND

• The Classic Web Application:

• A call and response interaction model of the Web

• User clicks browser waits for a response from the server browser receives the response and displays the response User can view the information. And so on and so forth.

Meanwhile…

• The Classic Web application’s light weighted and simple solution, makes to create a GAP between experiences the web can provide vs. a more rich desktop application.

• This gives rise to technologies such as AJAX where the USER EXPERIENCE drives the functionality.



• AJAX – Asynchronous JavaScript + XML

• Concept of a rich client – better user experience

• i.e. the flexibility of the web and the richness of a desktop application.

• Principles of AJAX

• The browser hosts an application, not content

• The server delivers data, not content

• User interaction with the application can be fluid and continuous

• AJAX essentially leads us to look at web pages and applications in a whole new way.



• Let’s compare:



• Other Alternatives to AJAX

• Macromedia Flash-based solutions:

• Grounded in playing interactive movies

• Flash movies are streamed and played while downloading

• Programmed via ActionScript

• Though generally used for interactive games, Flash applications can also be used for business purposes with some support for input form widgets.

• The Flash web browser plug-in must be installed for its applications to work.



• Who is Using AJAX

• Major Google Products

• Google Suggest

• Gmail

• Google Maps

• Flickr

• A9.com (Amazon’s search engine)


AGENDA


– AJAX deep dive

– AJAX patterns


– Summary

– Q & A


AJAX DEEP DIVE

• AJAX deep dive

• Paradigm Shift

• Basic AJAX programming flow

• Live demo & code analysis – validation (via web conference)

• Key AJAX elements

• AJAX and Web Services

• Live demo & code analysis – AJAX/REST

• Security Constraint

• Other Constraints and Workarounds

• Constraints without Workarounds

• Performance Considerations


AJAX DEEP DIVE

• Paradigm Shift

• Old paradigm: whole page reload needed for partial change

• Not efficient

• UI level coupling

• Slow


AJAX DEEP DIVE

• Paradigm Shift

• New paradigm: only the changing part is loaded (extreme: “One Page Interface”)

• Efficient

• UI level decoupled

• Faster


AJAX DEEP DIVE

• Basic AJAX programming flow

1. Event triggers XMLHttpRequest to be created and callback

function registered.

2. The request is sent to server asynchronously

4. The response is received and callback function is executed to process response

and manipulate HTML contents (generate, delete or modify etc.)

3. User continues to proceed


AJAX DEEP DIVE

• Live demo & code analysis – validation (via web conference)

• Event: Onkeyup

• A validation request / key stroke

• DIV – innerHTML

• Convenience element to show/hide text

• What does ‘asynchronous’ imply in the sample code?

• Anything suspicious?


AJAX DEEP DIVE


• XMLHttpRequest

• DOM

• XML

• CSS


AJAX DEEP DIVE


• XMLHttpRequest (ActiveXObject for IE)

• Key attributes

• onreadystatechange = <callback function>

• readystate

• 0: uninitialized before calling open(); 1: set up, not sent, before calling sent();

• 2: sent, in progress, can get header; 3: :sent, data partially available

• 4: response ready to use

• responseText – String (usually used with innerHTML)

• responseXML – XML document object

• Key methods

• open (“<METHOD>”, “URL”, <async?> )

• <METHOD> :Get / Put / Head etc.

• Send(“contents”)


AJAX DEEP DIVE


• DOM

• Processing XML response

• responseXML.getElementsByTagName(name)

• Content manipulation

• document.getElementById(id)

• document.createElement(tagName)

• <element>.appendChild(childNode)

• <element>.removeChild(childNode)

• <element>.hasChildnodes()

• <element>.style.cssText


AJAX DEEP DIVE

• Live demo & code – validation (review)

• What does ‘asynchronous’ imply in this sample?

• Anything suspicious?


AJAX DEEP DIVE

• AJAX and Web Services

• REST (Representational State Transfer)

• Underlying architectural model of the Internet

• Enables a simplified web services architecture using HTTP

• Using Ajax and REST implies the following:

• Requested resource is defined as a URL

• Response data is transferred via XML.

• The data is retrieved from the HTTP server using HTTP GET

• Web Services Gateway

• Used to walk around JavaScript security constraint


AJAX DEEP DIVE

• Live demo & code analysis – AJAX/REST

• Web search using Yahoo! Web Services

• Delegate to Web Services Gateway to walk around security constraint

• Have the gateway request the service and pass the response back

• Use JavaScript DOM methods to generate contents


AJAX DEEP DIVE

• Security Constraints

• AJAX gives rise to huge amounts of “mobile code” running on a user’s machine -> security risk

• How to address this issue:

• AJAX applications cannot read or write to the local file system.

• Usage of “server of origin” policy:

• an AJAX application cannot connect to any web domains other than the one from which it originated (mostly)

• It is possible to connect to other domains and execute code, however the scripts from the two domains cannot interact with each other.

• If there is a legitimate need to invoke a remote service on another server, a Proxy on the “server of origin” should be used to gain access to the other server.


AJAX DEEP DIVE

• Security Constraints - Restricting Access to Private Data

• HTTPS – recommended industry standard, but may be too expensive.

• Filter HTTP requests

• Use HTTP sessions – create a token when the user logs in and check for this token with each subsequent request.

• Use encrypted HTTP headers – add an additional header to the HTTP request and check for its presence and an encrypted value within the header to a key on the server.

• The key could initially be sent over HTTPS from the server.


AJAX DEEP DIVE

• Other Constraints and Workarounds

• Browser behavior – AJAX applications may break the expected behavior of a browser’s back button.

• User expectation – to return to some previous state when the back button is used.

• Workaround – IFRAMEs – populates the history when the back button is pressed (ex. Google Maps).

• User expectation – to be able to bookmark a certain state in an application which may be difficult.

• Workaround – URL fragmented identifiers to keep track of state with JavaScript


AJAX DEEP DIVE

• Constraints without Workarounds

• JavaScript must be enabled on a user’s browser.

• JavaScript functionality must be rigorously tested in multiple browsers to work out all the quirks.

• Accessibility Constraints for screen-reader based browsers.


AJAX DEEP DIVE

• Performance Considerations

• Initial performance hit when user accesses the application for the first time.

• Subsequent user interactions are a lot faster

• Understand the kind of audience, i.e. the browser your user will be using and tune the AJAX application for those browsers.

• Asynchronous calls to the server could result in more hung threads.


AGENDA


– AJAX deep dive

– AJAX patterns


– Summary

– Q & A


AJAX PATTERNS

• Architectural Patterns

• Local Event-Handling – The application should ensure that most events are handled locally in keeping with a responsive user experience.

• Local caching – Since many events require updated data from the server, maintain a local cache of information.

• Predictive Download – goes hand in hand with local caching. Here we should anticipate what the user is “likely” to do, and pre-load the required data into the local cache.

• Submission throttling – instead of submitting each JavaScript event, store events in a buffer and frequently evaluate if anything should be submitted.

• Distinct URL – In order to let users bookmark state, write distinct URLs whenever the input will cause a fresh new browser state:

• Ex. Google Maps has a “Link to this Page” link.


AJAX PATTERNS

• Display Patterns

• Rich CSS – to minimize download size, use CSS to give a graphical experience without having to download images.

• Embedded Text – ensure that the user is able to cut-and-paste text by using Rich CSS to integrate text into graphics.

• Age Display – Since much of the information stays on the client side, it is imperative for the user to see an indication of stale information. Indicate the age of any critical information.

• Synchronization status – When using Submission Throttling, provide a way for the user to indicate what’s synchronized and what is pending.


AGENDA


– AJAX deep dive

– AJAX patterns


– Summary

– Q & A


AJAX FRAMEWORKS & TOOLS

• Frameworks

• Why need frameworks (specifically for AJAX)?

• Browser incompatibilities

• Maintaining large pieces of common JavaScript code

• Lack of standard (reusable) component

• Lack of development tools

• Many AJAX frameworks available

• Atlas • AjaxFaces (commercial*) • Backbase (commercial)

• “Flash/JavaScript Integration Kit”

• Google AJAXSLT • Java Studio Creator 2

• Dojo • Rico • SACK



• Frameworks

• Backbase

• Features:

• Formalized UI declaration language: BXML

• Single page interface (no page flipping)

• Cross browser / cross platform

• Based on W3C

• Plug-ins available to Eclipse, Visual Studio & Dreamweaver

• …

• Expensive $1000s/CPU

• Other: listed Accenture as Consulting Partner



• Frameworks

• Backbase

• How it works:

• Backbase presentation client (BPC) loaded at page start up (boot.js)

• BPC interprets BXML tags and transforms them into DOM structure



• Frameworks

• Java Studio Creator 2

• BluePrints AJAX Components

AJAX & J2EE’s solution for auto complete

• Auto-Complete Text Field

• Progress Bar • Map Viewer • Select Value Text Field



• Frameworks

• Atlas (Microsoft)

• Integrated with ASP .NET 2.0

• Not restricted to .NET – client centric

• Showcase: http://www.squeet.com/

• Free

• Google AJAXSLT

• Implementation of XSL-T in JavaScript

• Fetch XMLs from server and transfer them into HTML

• Flash/JavaScript Integration Kit

• Access Flash using Ajax



• Frameworks

• Dojo - Small, stable, and deals with back and forward button issue

• Rico – drag & drop

• SACK – small wrapper / very light-weight

• many more…



• Tools

• JSDoc

• a tool written in Perl that generates javadoc-like documents from JavaScript with javadoc-like comments

• Firefox 1.5:

• HTML Validator, CSS Validator, DOM Inspector and more…

• JSLint

• JavaScript validator: www.jslint.com

• Obfuscation / compression tools

• Make JavaScript hard to copy

• Reduce network traffic

• MemTronic's HTML/JavaScript Cruncher-Compressor http://hometown.aol.de/_ht_a/memtronic/


AGENDA


– AJAX deep dive

– AJAX patterns

– AJAX frameworks & Tools

– Summary

– Q & A


REFERENCES

• Foundations of Ajax – Asleson, Schutta

• Ajax in Action - Dave Crane, Eric Pascarello with Darren James

• Ajax Patterns and Best Practices - Christian Gross

• Backbase Ajax Framework – Backbase

• Java One 2005 Web Conference - Sun

• “Why Ajax Matters Now” – Jesse James Garrett

• “Ajax: A new Approach to Web Applications” – Jesse James Garrett

• www.adaptivepath.com

ajax copyright © 2006 accenture. all rights reserved. accenture, its logo, and accenture high...

Documents

principles of ajax

continuous ajax

ajax deep diveparadigm

trademarks of accenture

web user

accenture high performance

web pages

flash web browser plugin