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>" +...
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": ...
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<...
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                   Mag...
Update panel     John    1000$              OK                              Code     Total       0     Client             ...
Update panel     John    1000$              OK                              Code     Total       0     Client             ...
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...
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="p...
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" on...
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="tr...
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"   da...
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/fo...
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          ...
Unobtrusive JavaScript
Upcoming SlideShare
Loading in …5
×

Unobtrusive JavaScript

1,943 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,943
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Unobtrusive JavaScript

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

×