DSLs for Front End Rails

WELCOME!

Monday, November 2, 2009

WHO AM I?


ME:
JUSTIN HALSALL


FRONT END DEV
http://www.ﬂickr.com/photos/nathaninsandiego/3687500937/


FRONT END RAILS DEV
http://www.ﬂickr.com/photos/nathaninsandiego/3687500937/


DSLS FOR FRONT
END RAILS


DSLS FOR FRONT END RAILS
~OR~

HOW TO USE BLOCKS
IN YOUR VIEWS FOR
MAXIMUM AMOUNTS
OF AWESOMENESS


~BACKSTORY~


a developer
working in
his views

A DEVELOPER
http://www.ﬂickr.com/photos/nathonline/918128338


a developer
working in
his views

A DEVELOPER
http://www.ﬂickr.com/photos/nathonline/918128338
http://www.ﬂickr.com/photos/pipeapple/2190051229


create sexy vertical
tabs
displayed with
javascript

VERTICAL TABS
http://www.ﬂickr.com/photos/denn/5291024/


All pages have a
couple things in
common


<h1>

All pages have a
couple things in
common


<h1>
<ul>

All pages have a
couple things in
common


<h1>
<ul>

All pages have a
couple things in
common

<div>


<div class='clearfix lead'>
<h1>...</h1>
<p>...</p>
</div>
<div id='add_connection' class='add_connection'>
<div id='tabs' class='rounded_container'>
<ul>
<li><a href='#tabs-step1'>1. ...</a></li>
<li><a href='#tabs-sync'>4. ...</a></li>
<li><a href='#tabs-done'>Finished</a></li>
</ul>
<div id='tabs-step1' class='setup_box'>
<h2>1. ...</h2>
...
<a href='#tabs-step2' class='next'>next</a>
</div>
<h2>2. ...</h2>
...
<a href='#tabs-step1' class='previous'>previous</a>
</div>
<h2>3. ...</h2>
...
<a href='#tabs-sync' class='next'>next</a>
</div>
<div id='tabs-sync' class='setup_box'>
<h2>4. ...</h2>
<h3>Status</h3>
<p id='status_message'>Checking sync status...</p>
<a href='#tabs-done' class='next'>next</a>
</div>
<div id='tabs-done' class='setup_box'>
<h2>Finished - Well done!</h2>
<img src='/images/giant_success_tick.png' class='success' alt='Success!'>
<a href='/connections' class='continue add_more' title='back'><img src='/images/add_connection_btn.png' alt='Go to Contacts' /></a>
<a href='/contacts' title='Go to Contacts' class='continue'><img src='/images/gotocontacts_btn.png' alt='Go to Contacts' /></a>
<a href='#tabs-sync' class='previous'>previous</a>
</div>
</div>
</div>


<h1>...</h1>

o ts
L f
<p>...</p>
</div>

o L
<ul>

M

T
</ul>

H
<h2>1. ...</h2>
...
</div>
<h2>2. ...</h2>
...
</div>
<h2>3. ...</h2>
...
</div>
<h2>4. ...</h2>
<h3>Status</h3>
</div>
</div>
</div>
</div>


<h1>...</h1>

o ts
L f
<p>...</p>
</div>

o L
<ul>

M

T
</ul>

H
<h2>1. ...</h2>
...
</div>
<h2>2. ...</h2>
...
</div>

Du
<h2>3. ...</h2>
...

pli
</div>
<h2>4. ...</h2>

ca
<h3>Status</h3>

tio
</div>

n
</div>
</div>
</div>


Imagine having to
do this 8 times and
changing things
around

Awefull


HOW COULD
THIS BE BETTER?


And on the 8th day I created methods
to awesomify with your views.
You shall refer to these as helpers.

if we where evil we
could misuse rails
helpers with blocks
to create a nice little
DSL we can use
everywhere

GOD GAVE US HELPERS
http://www.ﬂickr.com/photos/zippy/2429678961/


And on the 8th day I created methods
to awesomify with your views.
Kill JAVA!
You shall refer to these as helpers.

if we where evil we
could misuse rails
helpers with blocks
to create a nice little
DSL we can use
everywhere

GOD GAVE US HELPERS
http://www.ﬂickr.com/photos/zippy/2429678961/


<% add_connection_tabs(:for => "...", :subtitle => "...") do |tab| %>

<% tab.step "..." do %>
...
<% end %>

<% tab.step "..." do %>
...
<% end %>

<% tab.step "..." do %>
...
<% end %>

<% tab.sync %>

<% tab.done %>

<% end %>


http://www.ﬂickr.com/photos/bodoggirl/3598561539 http://www.ﬂickr.com/photos/juice10/3501376901


x y!
Se
http://www.ﬂickr.com/photos/bodoggirl/3598561539 http://www.ﬂickr.com/photos/juice10/3501376901


LOOKING GOOD HURTS
http://www.ﬂickr.com/photos/thenovys/3791884189


