Ajax Abuse Todcon2008

Slideshow Transcript

1. Slide 1: AJAX Abuse The when and why to use JavaScript.
2. Slide 2: Definitions: AJAX, DOM Scripting, Web Application  What is AJAX?  What is DOM Scripting?  Web page or application?
3. Slide 3: 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
4. Slide 4: 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
5. Slide 5: 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
6. Slide 6: 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
7. Slide 7: 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
8. Slide 8: Application design decisions guided by technology over desired outcomes
9. Slide 9: Basics of a web application
10. Slide 10: Basic Web App
11. Slide 11: Basic Web App: Ajax
12. Slide 12: 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?
13. Slide 13: Well intentioned enhancement of the experience over meeting actual user requirements.
14. Slide 14: Basic Web App: Enriched
15. Slide 15: Basic Web App: Enriched
16. Slide 16: 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.
17. Slide 17: Using JavaScript is not easy no matter what tool makers or .js libraries claim.
18. Slide 18: 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…
19. Slide 19: 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/
20. Slide 20: Tools: Web browsers  Firefox  Firebug extension  Internet Explorer  DebugBar
21. Slide 21: AJAX abuse is subjective.
22. Slide 22: 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
23. Slide 23: 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
24. Slide 24: 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
25. Slide 25: About me Jesse Rodgers Member of the Special Projects Group at the University of Waterloo Blog: http://whoyoucallingajesse.com Email: jrrodgers@gmail.com