AJAX in the Real World Presented by Edwin Aoki AJAX Experience West July 25, 2007

Rich Web Applications - Then 1997 2002

Common Headaches with AJAX Performance Accessibility Image courtesy W3C: http://www.w3.org/WAI/guid-tech.html

Websuite - 2007

Video browse was invisible to search engines

Two different versions - high and low fidelity beta.webmail.aol.com “ classic” mail

A Better Solution: Progressive Enhancement Separating Content, Styles, and Behaviors Back to the core principles of HTML

Separating Content, Styles, and Behaviors

Back to the core principles of HTML

Principles of Progressive Enhancement (PE) XHTML Semantic Markup Microformats Structured Content CSS Styled Simple View Javascript CSS Flash Complex View

Include text along with images and Flash <div id=&quot;summer-movies&quot;> <embed src=&quot;summer-movies-header.swf&quot; width=&quot;756&quot; height=&quot;119&quot; /> <h1>100 days of Summer Movies</h1> <h2>Film Geek Madness, Served Fresh Daily</h2> <ul> <li><a href=&quot;/blog/&quot;>Summer Movies Blog</a></li> <li><a href=&quot;/pics-quizes/&quot;>Pics and Quizzes</a></li> <li><a href=&quot;/release-list/&quot;>Release List</a></li> <li><a href=&quot;/weekly-smackdown/&quot;>Weekly Smackdown</a></li> </ul> </div> <script> function flace(id,w,h){ var o = document.getElementById(id); o.style.width = w+'px'; o.style.height = h+'px'; o.style.overflow = 'hidden'; } flace(&quot;summer-movies&quot;, 756, 119&quot;); </script>

<div id=&quot;summer-movies&quot;>

<embed src=&quot;summer-movies-header.swf&quot; width=&quot;756&quot; height=&quot;119&quot; />

<h1>100 days of Summer Movies</h1>

<h2>Film Geek Madness, Served Fresh Daily</h2>

<ul>

<li><a href=&quot;/blog/&quot;>Summer Movies Blog</a></li>

<li><a href=&quot;/pics-quizes/&quot;>Pics and Quizzes</a></li>

<li><a href=&quot;/release-list/&quot;>Release List</a></li>

<li><a href=&quot;/weekly-smackdown/&quot;>Weekly Smackdown</a></li>

</ul>

</div>

<script>

function flace(id,w,h){

var o = document.getElementById(id);

o.style.width = w+'px';

o.style.height = h+'px';

o.style.overflow = 'hidden';

}

flace(&quot;summer-movies&quot;, 756, 119&quot;);

</script>

Basic/HTML View Shown in non-JS/disabled JS cases Shown in non-CSS/disabled CSS cases

Shown in non-JS/disabled JS cases

Shown in non-CSS/disabled CSS cases

Simple Styled View CSS Supported and Enabled No Javascript Accessible, printable Viewable on simple mobile devices

CSS Supported and Enabled

No Javascript

Accessible, printable

Viewable on simple mobile devices

Complex/Interactive View CSS Supported and Enabled JS Supported and Enabled Provides animation, interaction, and advanced functionality Creates or destroys HTML elements as needed using DOM manipulation

CSS Supported and Enabled

JS Supported and Enabled

Provides animation, interaction, and advanced functionality

Creates or destroys HTML elements as needed using DOM manipulation

Moviefone Unscripted http://movies.aol.com/unscripted

http://movies.aol.com/unscripted

Using Iframes and AJAX to hide content

Caching and Connection Management Caching Use a CDN Dojo users can use the version on our CDN Use proper headers Expires and max-age are redundant Use in conjunction with Connection Management CNAME domains to increase the number of allowable simultaneous connections

Caching

Use a CDN

Dojo users can use the version on our CDN

Use proper headers

Expires and max-age are redundant

Use in conjunction with

Connection Management

CNAME domains to increase the number of allowable simultaneous connections

Content on Demand (CoD) Demo http://dev.aol.com/presentations/COD/content-on-demand.html

http://dev.aol.com/presentations/COD/content-on-demand.html

Server Side Page Assembly in MyAOL http://my.aol.com/…./horoscope/horoscope.css http://my.aol.com/…../horoscope/horoscope.js

Building out the Toolset for AJAX apps Identity Management Data Storage Preferences Large data blobs Connectivity and Data Transfer Security Metrics and Measurement Open Authentication XDrive, Gdata, S3 Web AIM

Identity Management

Data Storage

Preferences

Large data blobs

Connectivity and Data Transfer

Security

Metrics and Measurement

AJAX Everywhere Widget/Module Environments Mac OS X Vista MyAOL, Netvibes, iGoogle, PageFlakes Game Consoles Wii (Opera) Mobile Opera Mobile and Opera Mini Symbian S60 Pocket IE Blackjack Motorola Q T-Mobile DASH Image Courtesy of Apple

Widget/Module Environments

Mac OS X

Vista

MyAOL, Netvibes, iGoogle, PageFlakes

Game Consoles

Wii (Opera)

Mobile

Opera Mobile and Opera Mini

Symbian S60

Pocket IE

Blackjack

Motorola Q

T-Mobile DASH

TinyBuddy Sample - Safari Edition Run it from http://x.aim.com/ ty Source code: http://x.aim.com/ty_source Built entirely using public APIs Web IM API Open Authentication

Run it from http://x.aim.com/ ty

Source code: http://x.aim.com/ty_source

Built entirely using public APIs

Web IM API

Open Authentication

Thank You Edwin Aoki  [email_address] View our APIs at http://dev.aol.com/ Questions? A special thank you to David Artz, Carson Evans, Owais Malik, James Burke, David McCormick, and all of the web technologists at AOL for data, demos, and images used in this presentation

Edwin Aoki

 [email_address]

View our APIs at http://dev.aol.com/

Questions?