UJS in Rails 3

UJS in
Rails 3
Tuesday, February 1, 2011

UJS in
Rails 3 by Phil Crissman

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”



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”


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.


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>

Is ‘unobtrusive’ Javascript ‘better’?


Is ‘unobtrusive’ Javascript ‘better’?

WELL, THAT’S JUST, LIKE

YOUR OPINION

MAN



Making Javascript ‘unobtrusive’ won’t
magically make your code any better.

But...



It’s ‘better’ in the same sense that separating
style from content is ‘better’.



And it’s how Javascript helpers are handled by
default in Rails 3.



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.



In Rails 3, you get to keep using the built-in
Javascript helpers...

And still write all your Javascript from scratch.


UJS in Rails 3


UJS in Rails 3
Rails 3 makes several changes to the
Javascript helpers:


UJS in Rails 3
Javascript helpers:
1. Instead of inserting inline JS, Rails 3 uses
HTML5 data- attributes.


UJS in Rails 3
Javascript helpers:
2. No more ‘remote’ helpers (link_to_remote,
remote_form_for, et al., are gone).


UJS in Rails 3
Javascript helpers:
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.


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.


UJS in Rails 3

Common use case: deleting something, via a
link:
<%= link_to "Delete", posts_path(@post),
:method => "delete", :confirm => "Are you
sure?" %>


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>


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>


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>


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));
}


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.


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 %>


UJS in Rails 3
This will render (you guessed it) as:

sure?" data-method="delete" data-remote="true"


UJS in Rails 3
This will render (you guessed it) as:

sure?" data-method="delete" data-remote="true"

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.


UJS in Rails 3

3. Replacing Prototype with jQuery, mootools,
or...

Rails 3 has made this very simple.


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:install


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.


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.



1. You could write a javascript template; for a
destroy action, this might be destroy.js.erb (or
destroy.js.haml)...



This might look something like:

/ destroy.js.haml
$("#posts").html("#{escape_javascript(render
(@posts))}");



2. Or, you might write javascript hooks straight
into application.js, which will be called at the
appropriate time.



In public/javascripts/application.js:

$(function(){
$('#posts a').bind("ajax:complete", function
(n, xhr){
$(this).parent().parent().fadeOut(4000);
});
});


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:after


Obtrusive Javascript
But, if you’re determined to cling to the past:


Recap:


Recap:
Rails has a long history of tightly integrating Javascript
view helpers; Rails 3 continues this.


Recap:
However, in Rails 3, these helpers aim to be
unobtrusive.


Recap:
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.


Recap:
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.


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.


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


Resources:

Otherwise, your best bet seems to be searching for
blog posts and reading the Rails 3 source (particularly
rails.js).


Questions?


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/


UJS in Rails 3

Recommended

Recommended

More Related Content

Similar to UJS in Rails 3

Similar to UJS in Rails 3 (20)

Recently uploaded

Recently uploaded (20)

UJS in Rails 3