orcreatehappyusers
- 1. Thomas Fuchs Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces
- 2. Thomas Fuchs Or: Create Happy Users
- 3. Thomas Fuchs • wollzelle • Core team member of Ruby on Rails • script.aculo.us • mir.aculo.us
- 4. • Branding/Design/Web • fluxiom Digital Asset Management http://www.fluxiom.com • http://www.wollzelle.com/
- 5. Tools
- 6. JavaScript, as seen by the browser Source: http://www.pollux.franken.de/KNF/
- 7. JavaScript Frameworks make you…
- 10. …deal less with browser bugs…
- 11. …and ultimately stay happy.
- 13. …and not on browser bugs.
- 14. 1.5
- 16. Ajax
- 17. Basic Ajax calls (HTML snippets)
- 18. Ajax Forms
- 19. hot topic The of 2 006! Ajax behaviours Server-side JavaScript generation: Prototype automatically evaluates JavaScript when Content-type: text/javascript is set
- 20. Hooks for integration with UI enhancements (like activity indicators)
- 21. Extensions to built-in object types
- 23. Enumerables
- 25. $ and $$
- 27. Direct Element extensions
- 28. Prototype 1.4 vs Prototype 1.5
- 29. .update() .replace() .remove() .visible() .setStyle() .addClassName() (…and lots more)
- 30. Events (without cross-browser pain)
- 32. eat s heet! ch http://www.snook.ca/archives/000531.php
- 33. Of course, just think of it as magic. Sam Stephenson, author of Prototype
- 34. 1.6
- 35. Visual effects
- 36. Drag and Drop
- 37. s of c ode! 2 line
- 39. Real-time search Autocompleting Drag and Drop Inplace editor Slider
- 40. Plus some extras JavaScript unit testing, DOM Builder
- 42. Docs & Help • Wiki: http://wiki.script.aculo.us/ • Mailing list: http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs • IRC channel: #prototype on freenode.net
- 43. Add-ons
- 47. Visual effects Sliding panels and homegrown effects
- 48. Advanced engine for visual effects Time-based Complex effects easily possible
- 49. More than just „eye candy“ Visual feedback Loading times „feel shorter“ Can help move away from proprietary plugins
- 50. On board Often-used effects „Yellow Fade Technique“ Fade in and out Sliding panels Puff, Shake, etc.
- 54. at sh eet! che http://www.slash7.com/articles/2006/04/22/ scriptaculous-cheat-sheet-1
- 55. Do-it-yourself effects Very easy to do Automatically use all the features from the visual effects engine
- 56. Complete tutorial & demo code: http://www.thinkvitamin.com/features/ ajax/create-your-own-ajax-effects
- 57. Activity indicators Show what‘s going on
- 58. „There‘s something going on, wait a sec“ Revival of the animated GIF Both „per use“ and „global“ indicators possible
- 59. „Local“ indicator for a specific request, show/hide indicator image
- 60. „Global“ indicator for a all Ajax requests, appear/fade an indicator image
- 61. Need an indicator image? http://www.ajaxload.info/
- 63. Lessons learned from a year of Ajax
- 64. Not all Browsers are created equal.
- 65. CSS
- 66. CSS can eliminate or save on server accesses HTML sizes are reduced Be creative, CSS is extremely capable
- 68. DOM-API can be slow Firefox is the slowest (better in 1.5) Caching references in JavaScript vars .innerHTML is your friend Venkman profiling
- 69. Ajax Security
- 70. Ajax is as secure as any browser request So: Don‘t trust it Always verify user submitted data on the server
- 72. Trivial updates: HTML Complex updates: JavaScript Use HTTP caching Don‘t overengineer ragm atic! be p
- 74. Local calls only • Ajax can only call originating server • Also works with file:// URLs • Use server-side proxying if you want to tie in other services
- 75. The Back button • The browser back button works by returning the user to the last „non-ajax“ loaded page • Keep that in mind, especially for public sites • Workarounds available, but aren‘t working with all browsers
- 76. display: none • Don‘t use display:none in external CSS • Browser can‘t determine the original (built-in) display value of an element (like „block“ for DIVs, and „inline“ for SPANs) • Use the style attribute instead: <div style=“display:none“>...</div>
- 77. Internet Explorer image cache • Internet Explorer doesn‘t use its cache when HTML page fragments that are inserted via Ajax are loading images (IMG tag) • Some proprietary HTTP headers exist to work around this (hey, it‘s Microsoft!): • http://mir.aculo.us/articles/2005/08/28/internet- explorer-and-ajax-image-caching-woes
- 78. The verboten IDs of Internet Explorer • IE 6 has some bugs regarding naming ID attributes • Don‘t use: „length“, „item“, „namedItem“, „tags“ or „urns“ • http://meyerweb.com/eric/thoughts/2005/08/29/ reserved-id-values/
- 79. JavaScript objects new Ajax.Updater('test', 'update.php', { onComplete: function() {}, insertion: Insertion.Top, }); evil comma This code works in Firefox, of browser but doesn‘t in Safari. death Always test in all browsers you want to support!
- 81. No rocket surgery here
- 82. The first rule of AJAX debugging: Use Firefox
- 83. The second rule of AJAX debugging: Use Firefox +Extensions
- 84. Firebug
- 85. Firebug Version 0.4 will include a lightweight JavaScript debugger
- 86. Web Developer Extension
- 87. Venkman JavaScript Debugger oes also d g! profilin
- 88. Tamperdata
- 89. The third rule: Test with all browsers you want to support
- 91. Microsoft Script Debugger for IE • http://blogs.msdn.com/ie/archive/ 2004/10/26/247912.aspx
- 92. „It‘s more like Web 3.0“ What can you actually do with all this?
- 93. Available now www.fluxiom.com
- 94. Q&A