Unobtrusive JavaScript

UJS Unobtrusive JavaScript

• Software Developer

• Blogger

• Podcaster

• Speaker

[email protected]

www.butaji.ru

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

[email protected]