Your SlideShare is downloading. ×
orcreatehappyusers
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

orcreatehappyusers

489
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
489
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
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. 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…
  • 8. …write less code…
  • 9. …code more elegantly…
  • 10. …deal less with browser bugs…
  • 11. …and ultimately stay happy.
  • 12. Concentrate on your application…
  • 13. …and not on browser bugs.
  • 14. 1.5
  • 15. Prototype is JavaScript, reloaded
  • 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
  • 22. Enumerables
  • 23. $ and $$
  • 24. Direct Element extensions
  • 25. Prototype 1.4 vs Prototype 1.5
  • 26. .update() .replace() .remove() .visible() .setStyle() .addClassName() (…and lots more)
  • 27. Events (without cross-browser pain)
  • 28. eat s heet! ch http://www.snook.ca/archives/000531.php
  • 29. Of course, just think of it as magic. Sam Stephenson, author of Prototype
  • 30. 1.6
  • 31. Visual effects
  • 32. Drag and Drop
  • 33. s of c ode! 2 line
  • 34. Ready-to-use controls
  • 35. Real-time search Autocompleting Drag and Drop Inplace editor Slider
  • 36. Plus some extras JavaScript unit testing, DOM Builder
  • 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. Add-ons
  • 39. event:Selectors http://encytemedia.com/event-selectors/
  • 40. Lightbox JS http://www.huddletogether.com/projects/lightbox2/
  • 41. Windows http://blogus.xilinus.com/pages/javawin
  • 42. Visual effects Sliding panels and homegrown effects
  • 43. Advanced engine for visual effects Time-based Complex effects easily possible
  • 44. More than just „eye candy“ Visual feedback Loading times „feel shorter“ Can help move away from proprietary plugins
  • 45. On board Often-used effects „Yellow Fade Technique“ Fade in and out Sliding panels Puff, Shake, etc.
  • 46. at sh eet! che http://www.slash7.com/articles/2006/04/22/ scriptaculous-cheat-sheet-1
  • 47. Do-it-yourself effects Very easy to do Automatically use all the features from the visual effects engine
  • 48. Complete tutorial & demo code: http://www.thinkvitamin.com/features/ ajax/create-your-own-ajax-effects
  • 49. Activity indicators Show what‘s going on
  • 50. „There‘s something going on, wait a sec“ Revival of the animated GIF Both „per use“ and „global“ indicators possible
  • 51. „Local“ indicator for a specific request, show/hide indicator image
  • 52. „Global“ indicator for a all Ajax requests, appear/fade an indicator image
  • 53. Need an indicator image? http://www.ajaxload.info/
  • 54. Annonyances & Debugging
  • 55. Lessons learned from a year of Ajax
  • 56. Not all Browsers are created equal.
  • 57. CSS
  • 58. CSS can eliminate or save on server accesses HTML sizes are reduced Be creative, CSS is extremely capable
  • 59. JavaScript performance
  • 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. Ajax Security
  • 62. Ajax is as secure as any browser request So: Don‘t trust it Always verify user submitted data on the server
  • 63. Which data format?
  • 64. Trivial updates: HTML Complex updates: JavaScript Use HTTP caching Don‘t overengineer ragm atic! be p
  • 65. Some helpful hints
  • 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. 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. 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. 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. 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. 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. Debugging JavaScript
  • 73. No rocket surgery here
  • 74. The first rule of AJAX debugging: Use Firefox
  • 75. The second rule of AJAX debugging: Use Firefox +Extensions
  • 76. Firebug
  • 77. Firebug Version 0.4 will include a lightweight JavaScript debugger
  • 78. Web Developer Extension
  • 79. Venkman JavaScript Debugger oes also d g! profilin
  • 80. Tamperdata
  • 81. The third rule: Test with all browsers you want to support
  • 82. Safari Web Inspector
  • 83. Microsoft Script Debugger for IE • http://blogs.msdn.com/ie/archive/ 2004/10/26/247912.aspx
  • 84. „It‘s more like Web 3.0“ What can you actually do with all this?
  • 85. Available now www.fluxiom.com
  • 86. Q&A

×