1. Unobtrusive Ajax
With Rails
Dan Webb (dan@danwebb.net)

2. Overview
A bit of history
★
What is unobtrusive scripting?
★
The UJS Plugin
★
Casestudy
★
Ranting Upcoming UJS Features
★

3. The dark days of
DHTML

7. Then web standards
arrived

8. The Client-side Cake
Style - CSS
Content - (X)HTML

9. What web standards
did for us
More maintainable
★
More accessible
★
Leaner pages
★
Platform independent (print, mobile...)
★
'Future-proof' as well as backwards
★
compatible

10. JavaScript got a
bad name

11. It deserved it

12. Web 2.0

13. Folksonomies

14. Massive text boxes

15. Social software

16. and Ajax...

17. JavaScript is trendy
again!

18. Browser support is
much better

19. We learnt our
lessons from the
DHTML days

20. What did we learn?

21. Unobtrusive DOM
Scripting

22. It's an approach to
browser UI design

23. It's about separating
content and style
from behaviour

24. Behaviour: A new layer for
the client-side cake
Behaviour - JavaScript
Style - CSS
Content - (X)HTML

25. It's enhancing a
working application

26. so it degrades
gracefully when
things don't work

27. It's not just about
putting JavaScript in
a different file

28. It's not rocket
science

29. It's not the
'Rails Way'

30. An example:
link_to_remote

31. <%= link_to_remote 'View description',
:controller => 'product',
:action => 'desc',
:id => @product.id %>

32. <a href=quot;#quot; onclick=quot;new Ajax.Request('/product/
desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>

33. # better...
<a href=quot;/product/desc/1quot; onclick=quot;new
Ajax.Request(this.href, {asynchronous:true,
evalScripts:true}); return false;quot;>View
description</a>

34. It's not possible to
do that with
link_to_remote

35. <% @products.each do |product| %>
<%= link_to_remote 'View description',
:controller => 'product',
:action => 'desc',
:id => @product.id %>
<% end %>

36. <a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true});
return false;quot;>View description</a>

37. <a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>
<a href=quot;#quot; onclick=quot;new Ajax.Request('/product/desc/1', {asynchronous:true, evalScripts:true}); return false;quot;>View description</a>

38. Getting started

39. The UJS Plugin
A plugin to aid unobtrusive scripting
★
with Rails
Allows you to define behaviours via
★
CSS selectors
Keeps script in an external, cacheable
★
files
www.ujs4rails.com - check it out!
★

40. Remote Links

41. <ul id=quot;outlinequot;>
<% @items.each do |item| %>
<li><%= link_to :action => 'more',
:id => @item.id %></li>
<% end %>
</ul>

42. <ul id=quot;outlinequot;>
<% @items.each do |item| %>
<li><%= link_to :action => 'more',
:id => @item.id %></li>
<% end %>
</ul>
<% apply_behaviour '#outline a:click',
'new Ajax.Request(this.href); return false;' %>

43. <ul id=quot;outlinequot;>
<% @items.each do |item| %>
<li><%= link_to :action => 'more',
:id => @item.id %></li>
<% end %>
</ul>
<% apply_behaviour '#outline a', make_remote_link %>

44. What about links
with side-effects?

45. Links should never
have side effects

46. Use a button
<%= button_to 'Remove from basket',
:method => :delete %>

47. <form class=quot;button-toquot; action=quot;/basket/2quot; method=quot;postquot;>
<input type=quot;hiddenquot; name=quot;_methodquot; value=quot;deletequot; />
<input type=quot;submitquot; value=quot;Remove from basketquot; />
</form>

48. Then attach the behaviour
<%= button_to 'Remove from basket',
:method => :delete %>
<% apply_behaviour 'form.button-to',
make_remote_form %>

49. Hijacking forms

50. <%= form_tag :url => entries_url, :id => 'comment' %>
<%= text_field :name %>
<%= text_field :email %>
<%= text_area :comment %>
<%= submit_tag 'Post comment' %>
<%= end_form_tag %>

