orcreatehappyusers

653 views
548 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
653
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

orcreatehappyusers

  1. 1. Thomas Fuchs Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces
  2. 2. Thomas Fuchs Or: Create Happy Users
  3. 3. Thomas Fuchs • wollzelle • Core team member of Ruby on Rails • script.aculo.us • mir.aculo.us
  4. 4. • Branding/Design/Web • fluxiom Digital Asset Management http://www.fluxiom.com • http://www.wollzelle.com/
  5. 5. Tools
  6. 6. JavaScript, as seen by the browser Source: http://www.pollux.franken.de/KNF/
  7. 7. JavaScript Frameworks make you…
  8. 8. …write less code…
  9. 9. …code more elegantly…
  10. 10. …deal less with browser bugs…
  11. 11. …and ultimately stay happy.
  12. 12. Concentrate on your application…
  13. 13. …and not on browser bugs.
  14. 14. 1.5
  15. 15. Prototype is JavaScript, reloaded
  16. 16. Ajax
  17. 17. Basic Ajax calls (HTML snippets)
  18. 18. Ajax Forms
  19. 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. 20. Hooks for integration with UI enhancements (like activity indicators)
  21. 21. Extensions to built-in object types
  22. 22. Enumerables
  23. 23. $ and $$
  24. 24. Direct Element extensions
  25. 25. Prototype 1.4 vs Prototype 1.5
  26. 26. .update() .replace() .remove() .visible() .setStyle() .addClassName() (…and lots more)
  27. 27. Events (without cross-browser pain)
  28. 28. eat s heet! ch http://www.snook.ca/archives/000531.php
  29. 29. Of course, just think of it as magic. Sam Stephenson, author of Prototype
  30. 30. 1.6
  31. 31. Visual effects
  32. 32. Drag and Drop
  33. 33. s of c ode! 2 line
  34. 34. Ready-to-use controls
  35. 35. Real-time search Autocompleting Drag and Drop Inplace editor Slider
  36. 36. Plus some extras JavaScript unit testing, DOM Builder
  37. 37. Docs & Help • Wiki: http://wiki.script.aculo.us/ • Mailing list: http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs • IRC channel: #prototype on freenode.net
  38. 38. Add-ons
  39. 39. event:Selectors http://encytemedia.com/event-selectors/
  40. 40. Lightbox JS http://www.huddletogether.com/projects/lightbox2/
  41. 41. Windows http://blogus.xilinus.com/pages/javawin
  42. 42. Visual effects Sliding panels and homegrown effects
  43. 43. Advanced engine for visual effects Time-based Complex effects easily possible
  44. 44. More than just „eye candy“ Visual feedback Loading times „feel shorter“ Can help move away from proprietary plugins
  45. 45. On board Often-used effects „Yellow Fade Technique“ Fade in and out Sliding panels Puff, Shake, etc.
  46. 46. at sh eet! che http://www.slash7.com/articles/2006/04/22/ scriptaculous-cheat-sheet-1
  47. 47. Do-it-yourself effects Very easy to do Automatically use all the features from the visual effects engine
  48. 48. Complete tutorial & demo code: http://www.thinkvitamin.com/features/ ajax/create-your-own-ajax-effects
  49. 49. Activity indicators Show what‘s going on
  50. 50. „There‘s something going on, wait a sec“ Revival of the animated GIF Both „per use“ and „global“ indicators possible
  51. 51. „Local“ indicator for a specific request, show/hide indicator image
  52. 52. „Global“ indicator for a all Ajax requests, appear/fade an indicator image
  53. 53. Need an indicator image? http://www.ajaxload.info/
  54. 54. Annonyances & Debugging
  55. 55. Lessons learned from a year of Ajax
  56. 56. Not all Browsers are created equal.
  57. 57. CSS
  58. 58. CSS can eliminate or save on server accesses HTML sizes are reduced Be creative, CSS is extremely capable
  59. 59. JavaScript performance
  60. 60. DOM-API can be slow Firefox is the slowest (better in 1.5) Caching references in JavaScript vars .innerHTML is your friend Venkman profiling
  61. 61. Ajax Security
  62. 62. Ajax is as secure as any browser request So: Don‘t trust it Always verify user submitted data on the server
  63. 63. Which data format?
  64. 64. Trivial updates: HTML Complex updates: JavaScript Use HTTP caching Don‘t overengineer ragm atic! be p
  65. 65. Some helpful hints
  66. 66. 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
  67. 67. 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
  68. 68. 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>
  69. 69. 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
  70. 70. 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/
  71. 71. 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!
  72. 72. Debugging JavaScript
  73. 73. No rocket surgery here
  74. 74. The first rule of AJAX debugging: Use Firefox
  75. 75. The second rule of AJAX debugging: Use Firefox +Extensions
  76. 76. Firebug
  77. 77. Firebug Version 0.4 will include a lightweight JavaScript debugger
  78. 78. Web Developer Extension
  79. 79. Venkman JavaScript Debugger oes also d g! profilin
  80. 80. Tamperdata
  81. 81. The third rule: Test with all browsers you want to support
  82. 82. Safari Web Inspector
  83. 83. Microsoft Script Debugger for IE • http://blogs.msdn.com/ie/archive/ 2004/10/26/247912.aspx
  84. 84. „It‘s more like Web 3.0“ What can you actually do with all this?
  85. 85. Available now www.fluxiom.com
  86. 86. Q&A

×