Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Destacado
Similar a NinjaScript and Mizugumo 2011-02-05
Similar a NinjaScript and Mizugumo 2011-02-05 (20)
Último
Último (20)
NinjaScript and Mizugumo 2011-02-05
- 1. NinjaScript JavaScript so unobtrusive, you’ll never see it coming. Mizugumo Make your Rails app walk on water with NinjaScript.
- 2. Evan Dorn CEO and Lead Developer, Logical Reality Design
- 3. Credits NinjaScript was invented and (almost) entirely coded by Judson Lester Co-owner and Senior Developer
- 4. NinjaScript
- 8. JavaScript enriches a fully functional website
- 9. Your site should work without JavaScript!
- 10. Why do I care? • Spiders & Automation • Accessibility: screen readers • NoScript users
- 11. Graceful degradation is a ROYAL PAIN
- 12. (Unless you use NinjaScript)
- 15. JS should be like CSS •CSS styles always apply • Even if the DOM changes • Why aren’t JS behaviors the same?
- 16. DOM Reconstruction and Event Bindings
- 17. DOM Reconstruction and Event Bindings div#content a.has_tooltip a.has_tooltip
- 18. DOM Reconstruction and Event Bindings • Bind a tooltip behavior div#content to $(‘.has_tooltip’) a.has_tooltip a.has_tooltip
- 19. DOM Reconstruction and Event Bindings • Bind a tooltip behavior div#content to $(‘.has_tooltip’) • Dynamically add a new .tooltip element a.has_tooltip a.has_tooltip a.has_tooltip
- 20. DOM Reconstruction and Event Bindings • Bind a tooltip behavior div#content to $(‘.has_tooltip’) • Dynamically add a new .tooltip element a.has_tooltip a.has_tooltip • New element has no bound event handler! a.has_tooltip
- 21. DOM Reconstruction and Event Bindings • Bind a tooltip behavior div#content to $(‘.has_tooltip’) • Dynamically add a new .tooltip element a.has_tooltip a.has_tooltip • New element has no bound event handler! a.has_tooltip • This is really lame ...
- 22. What we want
- 23. What we want • Specify JS behaviors via CSS selectors
- 24. What we want • Specify JS behaviors via CSS selectors • Behaviors should always apply
- 25. What we want • Specify JS behaviors via CSS selectors • Behaviors should always apply • Easy for the developer
- 27. Solution 1: Event Delegation • jQuery live() and similar
- 28. Solution 1: Event Delegation • jQuery live() and similar • Bind handlers to root element of the DOM
- 29. Solution 1: Event Delegation • jQuery live() and similar • Bind handlers to root element of the DOM • Since browsers bubble unhandled events up the DOM, the root handles all events
- 30. Solution 1: Event Delegation • jQuery live() and similar • Bind handlers to root element of the DOM • Since browsers bubble unhandled events up the DOM, the root handles all events This is pretty awesome.
- 31. The Problem with Event Delegation
- 32. The Problem with Event Delegation • live() can’t handle element transformations
- 33. The Problem with Event Delegation • live() can’t handle element transformations • ... like giving <div>s rounded corners ...
- 34. The Problem with Event Delegation • live() can’t handle element transformations • ... like giving <div>s rounded corners ... • Because there’s no event to process when we insert new elements into the DOM
- 35. The Problem with Event Delegation • live() can’t handle element transformations • ... like giving <div>s rounded corners ... • Because there’s no event to process when we insert new elements into the DOM • DOM Level 2-compliant browsers are suppossed to send DOMSubtreeModified and DOMNodeInserted
- 36. The Problem with Event Delegation • live() can’t handle element transformations • ... like giving <div>s rounded corners ... • Because there’s no event to process when we insert new elements into the DOM • DOM Level 2-compliant browsers are suppossed to send DOMSubtreeModified and DOMNodeInserted ... bad IE. No Biscuit!
- 38. Solution 1I: Automatic Rebinding • Bind to and/or transform the element, not the root.
- 39. Solution 1I: Automatic Rebinding • Bind to and/or transform the element, not the root. • NinjaScript examines new DOM elements to see if any known behaviors match.
- 40. Solution 1I: Automatic Rebinding • Bind to and/or transform the element, not the root. • NinjaScript examines new DOM elements to see if any known behaviors match. • NinjaScript fires its own event when the DOM is reconstructed so it works in IE.
- 41. So how do I use it?
- 43. NinjaScript “Behavior Sheet” Ninja.behavior({ 'form#product': submitsAsAjax, ‘a.delete_product’: submitsAsAjax, ‘#login_form input’: isWatermarked, ‘flash.error’: decays, ‘li.has_tooltip’: showsTooltip })
- 44. Defining a Behavior Ninja.behavior({ '.awesome': { transform: function(elem){... add to the DOM ...}, events: { click: function(event){... handle click ...}, mouseover: function(event){... pop tooltip ...} } } }) All awesome elements will get the transform applied, no matter when they’re added.
- 45. Defining a Behavior Shortcut: skip the ‘events:’ mapping if you’re just handling an event. Ninja.behavior({ '.awesome': { click: function(event){ ... handle click ...}, } })
- 46. Reusable Behaviors You can easily define and name behaviors for reuse.
- 47. Reusable Behaviors You can easily define and name behaviors for reuse. singsAndDances(){ function return new ninja.does({ transform: function(elem) { elem.addATutu() }, click: function(event) { this.element.pirouette() }, mouseover: function(event) { this.element.singAnAria()} }) }
- 48. Reusable Behaviors You can easily define and name behaviors for reuse. singsAndDances(){ function return new ninja.does({ transform: function(elem) { elem.addATutu() }, click: function(event) { this.element.pirouette() }, mouseover: function(event) { this.element.singAnAria()} }) } Ninja.behavior({ ‘#dhh’: Ninja.singsAndDances(), ‘#katz’: Ninja.singsAndDances(), ‘.code_monkey’: Ninja.singsAndDances() })
- 49. Pre-Defined Behaviors These work today - built into NinjaScript • submitsAsAjax (for forms or links) • becomesLink (for forms) • decays (fades away after 10 sec) • isWatermarked (for form inputs)
- 50. Planned Behaviors Coming Sometime! • popsTooltip • getsRoundCorners • validatesLocal • getsDropShadow • validatesViaAjax • replacedByImage • autocompletes • isSortable • hasAjaxObserver • isSortableViaAjax • editableViaAjax
- 51. CAVEAT!
- 52. CAVEAT! NinjaScript 0.8.x depends on jQuery-1.4.2 DOES NOT SUPPORT jQuery-1.4.4 or jQuery-1.5
- 53. CAVEAT! NinjaScript 0.8.x depends on jQuery-1.4.2 DOES NOT SUPPORT jQuery-1.4.4 or jQuery-1.5 (... fix is coming)
- 54. Future Plans for NinjaScript
- 55. Future Plans for NinjaScript • Lots more prepackaged behaviors
- 56. Future Plans for NinjaScript • Lots more prepackaged behaviors • Decouple from jQuery - build NinjaScript behaviors in any framework
- 57. Future Plans for NinjaScript • Lots more prepackaged behaviors • Decouple from jQuery - build NinjaScript behaviors in any framework • Handle JSON returns from AJAX calls, not just eval()
- 58. The internals are “complicated”.
- 59. The internals are “complicated”. But Judson is a ninja rockstar,
- 60. The internals are “complicated”. But Judson is a ninja rockstar, 4th dan.
- 61. Mizugumo Let your Rails app walk on water with NinjaScript
- 64. A Mizugumo app is:
- 65. A Mizugumo app is: • AJAX by default
- 66. A Mizugumo app is: •AJAX by default • Degrades gracefully by default
- 67. A Mizugumo app is: •AJAX by default • Degrades gracefully by default • No extra work!
- 68. The Rails 3 RESTfail
- 69. The Rails 3 RESTfail
- 70. The Rails 3 RESTfail • Simulate PUT and DELETE methods!
- 71. The Rails 3 RESTfail • Simulate PUT and DELETE methods! • link_to(:method => ‘delete’)
- 72. The Rails 3 RESTfail • Simulate PUT and DELETE methods! • link_to(:method => ‘delete’) • <a href=’/product/1’ data- method=‘delete‘>
- 73. The Rails 3 RESTfail • Simulate PUT and DELETE methods! • link_to(:method => ‘delete’) • <a href=’/product/1’ data- method=‘delete‘> • Without JS, it’s a show link!
- 74. The Rails 3 RESTfail • Simulate PUT and DELETE methods! • link_to(:method => ‘delete’) • <a href=’/product/1’ data- method=‘delete‘> • Without JS, it’s a show link! • ... oops!
- 75. The Mizugumo Way
- 76. The Mizugumo Way link_to with :method => ‘delete’ <%= link_to ‘click me’, ‘/foo’, :method => :delete %>
- 77. The Mizugumo Way link_to with :method => ‘delete’ <%= link_to ‘click me’, ‘/foo’, :method => :delete %> Generates a <form>! <form action=’/foo’ method=‘post’ class=‘mizugumo_graceful_form’> <input type=‘hidden’ name=‘_method’ value=‘delete’> <input type=‘submit’ value=’click me’> </a>
- 79. The Mizugumo Way But a default NinjaScript behavior: Ninja.behavior({ ‘.mizugumo_graceful_form’: becomesLink })
- 80. The Mizugumo Way But a default NinjaScript behavior: Ninja.behavior({ ‘.mizugumo_graceful_form’: becomesLink }) Converts it back! <a href=’/foo’>click me</a>
- 81. The Result
- 82. The Result • JavaScript users see a link
- 83. The Result •JavaScript users see a link • Non-JS users see a button
- 84. The Result •JavaScript users see a link • Non-JS users see a button • DELETE action works for both
- 85. The Result •JavaScript users see a link • Non-JS users see a button • DELETE action works for both
- 86. The Result •JavaScript users see a link • Non-JS users see a button • DELETE action works for both • ...Rails developer does nothing!
- 87. What about AJAX?
- 89. No need for markup:
- 90. No need for markup: Not this. <%= form_for(@product, :remote => true) do %>
- 91. No need for markup: Not this. <%= form_for(@product, :remote => true) do %> Just this: <%= form_for(@product) do %>
- 92. Use NinjaScript! Ninja.behavior({ ‘#my_form’: submitsAsAjax })
- 94. Ninja.submitsAsAjax • Same Data • Same URL • Same Method • Just write a format.js block in your controller, and a js.erb view.
- 95. The Mizugumo scaffold does this for you.
- 96. (demo)
- 97. Future Plans for Mizugumo
- 98. Future Plans for Mizugumo • Replace rails.js
- 99. Future Plans for Mizugumo •Replace rails.js • Improve generators
- 100. Future Plans for Mizugumo •Replace rails.js • Improve generators • Degradable :confirm
- 101. Future Plans for Mizugumo •Replace rails.js • Improve generators • Degradable :confirm • Automatic JS validations!
- 102. Please Contribute!
- 103. http://bit.ly/hFzoAG
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n