UJS in Rails 3

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. Prototype and Ajaxy helpers have traditionally been “just there” and have always “just worked”Tuesday, February 1, 2011

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

Tuesday, February 1, 2011

Unobtrusive JavascriptTuesday, February 1, 2011

Unobtrusive Javascript Unobtrusive Javascript is simply the idea of keeping your behavior-deﬁning script out of your content. It’s the same idea as keeping your style- deﬁning rules (CSS) out of your content.Tuesday, February 1, 2011

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

Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’?Tuesday, February 1, 2011

Unobtrusive Javascript Is ‘unobtrusive’ Javascript ‘better’? WELL, THAT’S JUST, LIKE YOUR OPINION MANTuesday, February 1, 2011

Unobtrusive Javascript Making Javascript ‘unobtrusive’ won’t magically make your code any better. But...Tuesday, February 1, 2011

Unobtrusive Javascript It’s ‘better’ in the same sense that separating style from content is ‘better’.Tuesday, February 1, 2011

Unobtrusive Javascript And it’s how Javascript helpers are handled by default in Rails 3.Tuesday, February 1, 2011

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

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

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 JS, Rails 3 uses HTML5 data- attributes.Tuesday, February 1, 2011

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

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

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

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

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

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

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

UJS in Rails 3 ‘data-method’ and ‘data-conﬁrm’ 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

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

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

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

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 ﬁre a function in rails.js which creates an XMLHttpRequest and sends it to the URL in your href attribute.Tuesday, February 1, 2011

UJS in Rails 3 3. Replacing Prototype with jQuery, mootools, or... Rails 3 has made this very simple.Tuesday, February 1, 2011

UJS in Rails 3 If we want to use jQuery, for example, we simply add to our Gemﬁle: gem jquery-rails And then (in the terminal) : % bundle install % rails g jquery:installTuesday, February 1, 2011

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

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 we can respond to the xhr sent by our delete link.Tuesday, February 1, 2011

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

UJS in Rails 3: an example This might look something like: / destroy.js.haml $("#posts").html("#{escape_javascript(render (@posts))}");Tuesday, February 1, 2011

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

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

UJS in Rails 3: an example There are several events ﬁred 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

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, February 1, 2011

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

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

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

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

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

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

Questions?Tuesday, February 1, 2011

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

http://philcrissman.com	293
http://philcrissman.github.com	14
http://localhost	13
http://looselyjoined.net	4
http://liveweb.archive.org	1

UJS in Rails 3

by philcrissman on Feb 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 325

Statistics

UJS in Rails 3 — Presentation Transcript