Unobtrusive JavaScript

• Software Developer
• Blogger
• Podcaster
• Speaker

vitaly.baum@gmail.com
www.butaji.ru

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

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 • Client side
– Page layout – Async
– Custom DSLs
[Haml]

Double templating

<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

Server

<div id="items"></div>

$.ajax(…)

Just Ajax

Server

{[
{ "item": { "title": "product 1"} },
{ "item": { "title": "product 2" } }
]}

Just Ajax

Server

$("#items").appentTo(pDiv);

Just Ajax

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
John
1000$

OK

Total
0

Client Server
Magic JS

Update panel
John
1000$

OK
Code
Total
0

Client Server
Magic JS

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

Loaded JavaScript
• Partial post-back
• Partial refreshing

Loaded JavaScript
John
1000$

OK
Code
Total
0

Client Server
Hand-written JS

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

Unobtrusive JavaScript
in Rails 2.3
remote_form_for(@item)

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;">

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

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>

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

in Rails 3
form_for(@item, :remote => true)

in Rails 3
form_for(@item, :remote => true)

<form action="/items" class="new_item"
data-remote="true" id="Form1"
method="post">

in Rails 3

in Rails 3

<a href="/items/1"
data-confirm="Are you sure?"
data-method="delete“
rel="nofollow">Destroy</a>


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

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
vitaly.baum@gmail.com

Unobtrusive JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Unobtrusive JavaScript

Recently uploaded

Unobtrusive JavaScript