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
Magic
traditionally been “just there” and have
always “just worked”
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
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
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. 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. 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
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:
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. 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. 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
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. 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 // jQuery rails.js
ajax:before ajax:beforeSend
ajax:success ajax:success
ajax:complete ajax:complete
ajax:failure ajax:error
ajax:after
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
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.
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. 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. 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