Successfully reported this slideshow.
Unobtrusive
     JavaScript
     in Rails 3
           Hussein Morsy

             23.02.2010
Heinrich-Heine-Universität D...
http://twitter.com/
  HusseinMorsy
Wer verwendet Ajax in Rails?
Wer verwendet jQuery ?
Ereignisse 2009
XHTML 2 ist tot
Es lebe HTML 5
RailsConf 2009




Unobtrusive JavaScript mit
 HTML 5 data-Attribut
Grundlagen
HTML


• Enthält Daten
• Definiert die Struktur
CSS

• Design
• Layout
• Trennung von Design und Inhalt
JavaScript

• Interaktivität
• Animation
• Server-kommunikation mit Ajax
Unobtrusive JS

• Unobtrusive = unauffällig
• Kein JavaScript im HTML-Code
• Trennung von Inhalt und Verhalten
Progressive
        Enhancement

• Applikation funktioniert auch ohne JS
• Erst die App ohne Ajax entwickeln
• Dann erst d...
HTML 5


• Nachfolger von HTML 4
• Google, Apple, etc. verwenden jetzt schon
  HTML 5
Valides HTML 5
<!DOCTYPE html>
<title>Hello World</title>
<p>Hallo</p>



                             Validator
HTML-Data-Attribute
• Speichern von Zusatzinformationen, wie z.B.
• <a href="/bookmarks/4" data-remote="true">
  Show deta...
Ajax in Rails 2
Ajax Helper in Rails 2
• link_to_remote
• link_to_function
• remote_form_for                 Auch in Rails 3
             ...
link_to_remote

<%= link_to_remote 'show', @boomark %>




<a href="#" onclick="new Ajax.Request('/bookmarks/117',
{asynch...
Ajax in Rails 3
link_to

<%= link_to 'Show', @bookmark, :remote => true %>




<a href="/bookmarks/117" data-remote="true">Show</a>
link_to zum Löschen

<%= link_to 'destroy', @bookmark, :method => :delete %>




<a href="/bookmarks/117" data-method="del...
form_for
<% form_for(@boomark, :remote => true) do |f| %>
  ...
<% end %>




<form action="/bookmarks" class="new_bookmar...
submit

<%= f.submit :disable_with => "Please wait..." %>




<input data-disable-with="Please wait..."
id="post_submit" n...
public/javascripts/rails.js


• Enthält den JavaScript-Code für Ajax
• Default ist Prototype
Verwendung von
         jQuery
• rails projektname --skip-prototype oder
• rails projektname -J
• jQuery rails.js download...
Danke


twitter.com/HusseinMorsy
Upcoming SlideShare
Loading in …5
×

Unobtrusive JavaScript in Rails 3

5,923 views

Published on

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
  • Be the first to comment

Unobtrusive JavaScript in Rails 3

  1. 1. Unobtrusive JavaScript in Rails 3 Hussein Morsy 23.02.2010 Heinrich-Heine-Universität Düsseldorf Rails User Group Düsseldorf
  2. 2. http://twitter.com/ HusseinMorsy
  3. 3. Wer verwendet Ajax in Rails?
  4. 4. Wer verwendet jQuery ?
  5. 5. Ereignisse 2009
  6. 6. XHTML 2 ist tot
  7. 7. Es lebe HTML 5
  8. 8. RailsConf 2009 Unobtrusive JavaScript mit HTML 5 data-Attribut
  9. 9. Grundlagen
  10. 10. HTML • Enthält Daten • Definiert die Struktur
  11. 11. CSS • Design • Layout • Trennung von Design und Inhalt
  12. 12. JavaScript • Interaktivität • Animation • Server-kommunikation mit Ajax
  13. 13. Unobtrusive JS • Unobtrusive = unauffällig • Kein JavaScript im HTML-Code • Trennung von Inhalt und Verhalten
  14. 14. Progressive Enhancement • Applikation funktioniert auch ohne JS • Erst die App ohne Ajax entwickeln • Dann erst die Ajax Funktionalität hinzufügen
  15. 15. HTML 5 • Nachfolger von HTML 4 • Google, Apple, etc. verwenden jetzt schon HTML 5
  16. 16. Valides HTML 5 <!DOCTYPE html> <title>Hello World</title> <p>Hallo</p> Validator
  17. 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. 18. Ajax in Rails 2
  19. 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. 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. 21. Ajax in Rails 3
  22. 22. link_to <%= link_to 'Show', @bookmark, :remote => true %> <a href="/bookmarks/117" data-remote="true">Show</a>
  23. 23. link_to zum Löschen <%= link_to 'destroy', @bookmark, :method => :delete %> <a href="/bookmarks/117" data-method="delete" rel="nofollow">Show</a>
  24. 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. 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. 26. public/javascripts/rails.js • Enthält den JavaScript-Code für Ajax • Default ist Prototype
  27. 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. 28. Danke twitter.com/HusseinMorsy

×