DSLs for Front End Rails

WELCOME!

Monday, November 2, 2009

WHO AM I?


ME:JUSTIN HALSALL


FRONT END DEVhttp://www.flickr.com/photos/nathaninsandiego/3687500937/


http://www.flickr.com/photos/nathaninsandiego/3687500937/


FRONT END RAILS DEVhttp://www.flickr.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 DEVELOPERhttp://www.flickr.com/photos/nathonline/918128338

a developer working in his views


http://www.flickr.com/photos/nathonline/918128338


A DEVELOPERhttp://www.flickr.com/photos/nathonline/918128338

a developer working in his views

http://www.flickr.com/photos/pipeapple/2190051229






VERTICAL TABShttp://www.flickr.com/photos/denn/5291024/

create sexy vertical tabsdisplayed with javascript


http://www.flickr.com/photos/denn/5291024/

http://www.flickr.com/photos/denn/5291024/


All pages have a couple things in common


<h1>



<ul>

<h1>



<ul>

<h1>

<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-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</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> <div id='tabs-step2' class='setup_box'> <h2>2. ...</h2> ... <a href='#tabs-step1' class='previous'>previous</a> <a href='#tabs-step3' class='next'>next</a> </div> <div id='tabs-step3' class='setup_box'> <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> <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-step3' class='previous'>previous</a> <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>



Lots

of

HTML



Lots

of

HTML

Duplication



Lots

of

HTML

Duplication


Imagine having to do this 8 times and changing things around

Awefull


HOW COULD THIS BE BETTER?


GOD GAVE US HELPERShttp://www.flickr.com/photos/zippy/2429678961/

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


http://www.flickr.com/photos/zippy/2429678961/













Kill JAVA!




<% 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.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901


http://www.flickr.com/photos/bodoggirl/3598561539





Sexy!

http://www.flickr.com/photos/juice10/3501376901






LOOKING GOOD HURTShttp://www.flickr.com/photos/thenovys/3791884189


http://www.flickr.com/photos/thenovys/3791884189

http://www.flickr.com/photos/thenovys/3791884189

HOW TO TAKE THE HURT OUT OF

LOOKING BEAUTIFUL(ehow.com)1) Freeze tweezers before tweezing eyebrows, it'll numb the area being tweezed 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 bla4) 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 between 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_HELPERhttp://github.com/markevans/block_helpers

Dax briefly talked about it yesterday


http://github.com/markevans/block_helpers


BLOCK_HELPERhttp://github.com/markevans/block_helpers

Dax briefly talked about it yesterday

works better than sticking

sticky tape on your toes




THE MEAThttp://www.flickr.com/photos/splorp/12200621


http://www.flickr.com/photos/splorp/12200621

http://www.flickr.com/photos/splorp/12200621

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

$ rake gems:install


http://gemcutter.org

http://gemcutter.org

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>


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.flickr.com/photos/sbluerock/415736417


http://www.flickr.com/photos/sbluerock/415736417


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




FIRST THINGS FIRST

# view.html.erb<% symptom_tabs_for "Apple addiction" do |tabs| %> ...<% end %>

# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base # symptom_tabs_for code endend


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

# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) end

def symptom(name, &block) end endend



# application_helper.rbmodule ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) @title = title end

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

endend





endend





endend





endend





endend

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




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 endend




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 endend










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

CONCAT


http://apidock.com/rails/ActionView/Helpers/TextHelper/concat

http://apidock.com/rails/ActionView/Helpers/TextHelper/concat

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

CAPTURE

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

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


http://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture

http://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture

module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base

def initialize(title) @title = title @tabs = [] end

def display(body) content_tag('h1', "Symptoms of #{@title}") + content_tag('div', ( content_tag('ul', @tabs.collect{|t| content_tag('li', t)}, :class => 'tabs') + content_tag('div', body, :class => 'panes')), :id => 'symptoms') end

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

endend






endend






endend






endend


COMMUNITY PLUG

dev-groups.org

rubyists.eu

http://amsterdam-rb.org/

http://groups.google.com/group/utrecht-rb


http://amsterdam-rb.org

http://amsterdam-rb.org



FIN...


JUSTIN HALSALL

blog: juice10.com

pet project: tvnotify.com

twitter.com/juice10

wakoopa.com/juice10

github.com/Juice10


Technology

DSLs for Front End Rails