Your SlideShare is downloading. ×
0
UJS in      Rails 3Tuesday, February 1, 2011
UJS in      Rails 3               by Phil CrissmanTuesday, February 1, 2011
Rails and JavascriptTuesday, February 1, 2011
Rails and Javascript       Javascript helpers have been built into       Rails from the very earliest versions.       Prot...
Rails and Javascript       Javascript helpers have been built into       Rails from the very earliest versions.       Prot...
Tuesday, February 1, 2011
Tuesday, February 1, 2011
Unobtrusive JavascriptTuesday, February 1, 2011
Unobtrusive Javascript         Unobtrusive Javascript is simply the idea         of keeping your behavior-defining script  ...
Unobtrusive Javascript       So instead of:       <a href="#" onclick="alert(ok!);"> Hey </a>       We would do:       <a ...
Unobtrusive Javascript       Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
Unobtrusive Javascript       Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
Unobtrusive Javascript       Is ‘unobtrusive’ Javascript ‘better’?                            WELL, THAT’S JUST, LIKE     ...
Unobtrusive Javascript       Making Javascript ‘unobtrusive’ won’t       magically make your code any better.       But......
Unobtrusive Javascript       It’s ‘better’ in the same sense that separating       style from content is ‘better’.Tuesday,...
Unobtrusive Javascript       And it’s how Javascript helpers are handled by       default in Rails 3.Tuesday, February 1, ...
Unobtrusive Javascript       In the past, if you wanted to use unobtrusive       javascript techniques in Rails, you simpl...
Unobtrusive Javascript       In Rails 3, you get to keep using the built-in       Javascript helpers...       And still wr...
Unobtrusive Javascript       In Rails 3, you get to keep using the built-in       Javascript helpers...       And still wr...
UJS in Rails 3Tuesday, February 1, 2011
UJS in Rails 3       Rails 3 makes several changes to the       Javascript helpers:Tuesday, February 1, 2011
UJS in Rails 3       Rails 3 makes several changes to the       Javascript helpers:       1. Instead of inserting inline J...
UJS in Rails 3       Rails 3 makes several changes to the       Javascript helpers:       1. Instead of inserting inline J...
UJS in Rails 3       Rails 3 makes several changes to the       Javascript helpers:       1. Instead of inserting inline J...
UJS in Rails 3       1. Data attributes.       Rails takes advantage of a new feature of       HTML5: any tag can have any...
UJS in Rails 3       Common use case: deleting something, via a       link:       <%= link_to "Delete", posts_path(@post),...
UJS in Rails 3       Would render (pre Rails 3) as:       <a href="/posts/1" onclick="if (confirm(Are you sure?)) { var   ...
UJS in Rails 3       Would render as:       <a href="/posts/1" onclick="if (confirm(Are you sure?)) { var       f = docume...
UJS in Rails 3       In Rails 3, this same link_to statement...       <%= link_to "Delete", posts_path       (@post), :met...
UJS in Rails 3       In Rails 3, this same link_to statement...       <%= link_to "Delete", posts_path       (@post), :met...
UJS in Rails 3         ‘data-method’ and ‘data-confirm’ attributes         (and everything else) are handled from         /...
UJS in Rails 3       2. ‘remote’ helpers.       Instead of helpers like link_to_remote, in Rails       3, :remote is a par...
UJS in Rails 3       So if we want to make our delete link ajaxy:       <%= link_to "Delete", posts_path       (@post), :m...
UJS in Rails 3       So if we want to make our delete link ajaxy:       <%= link_to "Delete", posts_path       (@post), :m...
UJS in Rails 3       This will render (you guessed it) as:       <a href="/posts/1" data-confirm="Are you       sure?" dat...
UJS in Rails 3       This will render (you guessed it) as:       <a href="/posts/1" data-confirm="Are you       sure?" dat...
UJS in Rails 3       3. Replacing Prototype with jQuery, mootools,       or...       Rails 3 has made this very simple.Tue...
UJS in Rails 3       If we want to use jQuery, for example, we       simply add to our Gemfile:       gem jquery-rails     ...
UJS in Rails 3       Side note: RJS       If you use RJS, just adding jquery-rails does       not (at the moment, at least...
UJS in Rails 3: an exampleTuesday, February 1, 2011
UJS in Rails 3: an example       Let’s actually make it work. Even if not using       RJS, there are still a couple ways w...
UJS in Rails 3: an example       1. You could write a javascript template; for a       destroy action, this might be destr...
UJS in Rails 3: an example       This might look something like:       / destroy.js.haml       $("#posts").html("#{escape_...
UJS in Rails 3: an example       2. Or, you might write javascript hooks straight       into application.js, which will be...
UJS in Rails 3: an example       In public/javascripts/application.js:       $(function(){         $(#posts a).bind("ajax:...
UJS in Rails 3: an example       There are several events fired with each xhr       (they differ slightly between the Proto...
Obtrusive Javascript       But, if you’re determined to cling to the past:Tuesday, February 1, 2011
Obtrusive Javascript       But, if you’re determined to cling to the past:Tuesday, February 1, 2011
Recap:Tuesday, February 1, 2011
Recap:       Rails has a long history of tightly integrating Javascript       view helpers; Rails 3 continues this.Tuesday...
Recap:       Rails has a long history of tightly integrating Javascript       view helpers; Rails 3 continues this.       ...
Recap:       Rails has a long history of tightly integrating Javascript       view helpers; Rails 3 continues this.       ...
Recap:       Rails has a long history of tightly integrating Javascript       view helpers; Rails 3 continues this.       ...
Resources:       There are several books recently or soon-to-be       published covering Rails 3; most seem to have little...
Resources:       Rails 3 in Action, by Yehuda Katz (@wycats) and Ryan       Bigg (@ryanbigg), will contain some examples o...
Resources:       Otherwise, your best bet seems to be searching for       blog posts and reading the Rails 3 source (parti...
Questions?Tuesday, February 1, 2011
railroad closeup: http://www.flickr.com/photos/ericrice/25207672/sizes/m/in/photostream/                    railroad clock:...
Upcoming SlideShare
Loading in...5
×

UJS in Rails 3

11,154

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • lol, very interesting slideshow! thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
11,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "UJS in Rails 3"

  1. 1. UJS in Rails 3Tuesday, February 1, 2011
  2. 2. UJS in Rails 3 by Phil CrissmanTuesday, February 1, 2011
  3. 3. Rails and JavascriptTuesday, February 1, 2011
  4. 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. 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. 6. Tuesday, February 1, 2011
  7. 7. Tuesday, February 1, 2011
  8. 8. Unobtrusive JavascriptTuesday, February 1, 2011
  9. 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. 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. 11. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
  12. 12. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011
  13. 13. Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’? WELL, THAT’S JUST, LIKE YOUR OPINION MANTuesday, February 1, 2011
  14. 14. Unobtrusive Javascript Making Javascript ‘unobtrusive’ won’t magically make your code any better. But...Tuesday, February 1, 2011
  15. 15. Unobtrusive Javascript It’s ‘better’ in the same sense that separating style from content is ‘better’.Tuesday, February 1, 2011
  16. 16. Unobtrusive Javascript And it’s how Javascript helpers are handled by default in Rails 3.Tuesday, February 1, 2011
  17. 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. 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. 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. 20. UJS in Rails 3Tuesday, February 1, 2011
  21. 21. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers:Tuesday, February 1, 2011
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. UJS in Rails 3 3. Replacing Prototype with jQuery, mootools, or... Rails 3 has made this very simple.Tuesday, February 1, 2011
  38. 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. 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. 40. UJS in Rails 3: an exampleTuesday, February 1, 2011
  41. 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. 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. 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. 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. 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. 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. 47. Obtrusive Javascript But, if you’re determined to cling to the past:Tuesday, February 1, 2011
  48. 48. Obtrusive Javascript But, if you’re determined to cling to the past:Tuesday, February 1, 2011
  49. 49. Recap:Tuesday, February 1, 2011
  50. 50. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this.Tuesday, February 1, 2011
  51. 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. 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. 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. 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. 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. 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. 57. Questions?Tuesday, February 1, 2011
  58. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×