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/

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

DSLS FOR FRONT END RAILS

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

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

All pages have a couple things in common

<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>

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

Kill JAVA!

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

<% 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

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

LOOKING GOOD HURTShttp://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

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

# config/environment.rbconfig.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>

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

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

# 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

<% @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

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

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

base def initialize

base def initialize

end def sypmtom

end def display

end def symptom

misuse rails

apple devices

block concat

Technology

type checking your dsls

iterative usability evaluation of dsls

dsls ssq setup eng

front end on rails

building dsl’s in static & dynamic languages...dynamic...

dsls in erlang

comparative dsls in lua

modern front-end development for rails · 2019. 10. 28. ·...

aestasit - internal dsls in scala

writing dsls in groovy

dsls for network protocols

internal dsls in scala

delite: a framework for implementing heterogeneous parallel...

all dsls group products

tdc 2015 - dsls em ruby

markus voelter textual dsls

mde & dsls

dsls in javascript

metaprogramming and dsls

code visualization, uml, & dsls