Ajax and JavaScript mit Ruby on Rails

8,065 views

Published on

A talk about Prototype and Scriptaculous and their integration in Ruby on Rails. Further RJS is introduced. Presented by Jonathan Weiss at the Rails Konferenz 2006.

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

No Downloads
Views
Total views
8,065
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
121
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ajax and JavaScript mit Ruby on Rails

  1. 1. JavaScript und Ajax mit Rails Jonathan Weiss http://blog.innerewut.de
  2. 2. JavaScript
  3. 3. JavaScript - Die Wiederentdeckung
  4. 4. Was hat sich geändert?
  5. 5. Was hat sich geändert? • Besinnung auf JS-Stärken und Usability • Highlevel JavaScript Bibliotheken • Tool-Support
  6. 6. JavaScript • prototype OO • Closures • DOM manipulation • ECMA basics mittlerweile durchgängig etabliert • XmlHTTPObject
  7. 7. High-level JS Bibliotheken Browser-unabhängige Programmierung von • DOM Manipulationen • Effekten • Ajax • UnitTests
  8. 8. Entwickler kann sich wieder auf Applikation konzentrieren
  9. 9. Was hat das jetzt mit Rails zu tun?
  10. 10. Prototype und Scriptaculous
  11. 11. $ und $$
  12. 12. Scriptaculous Effekte
  13. 13. In & Out • Appear / Fade • BlindDown / BlindUp • SlideDown / SlideUp • Grow / Shrink
  14. 14. Out • SwitchOff • Fold • Puff • Squish • DropOut
  15. 15. “Schau hier!” • Shake • Highlight • Pulsate
  16. 16. Ajax Recap
  17. 17. AJAX Asynchronous JavaScript And XML
  18. 18. AJAH ? Asynchronous JavaScript And HTML
  19. 19. AJAJ ? Asynchronous JavaScript And JavaScript
  20. 20. Normaler Request GET http://example.com/ TEXT/HTML <html> <body> ... </body> </html>
  21. 21. AJAX Request POST http://example.com/posts/new Ajax Request TEXT/XML <?xml .... > <people> <person id=’1’>Alf</person> </people>
  22. 22. AJAX Request mit HTML Response POST http://example.com/posts/new Ajax Request TEXT/HTML <div> <p> Post saved</p> </div>
  23. 23. Ajax Einfacher Request
  24. 24. Ajax Einfacher Request mit callbacks
  25. 25. Ajax DOM Updates
  26. 26. http://wiki.script.aculo.us
  27. 27. Was hat das jetzt mit Rails zu tun?
  28. 28. Rails JavaScript Helper
  29. 29. http://api.rubyonrails.org/classes/ActionView/Helpers/ PrototypeHelper.html
  30. 30. link_to_remote in .rhtml:
  31. 31. link_to_remote in .rhtml: Browser bekommt:
  32. 32. in .rhtml:
  33. 33. in .rhtml: Browser bekommt:
  34. 34. form_remote_tag in .rhtml:
  35. 35. form_remote_tag in .rhtml: Browser bekommt:
  36. 36. RJS - Rails JavaScript Templates
  37. 37. GET http://example.com/ TEXT/HTML
  38. 38. POST http://example.com/posts/new Ajax Request TEXT/JavaScript
  39. 39. eval( )
  40. 40. in .rjs:
  41. 41. in .rjs: Browser bekommt:
  42. 42. Controller new.rjs
  43. 43. RJS Inline im Controller
  44. 44. RJS Selectoren Browser bekommt:
  45. 45. Beliebiges JavaScript mit `<<` Browser bekommt:
  46. 46. http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/ JavaScriptGenerator/GeneratorMethods.html
  47. 47. Testen und Debuggen
  48. 48. Debugging RJS Ausgabe im Browser config/development.rb
  49. 49. ARTS: Another RJS Test System http://glu.ttono.us/articles/2006/05/29/guide-test-driven-rjs-with-arts
  50. 50. • Console / JavaScript Shell • DOM Inspector • XMLHTTPRequest Tracer • Debugger http://joehewitt.com/software/firebug/
  51. 51. Webdeveloper • DOM Inspector • Verschiedene Tools rund um Cookies, Forms, CSS, Bilders, Header, .... http://chrispederick.com/work/webdeveloper/
  52. 52. Venkman • Profiler • Debugger • JavaScript Shell http://www.mozilla.org/projects/venkman/
  53. 53. Nightly + Drosera • DOM Inspector • JavaScript Debugger http://nightly.webkit.org/
  54. 54. MS Script Debugger http://www.microsoft.com/downloads/details.aspx? FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
  55. 55. Fin http://blog.innerewut.de/files/jweiss-rails-konferenz-2006.pdf
  56. 56. Links http://api.rubyonrails.org http://mir.aculo.us/stuff/AdventuresInJavaScriptTesting.pdf http://mir.aculo.us/stuff/COR_20060413_RailsAjax.pdf http://mir.aculo.us/stuff/orcreatehappyusers.pdf http://www.slash7.com/articles/2006/07/26/javascript-boot-camp-tutorial

×