Your SlideShare is downloading. ×
0
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
Advanced Rails AJAX techniques
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

Advanced Rails AJAX techniques

1,035

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,035
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
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 Advanced Rails AJAX techniques
  • 2. Thomas Fuchs • wollzelle • Core team member of Ruby on Rails • script.aculo.us • mir.aculo.us
  • 3. • Branding/Design/Web • fluxiom (yes, we‘ll get to see it) • http://www.wollzelle.com/
  • 4. The tools
  • 5. JavaScript, as seen by the browser Source: http://www.pollux.franken.de/KNF/
  • 6. JavaScript, as seen by the developer From 2001: A Space Odyssey
  • 7. Concentrate on your application…
  • 8. …and not on browser bugs.
  • 9. Source: http://threadless.com/submission/46364/It
  • 10. 1.5
  • 11. JavaScript, minus the „WTF?“
  • 12. AJAX
  • 13. Enumerables
  • 14. $ and $$
  • 15. Direct Element extensions
  • 16. Prototype 1.4 vs Prototype 1.5
  • 17. Events
  • 18. 1.6
  • 19. Visual effects
  • 20. Drag and Drop
  • 21. Ready-to-use controls
  • 22. Plus some extras JavaScript unit testing, DOM Builder
  • 23. On-the-fly JavaScript: Rails JavaScript Templates
  • 24. Rails Ajax: A History Last Spike of the CPR - Craigellachie, British Columbia, Canada Courtesy of the National Library and Archives of Canada
  • 25. Rails Ajax: A History Ideas to make the Late 20th century web snappier Prototype 1.0, Rails 0.11, March 22, 2005 Rails Helpers Prototype 1.3, o y earJuly 6, 2005 neRails 0.13, In j ust script.aculo.us released Prototype 1.4, Rails 1.0, December 13, 2005 script.aculo.us 1.5 Rails JavaScript templates, Rails 1.1, March 28, 2006 Prototype 1.5, script.aculo.us 1.6
  • 26. Ruby on Rails RJS Templates +
  • 27. No JavaScript programming necessary
  • 28. (might have something to do with David) Danish flag
  • 29. Say it in Ruby generates JavaScript:
  • 30. What it does Prototype sees blah.rjs „text/javascript“ „blah“ action generates HTTP header gets called JavaScript and evals JavaScript ure R uby! P
  • 31. Of course, just think of it as magic. Sam Stephenson, author of Prototype
  • 32. replace Replaces complete element
  • 33. replace_html Replaces contents of an element same as
  • 34. Staying DRY Refreshes contents of element „list“ with the partial of the same name equivalent to
  • 35. insert_html Insert content at specific positions within an element page.sortable re-inits the sortable list so the newly added item is recognized
  • 36. select CSS selector-based loops
  • 37. select advanced Prototype enumerables creates a JavaScript „t“ variable, containing the result
  • 38. select advanced Prototype enumerables creates „h“ variable, containing an Array of elements (that are visible)
  • 39. select using Prototype to inspect stuff
  • 40. << Reuse plain JavaScript
  • 41. delay
  • 42. Prototype/script.aculo.us Element extensions
  • 43. Chains Hide the first element that is a „P“ and has a class „hint“:
  • 44. script.aculo.us Visual Effects :appear, :fade, :slide_up, :slide_down, :blind_up, :blind_down, :pulsate, :switch_off, :puff and more (or DIY)
  • 45. script.aculo.us Drag & Drop
  • 46. Call your own RJS JavaScript
  • 47. render :update (controller-based)
  • 48. RJS helpers Helper: Call in .rjs:
  • 49. redirect_to (takes url_for syntax)
  • 50. respond_to one action for Ajax… …and non-Ajax calls
  • 51. Helpful hints, built-in config/environments/development.rb:
  • 52. API Documentation ActionView::Helpers::PrototypeHelper and ActionView::Helpers::PrototypeHelper:: JavaScriptGenerator::GeneratorMethods
  • 53. What about debugging?
  • 54. No rocket surgery, either.
  • 55. The first rule of AJAX debugging: Use Firefox
  • 56. The second rule of AJAX debugging: Use Firefox +Extensions
  • 57. Firebug
  • 58. Firebug
  • 59. Web Developer Extension
  • 60. Venkman JavaScript Debugger
  • 61. Tamperdata
  • 62. The third rule: Test with all browsers you want to support
  • 63. Safari Web Inspector
  • 64. Microsoft Script Debugger for IE • http://blogs.msdn.com/ie/archive/ 2004/10/26/247912.aspx
  • 65. „It‘s more like Web 3.0“
  • 66. blog.fluxiom.com
  • 67. Launching April 2006 www.fluxiom.com

×