My presentation from the first moscow alt.net user group event

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