• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Unobtrusive JavaScript
 

Unobtrusive JavaScript

on

  • 1,784 views

My presentation from the first moscow alt.net user group event

My presentation from the first moscow alt.net user group event

Statistics

Views

Total Views
1,784
Views on SlideShare
1,783
Embed Views
1

Actions

Likes
2
Downloads
10
Comments
0

1 Embed 1

http://coderwall.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Unobtrusive JavaScript Unobtrusive JavaScript Presentation Transcript

    • UJSUnobtrusive JavaScript
    • • Software Developer • Blogger • Podcaster • Speakervitaly.baum@gmail.comwww.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 • Client side – Page layout – Async – Custom DSLs [Haml]
    • 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 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 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