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