UJS in Rails 3

Talk given at http://ruby.mn a couple years ago.

Transcript

1. UJS in Rails 3 Tuesday, February 1, 2011
2. UJS in Rails 3 by Phil Crissman Tuesday, February 1, 2011
3. Rails and Javascript Tuesday, 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 traditionally been “just there” and have always “just worked” Magic Tuesday, February 1, 2011
6. Tuesday, February 1, 2011
7. Tuesday, February 1, 2011
8. Unobtrusive Javascript Tuesday, 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 MAN Tuesday, 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 And wrote all your Javascript from scratch. In the past, if you wanted to use unobtrusive javascript techniques in Rails, you simply stopped using the built-in Javascript helpers... Tuesday, February 1, 2011
18. Unobtrusive Javascript And still write all your Javascript from scratch. In Rails 3, you get to keep using the built-in Javascript helpers... Tuesday, February 1, 2011
19. Unobtrusive Javascript And still write all your Javascript from scratch. In Rails 3, you get to keep using the built-in Javascript helpers... Tuesday, February 1, 2011
20. UJS in Rails 3 Tuesday, 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: 2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone). 1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes. Tuesday, February 1, 2011
24. UJS in Rails 3 Rails 3 makes several changes to the Javascript helpers: 3. It’s a lot easier to pull out Prototype and switch to jQuery or mootools, etc, if you want to. 2. No more ‘remote’ helpers (link_to_remote, remote_form_for, et al., are gone). 1. Instead of inserting inline JS, Rails 3 uses HTML5 data- attributes. 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 (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> Magic 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:install Tuesday, 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 example Tuesday, 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 ajax:before ajax:success ajax:complete ajax:failure ajax:after // jQuery rails.js ajax:beforeSend ajax:success ajax:complete ajax:error Tuesday, 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. 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. However, in Rails 3, these helpers aim to be unobtrusive. Tuesday, February 1, 2011
53. Recap: Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this. 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. 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. However, in Rails 3, these helpers aim to be unobtrusive. 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): rails350 Tuesday, 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