DRY up your views

1,551 views

Published on

My presentation at RORO sydney september meetup.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,551
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DRY up your views

  1. 1. smartbomb DRY your views! Lachie Cox lachie@smartbomb.com.au r o ro
  2. 2. smartbomb bmobtrams DRY ‣ don’t repeat yourself, mmkay?
  3. 3. smartbomb bmobtrams MVC ‣ v is for vexing
  4. 4. smartbomb bmobtrams DRYing models is easy
  5. 5. smartbomb bmobtrams DRYing ctrllrs is OK
  6. 6. smartbomb bmobtrams DRYing views is vexatious
  7. 7. WET views smartbomb bmobtrams sca olding
  8. 8. smartbomb bmobtrams
  9. 9. WET views smartbomb bmobtrams erb layouts partials
  10. 10. smartbomb bmobtrams
  11. 11. smartbomb bmobtrams <% labeled_form_for :thing, things_path do |f| %> <%= f.text_field :name %> <%= f.text_field :aspect %> <%= f.check_box :existing %> <%= submit_tag 'Save' %> <% end %>
  12. 12. smartbomb bmobtrams WASTE <% labeled_form_for :thing, things_path do |f| %> <%= f.text_field :name %> <%= f.text_field :aspect %> <%= f.check_box :existing %> <%= submit_tag 'Save' %> <% end %>
  13. 13. waste baaaad smartbomb bmobtrams
  14. 14. smartbomb bmobtrams components engines
  15. 15. smartbomb bmobtrams
  16. 16. smartbomb bmobtrams ‣ http://codefluency.com/2007/5/18/ when-v-is-for-vexing ‣ Bruce Williams
  17. 17. smartbomb bmobtrams Don’t Fear Helpers Make them APIs
  18. 18. smartbomb bmobtrams Make them semantic
  19. 19. helpers as api smartbomb bmobtrams <%= describe person, :blank_message => quot;Nobodyquot; %>
  20. 20. helpers as api smartbomb bmobtrams <% rounded_box do %> <h2>Products</h2> <% end %>
  21. 21. stencil smartbomb bmobtrams ‣ http://stencil.rubyforge.org
  22. 22. smartbomb bmobtrams semantic helpers as objects
  23. 23. a cart stencil smartbomb bmobtrams class CartStencil < Stencil ... def to_s render(:partial => 'shared/cart', :object => @cart) end def summary if @cart.blank? quot;Your cart is empty. Buy stuff!quot; else quot;You have #{@cart.size} items in your cart.quot; end end end
  24. 24. a cart stencil smartbomb bmobtrams <% cart = cart() %> <!-- CartStencil.new --> <%= cart.summary %> <%= cart %> <!-- cart.to_s -->
  25. 25. more than a stencil smartbomb bmobtrams module CartControllerHelper ... end class UserController include CartControllerHelper load_cart :only => [:show] end
  26. 26. smartbomb bmobtrams C V cart cart (mixin) (stencil)
  27. 27. smartbomb bmobtrams Stencil + Mixin + javascript + CSS &c.
  28. 28. smartbomb bmobtrams lightweight widgetty thingo
  29. 29. smartbomb bmobtrams
  30. 30. smartbomb bmobtrams DRY javascript
  31. 31. smartbomb bmobtrams RJS
  32. 32. smartbomb bmobtrams
  33. 33. smartbomb bmobtrams document.getElementById(quot;foobarquot;) $(quot;foobarquot;)
  34. 34. smartbomb bmobtrams use prototype ‣ until optimisation
  35. 35. smartbomb bmobtrams <%= link_to_function 'declaim', 'alert(quot;yay for smarties!quot;)' %> <%= link_to 'delete', smarty_path(42), :method => :delete %>
  36. 36. smartbomb bmobtrams
  37. 37. srsly, wtf? smartbomb bmobtrams <a onclick=quot;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);f.submit();return false;quot; href=quot;/smarties/1quot;>delete</a>
  38. 38. smartbomb bmobtrams
  39. 39. smartbomb bmobtrams be less obtrusive
  40. 40. smartbomb bmobtrams use less code
  41. 41. smartbomb bmobtrams OMG javascript has classes too!
  42. 42. smartbomb bmobtrams use & reuse
  43. 43. smartbomb bmobtrams lowpro ‣ http://danwebb.net/lowpro
  44. 44. smartbomb bmobtrams reusable behaviours
  45. 45. smartbomb bmobtrams
  46. 46. smartbomb bmobtrams
  47. 47. smartbomb bmobtrams HTML <a class=quot;forgottenquot; href=quot;/accounts/forgottenquot;> I've forgotten my password. </a>
  48. 48. smartbomb bmobtrams HTML <a class=quot;forgottenquot; href=quot;/accounts/forgottenquot;> I've forgotten my password. </a> javascript Event.addBehavior({ '.forgotten': Toggler('forgotten_password','cancel') })
  49. 49. smartbomb bmobtrams
  50. 50. smartbomb bmobtrams DRY its good for the soul

×