Your SlideShare is downloading. ×
AJAX in the Real World
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AJAX in the Real World

234
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
234
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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. AJAX in the Real World Presented by Edwin Aoki AJAX Experience West July 25, 2007
  • 2. Rich Web Applications - Then 1997 2002
  • 3. Common Headaches with AJAX Performance Accessibility Image courtesy W3C: http://www.w3.org/WAI/guid-tech.html
  • 4. Websuite - 2007
  • 5. Video browse was invisible to search engines
  • 6. Two different versions - high and low fidelity beta.webmail.aol.com “ classic” mail
  • 7. A Better Solution: Progressive Enhancement
    • Separating Content, Styles, and Behaviors
      • Back to the core principles of HTML
  • 8. Principles of Progressive Enhancement (PE) XHTML Semantic Markup Microformats Structured Content CSS Styled Simple View Javascript CSS Flash Complex View
  • 9. 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>
  • 10. Basic/HTML View
    • Shown in non-JS/disabled JS cases
    • Shown in non-CSS/disabled CSS cases
  • 11. Simple Styled View
    • CSS Supported and Enabled
    • No Javascript
    • Accessible, printable
    • Viewable on simple mobile devices
  • 12. 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
  • 13. Moviefone Unscripted
    • http://movies.aol.com/unscripted
  • 14. Using Iframes and AJAX to hide content
  • 15. 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
  • 16. Content on Demand (CoD) Demo
    • http://dev.aol.com/presentations/COD/content-on-demand.html
  • 17. Server Side Page Assembly in MyAOL http://my.aol.com/…./horoscope/horoscope.css http://my.aol.com/…../horoscope/horoscope.js
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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