Your SlideShare is downloading. ×
Unobtrusive JavaScript in Rails 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Unobtrusive JavaScript in Rails 3

5,559
views

Published on

Unobtrusive JavaScript in Rails 3 …

Unobtrusive JavaScript in Rails 3
Vortrag wurde am 23.02.2010 an der
Heinrich-Heine-Universität Düsseldorf im Rahmen der Rails User Group Düsseldorf von Hussein Morsy gehalten.

Published in: Technology

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

No Downloads
Views
Total Views
5,559
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
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. Unobtrusive JavaScript in Rails 3 Hussein Morsy 23.02.2010 Heinrich-Heine-Universität Düsseldorf Rails User Group Düsseldorf
  • 2. http://twitter.com/ HusseinMorsy
  • 3. Wer verwendet Ajax in Rails?
  • 4. Wer verwendet jQuery ?
  • 5. Ereignisse 2009
  • 6. XHTML 2 ist tot
  • 7. Es lebe HTML 5
  • 8. RailsConf 2009 Unobtrusive JavaScript mit HTML 5 data-Attribut
  • 9. Grundlagen
  • 10. HTML • Enthält Daten • Definiert die Struktur
  • 11. CSS • Design • Layout • Trennung von Design und Inhalt
  • 12. JavaScript • Interaktivität • Animation • Server-kommunikation mit Ajax
  • 13. Unobtrusive JS • Unobtrusive = unauffällig • Kein JavaScript im HTML-Code • Trennung von Inhalt und Verhalten
  • 14. Progressive Enhancement • Applikation funktioniert auch ohne JS • Erst die App ohne Ajax entwickeln • Dann erst die Ajax Funktionalität hinzufügen
  • 15. HTML 5 • Nachfolger von HTML 4 • Google, Apple, etc. verwenden jetzt schon HTML 5
  • 16. Valides HTML 5 <!DOCTYPE html> <title>Hello World</title> <p>Hallo</p> Validator
  • 17. HTML-Data-Attribute • Speichern von Zusatzinformationen, wie z.B. • <a href="/bookmarks/4" data-remote="true"> Show detail </a> • <a href="/obst" data-nur-ein-test="Apfel, Banane"> Obst Liste </a>
  • 18. Ajax in Rails 2
  • 19. Ajax Helper in Rails 2 • link_to_remote • link_to_function • remote_form_for Auch in Rails 3 mit Prototype legacy Helper • form_remote_tag http://github.com/rails/ prototype_legacy_helper • button_to_remote • submit_to_remote • periodically_call_remote • observe_field und observe_for
  • 20. link_to_remote <%= link_to_remote 'show', @boomark %> <a href="#" onclick="new Ajax.Request('/bookmarks/117', {asynchronous:true, evalScripts:true, parameters:'authenticity_token= ....
  • 21. Ajax in Rails 3
  • 22. link_to <%= link_to 'Show', @bookmark, :remote => true %> <a href="/bookmarks/117" data-remote="true">Show</a>
  • 23. link_to zum Löschen <%= link_to 'destroy', @bookmark, :method => :delete %> <a href="/bookmarks/117" data-method="delete" rel="nofollow">Show</a>
  • 24. form_for <% form_for(@boomark, :remote => true) do |f| %> ... <% end %> <form action="/bookmarks" class="new_bookmark" data-remote="true" id="new_bookmark" method="post">
  • 25. submit <%= f.submit :disable_with => "Please wait..." %> <input data-disable-with="Please wait..." id="post_submit" name="commit" type="submit" value="Create Bookmark" />
  • 26. public/javascripts/rails.js • Enthält den JavaScript-Code für Ajax • Default ist Prototype
  • 27. Verwendung von jQuery • rails projektname --skip-prototype oder • rails projektname -J • jQuery rails.js downloaden von http://github.com/rails/jquery-ujs • kopieren nach public/javascripts/rails.js
  • 28. Danke twitter.com/HusseinMorsy