UJS in Rails 3

  • 11,043 views
Uploaded on

An overview of the changes in Rails 3 regarding Javascript helpers and integration.

An overview of the changes in Rails 3 regarding Javascript helpers and integration.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • lol, very interesting slideshow! thanks
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,043
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
68
Comments
1
Likes
2

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. UJS in Rails 3Tuesday, February 1, 2011
  • 2. UJS in Rails 3 by Phil CrissmanTuesday, February 1, 2011
  • 3. Rails and JavascriptTuesday, February 1, 2011
  • 4. Rails and Javascript Javascript helpers have been built into Rails from the very earliest versions. Prototype and Ajaxy helpers have traditionally been “just there” and have always “just worked”Tuesday, February 1, 2011
  • 5. Rails and Javascript Javascript helpers have been built into Rails from the very earliest versions. Prototype and Ajaxy helpers have Magic traditionally been “just there” and have always “just worked”Tuesday, February 1, 2011
  • 6. Tuesday, February 1, 2011
  • 7. Tuesday, February 1, 2011
  • 8. Unobtrusive JavascriptTuesday, February 1, 2011
  • 9. Unobtrusive Javascript Unobtrusive Javascript is simply the idea of keeping your behavior-defining script out of your content. It’s the same idea as keeping your style- defining rules (CSS) out of your content.Tuesday, February 1, 2011
  • 10. Unobtrusive Javascript So instead of: <a href="#" onclick="alert(ok!);"> Hey </a> We would do: <a href="#" class="alerty"> Hey </a> ... <script type="javascript"> $(function(){ $(.alerty).click(function(){ alert(ok!); }); }); </script>Tuesday, February 1, 2011
  • 11. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
  • 12. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
  • 13. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’? WELL, THAT’S JUST, LIKE YOUR OPINION MANTuesday, February 1, 2011
  • 14. Unobtrusive Javascript Making Javascript ‘unobtrusive’ won’t magically make your code any better. But...Tuesday, February 1, 2011
  • 15. Unobtrusive Javascript It’s ‘better’ in the same sense that separating style from content is ‘better’.Tuesday, February 1, 2011
  • 16. Unobtrusive Javascript And it’s how Javascript helpers are handled by default in Rails 3.Tuesday, February 1, 2011
  • 17. Unobtrusive Javascript In the past, if you wanted to use unobtrusive javascript techniques in Rails, you simply stopped using the built-in Javascript helpers... And wrote all your Javascript from scratch.Tuesday, February 1, 2011
  • 18. Unobtrusive Javascript In Rails 3, you get to keep using the built-in Javascript helpers... And still write all your Javascript from scratch.Tuesday, February 1, 2011
  • 19. Unobtrusive Javascript In Rails 3, you get to keep using the built-in Javascript helpers... And still write all your Javascript from scratch.Tuesday, February 1, 2011
  • 20. UJS in Rails 3Tuesday, February 1, 2011
  • 21. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers:Tuesday, February 1, 2011
  • 22. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers: 1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes.Tuesday, February 1, 2011
  • 23. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers: 1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes. 2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone).Tuesday, February 1, 2011
  • 24. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers: 1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes. 2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone). 3. It’s a lot easier to pull out Prototype and switch to jQuery or mootools, etc, if you want to.Tuesday, February 1, 2011
  • 25. UJS in Rails 3 1. Data attributes. Rails takes advantage of a new feature of HTML5: any tag can have any number of attributes prepended with “data-”, and still be perfectly valid markup.Tuesday, February 1, 2011
  • 26. UJS in Rails 3 Common use case: deleting something, via a link: <%= link_to "Delete", posts_path(@post), :method => "delete", :confirm => "Are you sure?" %>Tuesday, February 1, 2011
  • 27. UJS in Rails 3 Would render (pre Rails 3) as: <a href="/posts/1" onclick="if (confirm(Are you sure?)) { var f = document.createElement(form); f.style.display = none; this.parentNode.appendChild(f); f.method = POST; f.action = this.href;var m = document.createElement(input); m.setAttribute(type, hidden); m.setAttribute(name, _method); m.setAttribute(value, delete); f.appendChild (m);var s = document.createElement(input); s.setAttribute (type, hidden); s.setAttribute(name, authenticity_token); s.setAttribute(value, nMxiiHBFyQr9Q3Jc7QGzSd1tk08ujbsHhtF3S26k/k8=); f.appendChild (s);f.submit(); };return false;">Delete</a>Tuesday, February 1, 2011
  • 28. UJS in Rails 3 Would render as: <a href="/posts/1" onclick="if (confirm(Are you sure?)) { var f = document.createElement(form); f.style.display = none; this.parentNode.appendChild(f); f.method = POST; f.action = this.href;var m = document.createElement(input); m.setAttribute(type, hidden); m.setAttribute(name, _method); m.setAttribute(value, delete); f.appendChild Magic (m);var s = document.createElement(input); s.setAttribute (type, hidden); s.setAttribute(name, authenticity_token); s.setAttribute(value, nMxiiHBFyQr9Q3Jc7QGzSd1tk08ujbsHhtF3S26k/k8=); f.appendChild (s);f.submit(); };return false;">Delete</a>Tuesday, February 1, 2011
  • 29. UJS in Rails 3 In Rails 3, this same link_to statement... <%= link_to "Delete", posts_path (@post), :method => "delete", :confirm => "Are you sure?" %> ...will render as: <a href="/posts/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>Tuesday, February 1, 2011
  • 30. UJS in Rails 3 In Rails 3, this same link_to statement... <%= link_to "Delete", posts_path (@post), :method => "delete", :confirm => "Are you sure?" %> ...will render as: <a href="/posts/1" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>Tuesday, February 1, 2011
  • 31. UJS in Rails 3 ‘data-method’ and ‘data-confirm’ attributes (and everything else) are handled from /public/javascripts/rails.js // from the jQuery version of rails.js: function allowAction(element) { var message = element.attr(data-confirm); return !message || (fire(element, confirm) && confirm (message)); }Tuesday, February 1, 2011
  • 32. UJS in Rails 3 2. ‘remote’ helpers. Instead of helpers like link_to_remote, in Rails 3, :remote is a param that you include with your link or your form.Tuesday, February 1, 2011
  • 33. UJS in Rails 3 So if we want to make our delete link ajaxy: <%= link_to "Delete", posts_path (@post), :method => "delete", :confirm => "Are you sure?", :remote => true %>Tuesday, February 1, 2011
  • 34. UJS in Rails 3 So if we want to make our delete link ajaxy: <%= link_to "Delete", posts_path (@post), :method => "delete", :confirm => "Are you sure?", :remote => true %>Tuesday, February 1, 2011
  • 35. UJS in Rails 3 This will render (you guessed it) as: <a href="/posts/1" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a>Tuesday, February 1, 2011
  • 36. UJS in Rails 3 This will render (you guessed it) as: <a href="/posts/1" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Delete</a> And clicking on it will fire a function in rails.js which creates an XMLHttpRequest and sends it to the URL in your href attribute.Tuesday, February 1, 2011
  • 37. UJS in Rails 3 3. Replacing Prototype with jQuery, mootools, or... Rails 3 has made this very simple.Tuesday, February 1, 2011
  • 38. UJS in Rails 3 If we want to use jQuery, for example, we simply add to our Gemfile: gem jquery-rails And then (in the terminal) : % bundle install % rails g jquery:installTuesday, February 1, 2011
  • 39. UJS in Rails 3 Side note: RJS If you use RJS, just adding jquery-rails does not (at the moment, at least) provide jQuery equivalents for RJS statements. You may be able to use jrails, which does (or at least did) provide these. (I haven’t tried this.) Otherwise, you’ll want to stick with Prototype.Tuesday, February 1, 2011
  • 40. UJS in Rails 3: an exampleTuesday, February 1, 2011
  • 41. UJS in Rails 3: an example Let’s actually make it work. Even if not using RJS, there are still a couple ways we can respond to the xhr sent by our delete link.Tuesday, February 1, 2011
  • 42. UJS in Rails 3: an example 1. You could write a javascript template; for a destroy action, this might be destroy.js.erb (or destroy.js.haml)...Tuesday, February 1, 2011
  • 43. UJS in Rails 3: an example This might look something like: / destroy.js.haml $("#posts").html("#{escape_javascript(render (@posts))}");Tuesday, February 1, 2011
  • 44. UJS in Rails 3: an example 2. Or, you might write javascript hooks straight into application.js, which will be called at the appropriate time.Tuesday, February 1, 2011
  • 45. UJS in Rails 3: an example In public/javascripts/application.js: $(function(){ $(#posts a).bind("ajax:complete", function (n, xhr){ $(this).parent().parent().fadeOut(4000); }); });Tuesday, February 1, 2011
  • 46. UJS in Rails 3: an example There are several events fired with each xhr (they differ slightly between the Prototype and jQuery version of rails.js): // Prototype rails.js // jQuery rails.js ajax:before ajax:beforeSend ajax:success ajax:success ajax:complete ajax:complete ajax:failure ajax:error ajax:afterTuesday, February 1, 2011
  • 47. Obtrusive Javascript But, if you’re determined to cling to the past:Tuesday, February 1, 2011
  • 48. Obtrusive Javascript But, if you’re determined to cling to the past:Tuesday, February 1, 2011
  • 49. Recap:Tuesday, February 1, 2011
  • 50. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this.Tuesday, February 1, 2011
  • 51. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this. However, in Rails 3, these helpers aim to be unobtrusive.Tuesday, February 1, 2011
  • 52. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this. However, in Rails 3, these helpers aim to be unobtrusive. Rails 3 js changes include: 1. Utilizing HTML5 data-* attributes. 2. Adding a :remote param to helpers that can use it. 3. Making it easy to drop in alternate JS frameworks in place of Prototypejs.Tuesday, February 1, 2011
  • 53. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this. However, in Rails 3, these helpers aim to be unobtrusive. Rails 3 js changes include: 1. Utilizing HTML5 data-* attributes. 2. Adding a :remote param to helpers that can use it. 3. Making it easy to drop in alternate JS frameworks in place of Prototypejs. You can either use a js template to send js right back to the browser, or you can take advantage of the ajax hooks provided by rails.js.Tuesday, February 1, 2011
  • 54. Resources: There are several books recently or soon-to-be published covering Rails 3; most seem to have little or no coverage of unobtrusive JS.Tuesday, February 1, 2011
  • 55. Resources: Rails 3 in Action, by Yehuda Katz (@wycats) and Ryan Bigg (@ryanbigg), will contain some examples of UJS. It’s not complete yet, but if you’re interested in checking it out (http://manning.com/katz/), there is a discount code (50% off; valid Jan 23 to Feb 23): rails350Tuesday, February 1, 2011
  • 56. Resources: Otherwise, your best bet seems to be searching for blog posts and reading the Rails 3 source (particularly rails.js).Tuesday, February 1, 2011
  • 57. Questions?Tuesday, February 1, 2011
  • 58. railroad closeup: http://www.flickr.com/photos/ericrice/25207672/sizes/m/in/photostream/ railroad clock: http://www.flickr.com/photos/dougtone/4127322153/sizes/z/in/photostream/ train picture: http://www.flickr.com/photos/eterno_retorno/2383602431/sizes/z/in/photostream/Tuesday, February 1, 2011