ujs in rails 3
DESCRIPTION
An overview of the changes in Rails 3 regarding Javascript helpers and integration.TRANSCRIPT
![Page 1: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/1.jpg)
UJS inRails 3
Tuesday, February 1, 2011
![Page 2: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/2.jpg)
UJS inRails 3
by Phil CrissmanTuesday, February 1, 2011
![Page 3: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/3.jpg)
Rails and Javascript
Tuesday, February 1, 2011
![Page 4: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/4.jpg)
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
![Page 5: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/5.jpg)
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
![Page 6: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/6.jpg)
Tuesday, February 1, 2011
![Page 7: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/7.jpg)
Tuesday, February 1, 2011
![Page 8: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/8.jpg)
Unobtrusive Javascript
Tuesday, February 1, 2011
![Page 9: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/9.jpg)
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
![Page 10: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/10.jpg)
Unobtrusive JavascriptSo 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
![Page 11: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/11.jpg)
Unobtrusive JavascriptIs ‘unobtrusive’ Javascript ‘better’?
Tuesday, February 1, 2011
![Page 12: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/12.jpg)
Unobtrusive JavascriptIs ‘unobtrusive’ Javascript ‘better’?
Tuesday, February 1, 2011
![Page 13: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/13.jpg)
Unobtrusive JavascriptIs ‘unobtrusive’ Javascript ‘better’?
WELL, THAT’S JUST, LIKE
YOUR OPINION
MAN
Tuesday, February 1, 2011
![Page 14: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/14.jpg)
Unobtrusive Javascript
Making Javascript ‘unobtrusive’ won’t magically make your code any better.
But...
Tuesday, February 1, 2011
![Page 15: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/15.jpg)
Unobtrusive Javascript
It’s ‘better’ in the same sense that separating style from content is ‘better’.
Tuesday, February 1, 2011
![Page 16: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/16.jpg)
Unobtrusive Javascript
And it’s how Javascript helpers are handled by default in Rails 3.
Tuesday, February 1, 2011
![Page 17: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/17.jpg)
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
![Page 18: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/18.jpg)
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
![Page 19: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/19.jpg)
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
![Page 20: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/20.jpg)
UJS in Rails 3
Tuesday, February 1, 2011
![Page 21: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/21.jpg)
UJS in Rails 3
Rails 3 makes several changes to the Javascript helpers:
Tuesday, February 1, 2011
![Page 22: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/22.jpg)
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
![Page 23: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/23.jpg)
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
![Page 24: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/24.jpg)
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
![Page 25: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/25.jpg)
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
![Page 26: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/26.jpg)
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
![Page 27: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/27.jpg)
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
![Page 28: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/28.jpg)
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
![Page 29: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/29.jpg)
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
![Page 30: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/30.jpg)
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
![Page 31: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/31.jpg)
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
![Page 32: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/32.jpg)
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
![Page 33: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/33.jpg)
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
![Page 34: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/34.jpg)
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
![Page 35: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/35.jpg)
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
![Page 36: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/36.jpg)
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
![Page 37: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/37.jpg)
UJS in Rails 3
3. Replacing Prototype with jQuery, mootools, or...
Rails 3 has made this very simple.
Tuesday, February 1, 2011
![Page 38: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/38.jpg)
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
![Page 39: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/39.jpg)
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
![Page 40: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/40.jpg)
UJS in Rails 3: an example
Tuesday, February 1, 2011
![Page 41: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/41.jpg)
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
![Page 42: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/42.jpg)
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
![Page 43: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/43.jpg)
UJS in Rails 3: an example
This might look something like:
/ destroy.js.haml$("#posts").html("#{escape_javascript(render(@posts))}");
Tuesday, February 1, 2011
![Page 44: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/44.jpg)
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
![Page 45: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/45.jpg)
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
![Page 46: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/46.jpg)
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.jsajax:beforeajax:successajax:completeajax:failureajax:after
// jQuery rails.jsajax:beforeSendajax:successajax:completeajax:error
Tuesday, February 1, 2011
![Page 47: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/47.jpg)
Obtrusive JavascriptBut, if you’re determined to cling to the past:
Tuesday, February 1, 2011
![Page 48: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/48.jpg)
Obtrusive JavascriptBut, if you’re determined to cling to the past:
Tuesday, February 1, 2011
![Page 49: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/49.jpg)
Recap:
Tuesday, February 1, 2011
![Page 50: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/50.jpg)
Recap:Rails has a long history of tightly integrating Javascript view helpers; Rails 3 continues this.
Tuesday, February 1, 2011
![Page 51: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/51.jpg)
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
![Page 52: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/52.jpg)
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
![Page 53: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/53.jpg)
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
![Page 54: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/54.jpg)
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
![Page 55: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/55.jpg)
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
![Page 56: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/56.jpg)
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
![Page 57: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/57.jpg)
Questions?
Tuesday, February 1, 2011
![Page 58: UJS in Rails 3](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b790734a79591d4a8b4584/html5/thumbnails/58.jpg)
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