HOW TO TAKE THE
HURT OUT OF
LOOKING BEAUTIFUL
(ehow.com)
1) Freeze t weezers before t weezing eyebrows, it'll numb the area being t weezed at its touch.
2) Carry those oversized designer purses and totes on different shoulders everyday to avoid
straining your arms and shoulder muscles.
3) Make sure to thoroughly stretch your muscles before exercising to increase.. bla bla bla
4) Choose the best fitted high heel or stiletto possible to reduce pain and pressure on your toes
(translated – don’t choose a heel that’ll make your foot slide leaving a gap bet ween the shoe
and back of your foot).
5) Something about sticking tape on your toes so that your sandals don't eat your feet


BLOCK_HELPER
http://github.com/markevans/block_helpers

Dax briefly talked about
it yesterday


wor
ks b
stick etter
y tap than
e on stick
your ing
toes
BLOCK_HELPER
http://github.com/markevans/block_helpers

Dax briefly talked about
it yesterday


THE MEAT
http://www.ﬂickr.com/photos/splorp/12200621


# config/environment.rb
config.gem "block_helpers",
:lib => "block_helpers",
:source => "http://gemcutter.org"

$ rake gems:install


THE PAGE WE ARE GOING TO
DRYUP
<h1>Symptoms of Apple addiction</h1>
<div id='symptoms'>
<ul class="tabs">
<li><a href="#praying_panel">Praying</a></li>
<li><a href="#happiness_panel">Happiness</a></li>
<li><a href="#microsoft_panel">Microsoft</a></li>
</ul>

<div class="panes">
<div id="praying_panel">
<h2>Praying to Steve Jobs</h2>
<p>It is not uncommon for an Apple addict to pray to his Steveness.</p>
</div>
<div id="happiness_panel">
<h2>Happiness and iPhone battery level equal</h2>
<p>Addict gets the shakes from low battery power</p>
</div>
<div id="microsoft_panel">
<h2>Microsoft powered nervous break downs</h2>
<p>Addict gets the shakes from non-Apple devices</p>
</div>
</div>
</div>


NO MORE TOWELS NEEDED

<% symptom_tabs_for "Apple addiction" do |tabs| %>

<% tabs.symptom "Praying to Steve Jobs" do %>
<p>It is not uncommon for an Apple addict to pray to his Steveness.</p>
<% end %>

<% tabs.symptom "Happiness and iPhone energy level equal" do %>
<p>Addict gets the shakes from low battery power</p>
<% end %>

<% tabs.symptom "Microsoft powered nervous break downs" do %>
<p>Addict gets the shakes from non-Apple devices</p>
<% end %>

<% end %>


ARE WE THERE YET?
http://www.ﬂickr.com/photos/sbluerock/415736417


NO! SHUT UP OR NO MORE TV!
http://www.ﬂickr.com/photos/chubbychandru/2273272995


FIRST THINGS FIRST

# view.html.erb
...
<% end %>

# application_helper.rb
module ApplicationHelper
class SymptomTabsFor < BlockHelpers::Base
# symptom_tabs_for code
end
end


# view.html.erb
<% tabs.symptom "Praying to Steve Jobs" do %>
...
<% end %>
...
<% end %>

def initialize(title)
end

def symptom(name, &block)
end
end
end


# view.html.erb
...
<% end %>

@title = title
end

def display(body)
content_tag('h1', "Symptoms of #{@title}") +
content_tag('div', (
content_tag('div', body, :class => 'panes')),
:id => 'symptoms')
end

end
end


# view.html.erb
...
<% end %>

@title = title
end

def display(body)
:id => 'symptoms')
end

end
end

# browser
<h1>Symptoms of Apple addiction</h1>
<div id="symptoms">
<div class="panes">

</div>
</div>


@title = title
end

def display(body)
:id => 'symptoms')
end

def sypmtom(name, &block)
@short = name.split.first
@content = capture &block
concat content_tag('div', (
content_tag( 'h2', name) + @content),
:id => "#{@short.downcase}_panel")
end
end
end


@title = title
end

def display(body)
:id => 'symptoms')
end

def sypmtom(name, &block)
@content = capture(&block)
end
end
end


CONCAT

concat "hello"
# the equivalent of <%= "hello" %>


CAPTURE
<% @greeting = capture do %>
Welcome to my shiny new web page! The date and time is
<%= Time.now %>
<% end %>

def myblockheader(&block)
content = capture(&block)
concat(content_tag('h1', content))
end

<% myblockheader do %>
Welcome to my shiny new web page!
<% end %>



@title = title
@tabs = []
end

def display(body)
content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') +
:id => 'symptoms')
end

def symptom(name, &block)
@tabs << content_tag('a', @short, :href => "##{@short.downcase}_panel")
@content = capture &block
end

end
end


COMMUNITY PLUG

dev-groups.org
rubyists.eu
http://amsterdam-rb.org/
http://groups.google.com/group/utrecht-rb


FIN...


JUSTIN HALSALL

blog: juice10.com
pet project: tvnotify.com
twitter.com/juice10
wakoopa.com/juice10
github.com/Juice10


DSLs for Front End Rails

More Related Content

Viewers also liked (10)

Similar to DSLs for Front End Rails (20)

More from Justin Halsall (6)

Recently uploaded (20)

DSLs for Front End Rails