Ajax Abuse Todcon2008


Published on

Presentation at TODCon 08 that takes about AJAX usage. As with any slides this doesn't tell the whole story... This is essentially a case for progressive enhancement without actually saying it.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Ajax Abuse Todcon2008

    1. 1. AJAX Abuse The when and why to use JavaScript.
    2. 2. Definitions: AJAX, DOM Scripting, Web Application <ul><li>What is AJAX? </li></ul><ul><li>What is DOM Scripting? </li></ul><ul><li>Web page or application? </li></ul>
    3. 3. Asynchronous JavaScript and XML (AJAX) <ul><li>Used for creating interactive web applications </li></ul><ul><li>Uses XMLHttpRequest or Remote Scripting to get ‘data’ not just XML </li></ul><ul><li>Cross-platform , no plug-ins required, speeds things up , makes your apps more ‘usable’ </li></ul><ul><li>Source: http://en.wikipedia.org/wiki/AJAX </li></ul>
    4. 4. Document Object Model Scripting (DOM Scripting) <ul><li>Programmatically accessing the Document Object Model </li></ul><ul><li>Uses a scripting language and valid markup </li></ul><ul><li>Is browser independent </li></ul><ul><li>Degrades gracefully </li></ul><ul><li>Source: http://en.wikipedia.org/wiki/DOM_scripting </li></ul>
    5. 5. Web Application and Web Page <ul><li>Web Applications are reliant on the Web Browser to render the application executable. </li></ul><ul><li>Web Applications have read/write access to data </li></ul><ul><li>Web Page is a ‘static’ presentation of data </li></ul>
    6. 6. Symptoms of abuse: typical <ul><li>Application solves a problem </li></ul><ul><li>Attractive design </li></ul><ul><li>User interface is smart and sexy </li></ul><ul><li>It takes around 1 min to load all the JavaScript, rendered HTML jumps around, and search engines can’t find relevant information </li></ul>
    7. 7. Symptoms of abuse that may result in app death <ul><li>Features present because they can be there </li></ul><ul><li>Problem not clearly defined </li></ul><ul><li>Entire application is JavaScript </li></ul><ul><li>Browser support limited to latest browsers and high resolution </li></ul>
    8. 8. Application design decisions guided by technology over desired outcomes
    9. 9. Basics of a web application
    10. 10. Basic Web App
    11. 11. Basic Web App: Ajax
    12. 12. What you can do with AJAX <ul><li>Replace the server side interactions that would normally require a page refresh </li></ul><ul><li>Reduce number of ‘pages’ required in the application </li></ul><ul><li>Manage the ‘back button’ and maintain state </li></ul><ul><li>But… why would you do this and how does it influence the user experience? </li></ul>
    13. 13. Well intentioned enhancement of the experience over meeting actual user requirements .
    14. 14. Basic Web App: Enriched
    15. 15. Basic Web App: Enriched
    16. 16. Use Ajax to enhance your application <ul><li>Auto-save form input </li></ul><ul><li>Live data validation against the server </li></ul><ul><li>Search features </li></ul><ul><li>Social interactions </li></ul><ul><li>…or anything that benefits from immediate feedback from the server . </li></ul>
    17. 17. Using JavaScript is not easy no matter what tool makers or .js libraries claim.
    18. 18. Tools: Applications <ul><li>Dreamweaver CS3 </li></ul><ul><ul><li>Good for Adobe Spry Library </li></ul></ul><ul><ul><li>Effective learning tool </li></ul></ul><ul><li>Aptana </li></ul><ul><ul><li>Powerful IDE for end to end JavaScript development </li></ul></ul><ul><ul><li>Jaxer moves JavaScript into server side realm </li></ul></ul><ul><ul><li>Good for hardcore JavaScript coders </li></ul></ul><ul><li>Spket IDE </li></ul><ul><ul><li>Similar to Aptana and a dozen more like it… </li></ul></ul>
    19. 19. Tools: Libraries <ul><li>jQuery </li></ul><ul><ul><li>http://jquery.com/ </li></ul></ul><ul><li>YahooUI </li></ul><ul><ul><li>http://developer.yahoo.com/yui/ </li></ul></ul><ul><li>Google Web Toolkit </li></ul><ul><ul><li>http://code.google.com/webtoolkit/ </li></ul></ul><ul><li>Adobe Spry </li></ul><ul><ul><li>http://labs.adobe.com/technologies/spry/ </li></ul></ul>
    20. 20. Tools: Web browsers <ul><li>Firefox </li></ul><ul><ul><li>Firebug extension </li></ul></ul><ul><li>Internet Explorer </li></ul><ul><ul><li>DebugBar </li></ul></ul>
    21. 21. AJAX abuse is subjective.
    22. 22. Why you may not care <ul><li>People log into your application anyway so search engines are useless </li></ul><ul><li>Everyone in our user group has broadband </li></ul><ul><li>Computers are faster </li></ul><ul><li>IE 6 is dead </li></ul>
    23. 23. Why you should care <ul><li>Browser updates can make lazy JavaScript a nightmare (IE 6 to 7) </li></ul><ul><li>People have video streaming, audio streaming, gaming, wireless issues, eating bandwidth and processor </li></ul><ul><li>No one cares about a slick interface if there is no value to them </li></ul>
    24. 24. How can you avoid it? <ul><li>Understand the limits of the technology </li></ul><ul><li>Leverage best practices in web application development </li></ul><ul><li>Compliment your UI with JavaScript, don’t base your UI on it </li></ul><ul><li>Utilize libraries wherever practical </li></ul><ul><li>Hire js experts for complex projects </li></ul>
    25. 25. About me <ul><li>Jesse Rodgers </li></ul><ul><li>Member of the Special Projects Group at the University of Waterloo </li></ul><ul><li>Blog: http://whoyoucallingajesse.com </li></ul><ul><li>Email: [email_address] </li></ul>