Your SlideShare is downloading. ×
Unobtrusive JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unobtrusive JavaScript

1,657

Published on

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

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,657
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×