AJAX in the real world

AJAX in the Real WorldPresented by Edwin AokiAJAX Experience WestJuly 25, 2007

AJAX in the Real World @ AJAX Experience 2

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


Principles of Progressive Enhancement (PE)

XHTML

SemanticMarkup

Microformats

StructuredContent

CSS

StyledSimple View

Javascript

CSS

Flash

ComplexView


Include text along with images and Flash

<div id="summer-movies">

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

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

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

<ul>

<li><a href="/blog/">Summer Movies Blog</a></li>

<li><a href="/pics-quizes/">Pics and Quizzes</a></li>

<li><a href="/release-list/">Release List</a></li>

<li><a href="/weekly-smackdown/">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("summer-movies", 756, 119");

</script>


Basic/HTML View

•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


Complex/Interactive View

•CSS Supported and Enabled

•JS Supported and Enabled• Provides animation,

interaction, and advancedfunctionality

• Creates or destroys HTMLelements as needed usingDOM manipulation


Moviefone 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


Content on Demand (CoD) Demo

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


Server Side Page Assembly in MyAOL

http://my.aol.com/…./horoscope/horoscope.csshttp://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


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


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


Thank You

Edwin Aoki

[email protected]

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

AJAX in the real world

Technology

Transcript of AJAX in the real world