Unobtrusive JavaScript

UJSUnobtrusive JavaScript

• Software Developer • Blogger • Podcaster • Speakervitaly.baum@gmail.comwww.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 AjaxJavaScript JSON/XML JavaScript HTML Server

Just AjaxJavaScript JSON/XML JavaScript HTML Server<div id="items"></div>$.ajax(…)

Just AjaxJavaScript JSON/XML JavaScript HTML Server{[ { "item": { "title": "product 1"} }, { "item": { "title": "product 2" } }]}

Just AjaxJavaScript JSON/XML JavaScript HTML Server$("#items").appentTo(pDiv);

Just AjaxJavaScript 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 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

Rails.js my pretty love

Unobtrusive JavaScriptin Rails 2.3remote_form_for(@item)

Unobtrusive JavaScriptin Rails 2.3remote_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 JavaScriptin Rails 2.3link_to Destroy, @item, :confirm =>Are you sure?,:method => :delete

Unobtrusive JavaScriptin Rails 2.3link_to Destroy, @item, :confirm => Are yousure?,: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 JavaScriptin Rails 3form_for(@item, :remote => true)

Unobtrusive JavaScriptin Rails 3form_for(@item, :remote => true)<form action="/items" class="new_item" data-remote="true" id="Form1" method="post">

Unobtrusive JavaScriptin Rails 3link_to Destroy, @item, :confirm =>Are you sure?,:method => :delete

Unobtrusive JavaScriptin Rails 3link_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 JavaScriptHTML 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 wantUJSinto 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 vitaly.baum@gmail.com

Unobtrusive JavaScript

by Vitaly Baum on Feb 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Unobtrusive JavaScript — Presentation Transcript