unobtrusive javascript
DESCRIPTION
My presentation from the first moscow alt.net user group eventTRANSCRIPT
UJS Unobtrusive JavaScript
Agenda
• What’s the problem
• Patterns
• Rails.js
• Adaptation
– ASP.NET MVC
.ajax
What’s the problem
• Server-side JavaScript generation
– GWT
– Script#
What’s the problem
• A lot of JavaScript frameworks
– jQuery
– Prototype
Patterns
just step on a rake
Template Patterns
• Double templating
• Just Ajax
• Update panel
• Loaded JavaScript
Double templating
• Server side
– Page layout
– Custom DSLs
[Haml]
• Client side
– Async
Double templating
<!-- Server side -->
<h2><%= product.Name %></h2>
<p><%= product.Description %></p>
Double templating
<script type="text/javascript">
function addProduct(prod) {
var pDiv = "<h2>" + prod.Title + "</h2>" + "<p>" + prod.Descr + "</p>";
$("#items").append(pDiv);
}
</script>
Double templating
• Less client cpu load
• Less traffic
• Different places with markup
Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
<div id="items"></div> $.ajax(…)
Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
{[ { "item": { "title": "product 1"} }, { "item": { "title": "product 2" } } ]}
Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
$("#items").appentTo(pDiv);
Just Ajax
JavaScript JSON/XML JavaScript HTML
Server
<div id="items"> <h2>product 1</h2> <h2>product 2</h2> </div>
Just Ajax
• More client cpu load
• Less time on page load
• Less traffic
Update panel
• Full page post-back
• Partial page refreshing
Update panel
Client Server
Magic JS
John
Total
0
1000$
OK
Update panel
Client Server
John
1000$
Total
0
OK
Code
Magic JS
Update panel
Client Server
John
Total
0
Code
Magic JS
OK
1000$
Update panel
• More traffic/complexity
• Automatic management
• Constraints
• Less work
Loaded JavaScript
• Partial post-back
• Partial refreshing
Loaded JavaScript
Client Server
John
1000$
Total
0
OK
Code
Hand-written JS
Loaded JavaScript
• Fine tuning
• Not too much work
• One template
Rails.js my pretty love
Unobtrusive JavaScript
in Rails 2.3 remote_form_for(@item)
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;">
Unobtrusive JavaScript
in Rails 2.3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete
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>
data-* works even in IE6
HTML 5 custom data attributes
• data-remote
• data-method
• data-confirm
• data-disable-with
Unobtrusive JavaScript
in Rails 3 form_for(@item, :remote => true)
Unobtrusive JavaScript
in Rails 3 form_for(@item, :remote => true)
<form action="/items" class="new_item" data-remote="true" id="Form1" method="post">
Unobtrusive JavaScript
in Rails 3 link_to 'Destroy', @item, :confirm => 'Are you sure?',:method => :delete
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>
Unobtrusive JavaScript
HTML Custom Data Attributes
JavaScript Driver
JavaScript Framework
Rails 3 JavaScript Drivers
• Prototype: default
• jQuery:
http://github.com/rails/jquery-ujs
• MooTools:
http://mootools.net/forge/p/rails_3_driver
What if I want
UJS into my framework
ASP.NET Adaptation
Summary
• What’s the problem
• Patterns
• Rails.js
• Adaptation
– ASP.NET MVC
Thank you!
Moscow ALT.NET here http://groups.google.com/group/moscow-altnet
Vitaly Baum here http://butaji.ru