This document discusses unobtrusive JavaScript and patterns for implementing it in web frameworks. It begins by outlining problems with server-side JavaScript generation and the proliferation of JavaScript frameworks. It then covers common patterns for unobtrusive JavaScript like double templating, just Ajax, and update panels. The document also explains how Rails implements unobtrusive JavaScript using drivers, data attributes, and remote forms. It concludes by discussing how these patterns and techniques could be adapted for ASP.NET MVC.

1. UJS
Unobtrusive JavaScript

2. • Software Developer
• Blogger
• Podcaster
• Speaker
vitaly.baum@gmail.com
www.butaji.ru

3. Agenda
• What’s the problem
• Patterns
• Rails.js
• Adaptation
– ASP.NET MVC

5. .ajax

6. What’s the problem
• Server-side JavaScript generation
– GWT
– Script#

7. What’s the problem
• A lot of JavaScript frameworks
– jQuery
– Prototype

8. Patterns
just step on a rake

9. Template Patterns
• Double templating
• Just Ajax
• Update panel
• Loaded JavaScript

10. Double templating
• Server side • Client side
– Page layout – Async
– Custom DSLs
[Haml]

11. Double templating
<!-- Server side -->
<h2><%= product.Name %></h2>
<p><%= product.Description %></p>

12. Double templating
<script type="text/javascript">
function addProduct(prod) {
var pDiv = "<h2>" + prod.Title +
"</h2>" + "<p>" + prod.Descr + "</p>";
$("#items").append(pDiv);
}
</script>

13. Double templating
• Less client cpu load
• Less traffic
• Different places with markup

14. Just Ajax
JavaScript JSON/XML JavaScript HTML
Server

15. Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
<div id="items"></div>
$.ajax(…)

16. Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
{[
{ "item": { "title": "product 1"} },
{ "item": { "title": "product 2" } }
]}

17. Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
$("#items").appentTo(pDiv);

18. Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
<div id="items">
<h2>product 1</h2>
<h2>product 2</h2>
</div>

19. Just Ajax
• More client cpu load
• Less time on page load
• Less traffic

20. Update panel
• Full page post-back
• Partial page refreshing

21. Update panel
John
1000$
OK
Total
0
Client Server
Magic JS

22. Update panel
John
1000$
OK
Code
Total
0
Client Server
Magic JS

23. Update panel
John
1000$
OK
Code
Total
0
Client Server
Magic JS

24. Update panel
• More traffic/complexity
• Automatic management
• Constraints
• Less work

25. Loaded JavaScript
• Partial post-back
• Partial refreshing

26. Loaded JavaScript
John
1000$
OK
Code
Total
0
Client Server
Hand-written JS

27. Loaded JavaScript
• Fine tuning
• Not too much work
• One template

28. Rails.js
my pretty love

29. Unobtrusive JavaScript
in Rails 2.3
remote_form_for(@item)

30. Unobtrusive JavaScript
in Rails 2.3
remote_form_for(@item)
<form action="/posts" class="new_post“
id="new_post" method="post"
onsubmit="new Ajax.Request(
'/posts', {asynchronous:true,
evalScripts:true, parameters:
Form.serialize(this)});
return false;">

31. Unobtrusive JavaScript
in Rails 2.3
link_to 'Destroy', @item, :confirm =>
'Are you sure?',:method => :delete

32. Unobtrusive JavaScript
in Rails 2.3
link_to 'Destroy', @item, :confirm => 'Are you
sure?',:method => :delete
<a href="/items/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',
'LM2fEF6HuRWdYUZdEumWlemhI6iDPH97pqWhO4jEpiU=');
f.appendChild(s);f.submit(); };return false;">Destroy</a>

33. data-*
works even in IE6

34. HTML 5 custom data attributes
• data-remote
• data-method
• data-confirm
• data-disable-with

35. Unobtrusive JavaScript
in Rails 3
form_for(@item, :remote => true)

36. Unobtrusive JavaScript
in Rails 3
form_for(@item, :remote => true)
<form action="/items" class="new_item"
data-remote="true" id="Form1"
method="post">

37. Unobtrusive JavaScript
in Rails 3
link_to 'Destroy', @item, :confirm =>
'Are you sure?',:method => :delete

38. Unobtrusive JavaScript
in Rails 3
link_to 'Destroy', @item, :confirm =>
'Are you sure?',:method => :delete
<a href="/items/1"
data-confirm="Are you sure?"
data-method="delete“
rel="nofollow">Destroy</a>

39. Unobtrusive JavaScript
HTML Custom Data Attributes
JavaScript Driver
JavaScript Framework

40. Rails 3 JavaScript Drivers
• Prototype: default
• jQuery:
http://github.com/rails/jquery-ujs
• MooTools:
http://mootools.net/forge/p/rails_3_driver

41. What if I want
UJS
into my framework

42. ASP.NET Adaptation

43. Summary
• What’s the problem
• Patterns
• Rails.js
• Adaptation
– ASP.NET MVC

44. Thank you!
Moscow ALT.NET here
http://groups.google.com/group/moscow-altnet
Vitaly Baum here
http://butaji.ru
vitaly.baum@gmail.com