AJAX Abuse The when and why to use JavaScript.

Definitions: AJAX, DOM Scripting, Web Application What is AJAX? What is DOM Scripting? Web page or application?

What is AJAX?

What is DOM Scripting?

Web page or application?

Asynchronous JavaScript and XML (AJAX) Used for creating interactive web applications Uses XMLHttpRequest or Remote Scripting to get ‘data’ not just XML Cross-platform , no plug-ins required, speeds things up , makes your apps more ‘usable’ Source: http://en.wikipedia.org/wiki/AJAX

Used for creating interactive web applications

Uses XMLHttpRequest or Remote Scripting to get ‘data’ not just XML

Cross-platform , no plug-ins required, speeds things up , makes your apps more ‘usable’

Source: http://en.wikipedia.org/wiki/AJAX

Document Object Model Scripting (DOM Scripting) Programmatically accessing the Document Object Model Uses a scripting language and valid markup Is browser independent Degrades gracefully Source: http://en.wikipedia.org/wiki/DOM_scripting

Programmatically accessing the Document Object Model

Uses a scripting language and valid markup

Is browser independent

Degrades gracefully

Source: http://en.wikipedia.org/wiki/DOM_scripting

Web Application and Web Page Web Applications are reliant on the Web Browser to render the application executable. Web Applications have read/write access to data Web Page is a ‘static’ presentation of data

Web Applications are reliant on the Web Browser to render the application executable.

Web Applications have read/write access to data

Web Page is a ‘static’ presentation of data

Symptoms of abuse: typical Application solves a problem Attractive design User interface is smart and sexy It takes around 1 min to load all the JavaScript, rendered HTML jumps around, and search engines can’t find relevant information

Application solves a problem

Attractive design

User interface is smart and sexy

It takes around 1 min to load all the JavaScript, rendered HTML jumps around, and search engines can’t find relevant information

Symptoms of abuse that may result in app death Features present because they can be there Problem not clearly defined Entire application is JavaScript Browser support limited to latest browsers and high resolution

Features present because they can be there

Problem not clearly defined

Entire application is JavaScript

Browser support limited to latest browsers and high resolution

Application design decisions guided by technology over desired outcomes

Basics of a web application

Basic Web App

Basic Web App: Ajax

What you can do with AJAX Replace the server side interactions that would normally require a page refresh Reduce number of ‘pages’ required in the application Manage the ‘back button’ and maintain state But… why would you do this and how does it influence the user experience?

Replace the server side interactions that would normally require a page refresh

Reduce number of ‘pages’ required in the application

Manage the ‘back button’ and maintain state

But… why would you do this and how does it influence the user experience?

Well intentioned enhancement of the experience over meeting actual user requirements .

Basic Web App: Enriched

Basic Web App: Enriched

Use Ajax to enhance your application Auto-save form input Live data validation against the server Search features Social interactions …or anything that benefits from immediate feedback from the server .

Auto-save form input

Live data validation against the server

Search features

Social interactions

…or anything that benefits from immediate feedback from the server .

Using JavaScript is not easy no matter what tool makers or .js libraries claim.

Tools: Applications Dreamweaver CS3 Good for Adobe Spry Library Effective learning tool Aptana Powerful IDE for end to end JavaScript development Jaxer moves JavaScript into server side realm Good for hardcore JavaScript coders Spket IDE Similar to Aptana and a dozen more like it…

Dreamweaver CS3

Good for Adobe Spry Library

Effective learning tool

Aptana

Powerful IDE for end to end JavaScript development

Jaxer moves JavaScript into server side realm

Good for hardcore JavaScript coders

Spket IDE

Similar to Aptana and a dozen more like it…

Tools: Libraries jQuery http://jquery.com/ YahooUI http://developer.yahoo.com/yui/ Google Web Toolkit http://code.google.com/webtoolkit/ Adobe Spry http://labs.adobe.com/technologies/spry/

jQuery

http://jquery.com/

YahooUI

http://developer.yahoo.com/yui/

Google Web Toolkit

http://code.google.com/webtoolkit/

Adobe Spry

http://labs.adobe.com/technologies/spry/

Tools: Web browsers Firefox Firebug extension Internet Explorer DebugBar

Firefox

Firebug extension

Internet Explorer

DebugBar

AJAX abuse is subjective.

Why you may not care People log into your application anyway so search engines are useless Everyone in our user group has broadband Computers are faster IE 6 is dead

People log into your application anyway so search engines are useless

Everyone in our user group has broadband

Computers are faster

IE 6 is dead

Why you should care Browser updates can make lazy JavaScript a nightmare (IE 6 to 7) People have video streaming, audio streaming, gaming, wireless issues, eating bandwidth and processor No one cares about a slick interface if there is no value to them

Browser updates can make lazy JavaScript a nightmare (IE 6 to 7)

People have video streaming, audio streaming, gaming, wireless issues, eating bandwidth and processor

No one cares about a slick interface if there is no value to them

How can you avoid it? Understand the limits of the technology Leverage best practices in web application development Compliment your UI with JavaScript, don’t base your UI on it Utilize libraries wherever practical Hire js experts for complex projects

Understand the limits of the technology

Leverage best practices in web application development

Compliment your UI with JavaScript, don’t base your UI on it

Utilize libraries wherever practical

Hire js experts for complex projects

About me Jesse Rodgers Member of the Special Projects Group at the University of Waterloo Blog: http://whoyoucallingajesse.com Email: [email_address]

Jesse Rodgers

Member of the Special Projects Group at the University of Waterloo

Blog: http://whoyoucallingajesse.com

Email: [email_address]