Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DSLs for Front End Rails

1,438 views

Published on

Video of this presentation:
http://vimeo.com/7643491

Published in: Technology, Design
  • I’m glad you like it! There is also a video of this presentation:

    <br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=7643491&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7643491&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=7643491&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great to see block helpers being used out in the wild!
    Thanks for sticking on the wiki.
    Mark
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DSLs for Front End Rails

  1. 1. WELCOME! Monday, November 2, 2009
  2. 2. WHO AM I? Monday, November 2, 2009
  3. 3. ME: JUSTIN HALSALL Monday, November 2, 2009
  4. 4. FRONT END DEV http://www.flickr.com/photos/nathaninsandiego/3687500937/ Monday, November 2, 2009
  5. 5. FRONT END RAILS DEV http://www.flickr.com/photos/nathaninsandiego/3687500937/ Monday, November 2, 2009
  6. 6. DSLS FOR FRONT END RAILS Monday, November 2, 2009
  7. 7. DSLS FOR FRONT END RAILS ~OR~ HOW TO USE BLOCKS IN YOUR VIEWS FOR MAXIMUM AMOUNTS OF AWESOMENESS Monday, November 2, 2009
  8. 8. ~BACKSTORY~ Monday, November 2, 2009
  9. 9. a developer working in his views A DEVELOPER http://www.flickr.com/photos/nathonline/918128338 Monday, November 2, 2009
  10. 10. a developer working in his views A DEVELOPER http://www.flickr.com/photos/nathonline/918128338 http://www.flickr.com/photos/pipeapple/2190051229 Monday, November 2, 2009
  11. 11. create sexy vertical tabs displayed with javascript VERTICAL TABS http://www.flickr.com/photos/denn/5291024/ Monday, November 2, 2009
  12. 12. Monday, November 2, 2009
  13. 13. All pages have a couple things in common Monday, November 2, 2009
  14. 14. <h1> All pages have a couple things in common Monday, November 2, 2009
  15. 15. <h1> <ul> All pages have a couple things in common Monday, November 2, 2009
  16. 16. <h1> <ul> All pages have a couple things in common <div> Monday, November 2, 2009
  17. 17. <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> Monday, November 2, 2009
  18. 18. <div class='clearfix lead'> <h1>...</h1> o ts L f <p>...</p> </div> <div id='add_connection' class='add_connection'> o L <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> M <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> T <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> H <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> Monday, November 2, 2009
  19. 19. <div class='clearfix lead'> <h1>...</h1> o ts L f <p>...</p> </div> <div id='add_connection' class='add_connection'> o L <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> M <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> T <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> H <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'> Du <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> pli <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> ca <h3>Status</h3> <p id='status_message'>Checking sync status...</p> tio <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> n <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> Monday, November 2, 2009
  20. 20. <div class='clearfix lead'> <h1>...</h1> o ts L f <p>...</p> </div> <div id='add_connection' class='add_connection'> o L <div id='tabs' class='rounded_container'> <ul> <li><a href='#tabs-step1'>1. ...</a></li> M <li><a href='#tabs-step2'>2. ...</a></li> <li><a href='#tabs-step3'>3. ...</a></li> T <li><a href='#tabs-sync'>4. ...</a></li> <li><a href='#tabs-done'>Finished</a></li> </ul> H <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'> Du <h2>3. ...</h2> ... <a href='#tabs-step2' class='previous'>previous</a> pli <a href='#tabs-sync' class='next'>next</a> </div> <div id='tabs-sync' class='setup_box'> <h2>4. ...</h2> ca <h3>Status</h3> <p id='status_message'>Checking sync status...</p> tio <a href='#tabs-step3' class='previous'>previous</a> <a href='#tabs-done' class='next'>next</a> </div> n <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> Monday, November 2, 2009
  21. 21. Imagine having to do this 8 times and changing things around Awefull Monday, November 2, 2009
  22. 22. HOW COULD THIS BE BETTER? Monday, November 2, 2009
  23. 23. 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.flickr.com/photos/zippy/2429678961/ Monday, November 2, 2009
  24. 24. 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.flickr.com/photos/zippy/2429678961/ Monday, November 2, 2009
  25. 25. 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.flickr.com/photos/zippy/2429678961/ Monday, November 2, 2009
  26. 26. <% add_connection_tabs(:for => "...", :subtitle => "...") do |tab| %> <% tab.step "..." do %> ... <% end %> <% tab.step "..." do %> ... <% end %> <% tab.step "..." do %> ... <% end %> <% tab.sync %> <% tab.done %> <% end %> Monday, November 2, 2009
  27. 27. http://www.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901 Monday, November 2, 2009
  28. 28. x y! Se http://www.flickr.com/photos/bodoggirl/3598561539 http://www.flickr.com/photos/juice10/3501376901 Monday, November 2, 2009
  29. 29. LOOKING GOOD HURTS http://www.flickr.com/photos/thenovys/3791884189 Monday, November 2, 2009
  30. 30. 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 Monday, November 2, 2009
  31. 31. BLOCK_HELPER http://github.com/markevans/block_helpers Dax briefly talked about it yesterday Monday, November 2, 2009
  32. 32. 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 Monday, November 2, 2009
  33. 33. THE MEAT http://www.flickr.com/photos/splorp/12200621 Monday, November 2, 2009
  34. 34. # config/environment.rb config.gem "block_helpers", :lib => "block_helpers", :source => "http://gemcutter.org" $ rake gems:install Monday, November 2, 2009
  35. 35. 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> Monday, November 2, 2009
  36. 36. 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> Monday, November 2, 2009
  37. 37. 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 %> Monday, November 2, 2009
  38. 38. ARE WE THERE YET? http://www.flickr.com/photos/sbluerock/415736417 Monday, November 2, 2009
  39. 39. NO! SHUT UP OR NO MORE TV! http://www.flickr.com/photos/chubbychandru/2273272995 Monday, November 2, 2009
  40. 40. FIRST THINGS FIRST # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base # symptom_tabs_for code end end Monday, November 2, 2009
  41. 41. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> <% tabs.symptom "Praying to Steve Jobs" do %> ... <% end %> ... <% end %> # application_helper.rb module ApplicationHelper class SymptomTabsFor < BlockHelpers::Base def initialize(title) end def symptom(name, &block) end end end Monday, November 2, 2009
  42. 42. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end Monday, November 2, 2009
  43. 43. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end Monday, November 2, 2009
  44. 44. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end Monday, November 2, 2009
  45. 45. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end Monday, November 2, 2009
  46. 46. # view.html.erb <% symptom_tabs_for "Apple addiction" do |tabs| %> ... <% end %> # application_helper.rb module 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 end end # browser <h1>Symptoms of Apple addiction</h1> <div id="symptoms"> <div class="panes"> </div> </div> Monday, November 2, 2009
  47. 47. # application_helper.rb module 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 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 Monday, November 2, 2009
  48. 48. # application_helper.rb module 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 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 Monday, November 2, 2009
  49. 49. # application_helper.rb module 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 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 Monday, November 2, 2009
  50. 50. # application_helper.rb module 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 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 Monday, November 2, 2009
  51. 51. CONCAT concat "hello" # the equivalent of <%= "hello" %> Monday, November 2, 2009
  52. 52. 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 %> Monday, November 2, 2009
  53. 53. 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 end end Monday, November 2, 2009
  54. 54. 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 end end Monday, November 2, 2009
  55. 55. 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 end end Monday, November 2, 2009
  56. 56. 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 end end Monday, November 2, 2009
  57. 57. COMMUNITY PLUG dev-groups.org rubyists.eu http://amsterdam-rb.org/ http://groups.google.com/group/utrecht-rb Monday, November 2, 2009
  58. 58. FIN... Monday, November 2, 2009
  59. 59. JUSTIN HALSALL blog: juice10.com pet project: tvnotify.com twitter.com/juice10 wakoopa.com/juice10 github.com/Juice10 Monday, November 2, 2009

×