smartbomb

o or r

DRY your views!Lachie Cox

lachie@smartbomb.com.au

smartbombsmartbomb

DRY‣ don’t repeat yourself, mmkay?

smartbombsmartbomb

M V C‣v is for vexing

smartbombsmartbomb

DRYing models is

easy

smartbombsmartbomb

DRYing ctrllrs is

OK

smartbombsmartbomb

DRYing views is

vexatious

smartbombsmartbomb

WET views

sca!olding

smartbombsmartbomb

smartbombsmartbomb

WET views

erb

layouts

partials

smartbombsmartbomb

smartbombsmartbomb

<% labeled_form_for :thing, things_path do |f| %> <%= f.text_field :name %> <%= f.text_field :aspect %> <%= f.check_box :existing %> <%= submit_tag 'Save' %><% end %>

smartbombsmartbomb

<% labeled_form_for :thing, things_path do |f| %>

<%= f.text_field :name %>

<%= f.text_field :aspect %>

<%= f.check_box :existing %>

<%= submit_tag 'Save' %>

<% end %>

WASTE

smartbombsmartbomb

waste baaaad

smartbombsmartbomb

components

engines

smartbombsmartbomb

smartbombsmartbomb

‣ http://codefluency.com/2007/5/18/when-v-is-for-vexing

‣ Bruce Williams

smartbombsmartbomb

Don’t Fear Helpers

Make them APIs

smartbombsmartbomb

Make them semantic

smartbombsmartbomb

helpers as api

<%= describe person,:blank_message => "Nobody" %>

smartbombsmartbomb

helpers as api

<% rounded_box do %> <h2>Products</h2><% end %>

smartbombsmartbomb

stencil

‣ http://stencil.rubyforge.org

smartbombsmartbomb

semantic helpers

as objects

smartbombsmartbomb

a cart stencil

class CartStencil < Stencil ... def to_s render(:partial => 'shared/cart', :object => @cart) end def summary if @cart.blank? "Your cart is empty. Buy stuff!" else "You have #{@cart.size} items in your cart." end endend

smartbombsmartbomb

a cart stencil

<% cart = cart() %> <!-- CartStencil.new -->

<%= cart.summary %>

<%= cart %> <!-- cart.to_s -->

smartbombsmartbomb

more than a stencil

module CartControllerHelper ...end

class UserController include CartControllerHelper load_cart :only => [:show]end

smartbombsmartbomb

Vcart

(stencil)

Ccart

(mixin)

smartbombsmartbomb

Stencil+

Mixin

CSS

+javascript

+

&c.

smartbombsmartbomb

lightweight

widgetty

thingo

smartbombsmartbomb

smartbombsmartbomb

DRY

javascript

smartbombsmartbomb

RJS

smartbombsmartbomb

smartbombsmartbomb

document.getElementById("foobar")

$("foobar")

smartbombsmartbomb

use prototype‣ until optimisation

smartbombsmartbomb

<%= link_to_function 'declaim', 'alert("yay for smarties!")' %>

<%= link_to 'delete', smarty_path(42), :method => :delete %>

smartbombsmartbomb

smartbombsmartbomb

srsly, wtf?

<a onclick="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;" href="/smarties/1">delete</a>

smartbombsmartbomb

smartbombsmartbomb

be

less

obtrusive

smartbombsmartbomb

use

less

code

smartbombsmartbomb

OMG

javascript

has classes

too!

smartbombsmartbomb

use

&

reuse

smartbombsmartbomb

lowpro‣ http://danwebb.net/lowpro

smartbombsmartbomb

reusable

behaviours

smartbombsmartbomb

smartbombsmartbomb

smartbombsmartbomb

<a class="forgotten" href="/accounts/forgotten">I've forgotten my password.</a>

HTML

smartbombsmartbomb

Event.addBehavior({ '.forgotten': Toggler('forgotten_password','cancel')})

<a class="forgotten" href="/accounts/forgotten">I've forgotten my password.</a>

javascript

HTML

smartbombsmartbomb

smartbombsmartbomb

DRY

its good for the soul