51. <%= form_tag :url => entries_url, :id => 'comment' %>
<%= text_field :name %>
<%= text_field :email %>
<%= text_area :comment %>
<%= submit_tag 'Post comment' %>
<%= end_form_tag %>
<% apply_behaviour '#comment:submit',
'new Ajax.Request(this.action, { parameters :
Form.serialize(this)}); return false;' %>

52. <%= form_tag :url => entries_url, :id => 'comment' %>
<%= text_field :name %>
<%= text_field :email %>
<%= text_area :comment %>
<%= submit_tag 'Post comment' %>
<%= end_form_tag %>
<% apply_behaviour '#comment', make_remote_form %>

53. A Case Study
Sneakr.com: A Web 2.0, Ajax Trainer Shop

54. routes.rb
map.resource :products
map.resource :basket, :controller => 'basket',
:collection => {:clear => :post}

55. The Product Controller
class ProductController < ApplicationController
def index # show all products
@products = Product.find :all
end
def show # show the details of a product
@product = Product.find params[:id]
end
end

56. index.rhtml
<div id=quot;cataloguequot;>
<%= render :partial => 'products' %>
</div>
<div id=quot;basketquot;>
<%= render :partial => 'basket' %>
</div>

57. _products.rhtml
<ul>
<% @products.each do |product| %>
<li id=quot;<%= product.id %>_prodquot;>
<%= link_to product.name, product_url(product) %>
<%= product.description %>
</li>
<% end %>
</ul>

58. show.rhtml
<h1><%= @product.name %></h1>
<p><%= image_tag @product.photo.public_filename %></p>
<p><%= @product.description %></p>
<p><%= button_to 'Add To Basket', basket_url
(@product), :method => :put %></p>

59. The Basket Controller
class BasketController < ApplicationController
def update
@product = Product.find params[:id]
@basket << @product
redirect_to products_url
end
end

60. We're done!

61. now to add the Ajax

62. <% apply_behaviours do
on '#catalogue li',
make_draggable(:revert => true)
on '#basket', make_drop_receiving(
:url => basket_url,
:with => quot;'_method=put&id=' +
encodeURIComponent(element.id)quot;
)
end %>

63. <% apply_behaviours do
on '#catalogue li',
make_draggable(:revert => true)
on '#basket', make_drop_receiving(
:url => basket_url,
:with => quot;'_method=put&id=' +
encodeURIComponent(element.id)quot;
)
end %>

64. So how do we deal
with this on the
server-side?

65. respond_to

66. class BasketController < ApplicationController
def update
@product = Product.find params[:id]
@basket << @product
redirect_to products_url
end
end

67. class BasketController < ApplicationController
def update
@product = Product.find params[:id]
@basket << @product
respond_to do |type|
type.html { redirect_to products_url }
type.js
end
end
end

68. update.rjs
page.replace_html 'basket',
:partial => 'basket'

69. Take a look for
yourself...
http://www.danwebb.net/railsconf2006/ujs_shopping.zip

70. We have no control
over the
environment our
JavaScript runs in

71. Code defensively

72. The path to enlightenment
Write a working application using
★
semantic HTML
Style it with CSS
★
Write JavaScript that 'hijacks' the page
★
elements to enhance the UI
Learn JavaScript and DOM Scripting
★

73. Further Reading
The JavaScript articles on A List Apart
★
(alistapart.com)
Unobtrusive Scripting by Christian
★
Heilmann (onlinetools.org)
Jeremy Keith's presentations, book and
★
articles (domscripting.com)
Google it!
★

74. Upcoming in UJS
Improved testing (custom assertions)
★
Improved debugging
★
More behaviour helpers
★
More tutorials on ujs4rails.com
★

75. And finally...
<%= apply_behaviour @products, make_draggable %>

76. <% div_for @product, :behavior => make_draggable do %>
<h2><%= @product.name %></h2>
<p><%= @product.description %></p>
<% end %>

77. Questions?