Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Web Development with Ruby

Matt Buck
August 11, 2012

Front-end Web Development with Ruby

While Ruby came to prominence with Rails as a solution for quickly and elegantly building full stack web applications, the past couple of years have seen an explosion of the number of Ruby projects catering to the needs of front-end web developers specifically. From using Middleman or nanoc to manage the process of building a static site, to using Compass to bring sanity to our stylesheets, to building custom gems to simplify JavaScript development workflow, this talk covers several scenarios in which developers can bring the ease and simplicity of Ruby to bear on time-consuming or otherwise frustrating front-end problems. We also cover using one of the new Backend as a Service providers to build a dynamic website entirely on the client side, radically simplifying the process of deployment.

You can view a recording of this presentation at http://www.youtube.com/watch?v=vdS6RsiYgCw

Matt Buck

August 11, 2012
Tweet

More Decks by Matt Buck

Other Decks in Programming

Transcript

  1. Front-end WEB DEVELOPMENT with Ruby maTT BUCK @TECHPEACE

  2. A (very) Little About Me

  3. current gig

  4. None
  5. None
  6. None
  7. previous gigs

  8. Learn you a for great job Ruby

  9. Coder’s The Front-end Predicament

  10. 1995 2000 2005 2010 You Oughta Know Source: evolutionoftheweb.com

  11. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

    Source: evolutionoftheweb.com
  12. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

    1997 CSS 2 JavaScript Source: evolutionoftheweb.com
  13. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

    1997 CSS 2 JavaScript Source: evolutionoftheweb.com 2005 AJAX
  14. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

    1997 CSS 2 JavaScript Source: evolutionoftheweb.com 2007 Mobile 2005 AJAX
  15. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

    1997 CSS 2 JavaScript Source: evolutionoftheweb.com 2007 Mobile 2013 CSS 3 HTML5 2005 AJAX
  16. 1995 2000 2005 2010 You Oughta Know Source: evolutionoftheweb.com 2013

    CSS 3 HTML5
  17. You Oughta Know 2013 CSS 3 Animation 2D/3D transforms Fonts

  18. You Oughta Know 2013 CSS 3 Animation 2D/3D transforms Fonts

    HTML5 Semantic elements Local storage Video/audio Geolocation Drag and drop
  19. You Oughta Know 2013 CSS 3 Animation 2D/3D transforms Fonts

    JavaScript MVC AMD CoffeeScript HTML5 Semantic elements Local storage Video/audio Geolocation Drag and drop
  20. You Oughta Know 2013 responsive design accessibility canvas WebGL WebSocket

  21. You Oughta Know 2013 minification linting asset packaging responsive design

    accessibility canvas WebGL WebSocket pushState templating
  22. You Oughta Know 2013 minification linting asset packaging responsive design

    accessibility canvas WebGL WebSocket pushState templating jQuery Modernizr Twitter Bootstrap HTML5 Boilerplate RequireJS UglifyJS Underscore
  23. Everybody HATES tag clouds

  24. RECAP The explosive growth of the web has dramatically increased

    the complexity of front-end development
  25. Markup: There has to be a better way

  26. <div> <p>This doesn't seem right.</p> </div>

  27. <div> <ul> <li> <span>Now I'm very concerned.</span> </li> </ul> </div>

  28. <div> <ul> <li> <span>Now I'm very concerned.</span> </li> </ul> </div>

    Do I have to?
  29. Markaby Markup as Ruby div.menu do %w[5.gets bits inspect cult

    -h].map do |m| capture { link_to m, "/#{m}" } end.join(" | ") end
  30. Markaby Markup as Ruby <div> <ul> <li> <span>Now I'm very

    concerned.</span> </li> </ul> </div>
  31. Markaby Markup as Ruby div do ul do li do

    span "Still a bit concerned." end end end
  32. Markaby Markup as Ruby div do ul do li do

    span "Still a bit concerned." end end end
  33. div do ul do li do span "Still a bit

    concerned." end end end
  34. %div %ul %li %span That's better. Haml

  35. #comments %ul.fancy %li %span{style: 'color: green;'} That's better. Haml

  36. #comments ul.fancy li span style='color: green;' That's better. slim

  37. RECAP HTML Markaby Haml slim good terse terser tersest

  38. Stylesheets: I know I put that selector here someplace

  39. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS
  40. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS
  41. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS
  42. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS
  43. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  44. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  45. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  46. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  47. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  48. nav ul { list-style: none; } nav ul li {

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS $text-color: red; nav { ul { list-style: none; li { color: $text-color; font: { weight: bold; style: serif; size: 12px; } } } } h1 { color: $text-color; } SCSS
  49. Sass Variables $green: #67917A; $border-width: 5px; .callout { border: {

    width: $border-width * 2; color: darken($green, 30%); } }
  50. Sass Mixins @mixin index-table { th { font-weight: bold; }

    tr:nth-child(2n) { background-color: #e2e2e2; } } table.users { @include index-table; }
  51. = Sass + CSS3 mixins + layouts + typography patterns

    +
  52. Compass CSS3 .rounded { @include border-radius; } SCSS

  53. Compass CSS3 .rounded { -webkit-border-radius: 5px 5px; -moz-border-radius: 5px /

    5px; -khtml-border-radius: 5px / 5px; border-radius: 5px / 5px; } CSS
  54. Compass CSS3 Appearance Background Clip Background Origin Background Size Border

    Radius Box Box Shadow Box Sizing Columns Filter Font Face Hyphenation Images Inline Block Opacity CSS Regions Text Shadow Transform / Transition
  55. Madness!

  56. aside h2 Keynote Speakers ul li Matz li Uncle Bob

    slim Source: “Help, My Stylesheets are a Mess!” - Chriss Eppstein
  57. SCSS Source: “Help, My Stylesheets are a Mess!” - Chriss

    Eppstein aside { $dark-blue: #234767; $light-blue: #7ED4ED; background-color: $dark-blue; border: 2px solid lighten($dark-blue, 40%); color: $light-blue; font-family: 'Helvetica Neue'; @include box-shadow; margin: 15px; padding: 15px; h2 { font-weight: bold; font-size: 1.5em; } ul { list-style: square; margin: 15px 20px; } }
  58. Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein

    aside { $dark-blue: #234767; $light-blue: #7ED4ED; background-color: $dark-blue; border: 2px solid lighten($dark-blue, 40%); color: $light-blue; font-family: 'Helvetica Neue'; @include box-shadow; margin: 15px; padding: 15px; h2 { font-weight: bold; font-size: 1.5em; } ul { list-style: square; margin: 15px 20px; } }
  59. Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein

    aside { $dark-blue: #234767; $light-blue: #7ED4ED; background-color: $dark-blue; border: 2px solid lighten($dark-blue, 40%); color: $light-blue; font-family: 'Helvetica Neue'; @include box-shadow; margin: 15px; padding: 15px; h2 { font-weight: bold; font-size: 1.5em; } ul { list-style: square; margin: 15px 20px; } }
  60. Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein

    aside { $dark-blue: #234767; $light-blue: #7ED4ED; background-color: $dark-blue; border: 2px solid lighten($dark-blue, 40%); color: $light-blue; font-family: 'Helvetica Neue'; @include box-shadow; margin: 15px; padding: 15px; h2 { font-weight: bold; font-size: 1.5em; } ul { list-style: square; margin: 15px 20px; } }
  61. Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein

    aside { $dark-blue: #234767; $light-blue: #7ED4ED; background-color: $dark-blue; border: 2px solid lighten($dark-blue, 40%); color: $light-blue; font-family: 'Helvetica Neue'; @include box-shadow; margin: 15px; padding: 15px; h2 { font-weight: bold; font-size: 1.5em; } ul { list-style: square; margin: 15px 20px; } }
  62. Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein

    aside { @extend .highlight-text; } .highlight-text { font-family: 'Helvetica Neue'; h2 { font-weight: bold; font-size: 1.5em; } } Typography
  63. Container .shadow-box { @include box-shadow; border: 2px solid lighten($dark-blue, 40%);

    margin: 15px; padding: 15px; } Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein
  64. Color .dark-background { background-color: $dark-blue; } .high-contrast { color: $light-blue;

    } Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein
  65. aside { @extend .highlight-text; @extend .shadow-box; @extend .dark-background; @extend .high-contrast;

    ul { list-style: square; margin: 15px 20px; } } Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein
  66. $ compass create mysite --using blueprint

  67. RECAP Use SCSS and Compass to organize properties:

  68. RECAP Use SCSS and Compass to organize properties: container

  69. RECAP Use SCSS and Compass to organize properties: container color

  70. RECAP Use SCSS and Compass to organize properties: container color

    typography
  71. Automation: Flow my work, the policeman said

  72. guard filesystem watcher

  73. Source: Viget Extend - “Ruby Tools for Non-Ruby Projects” guard

    'slim' do watch /^.+\.slim$/ end guard 'compass' do watch /^.+(\.scss)/ end Guardfile
  74. Source: Viget Extend - “Ruby Tools for Non-Ruby Projects” $

    bundle install $ bundle exec guard
  75. guard wants to do these things for you: compile CoffeeScript

    compile Haml livereload run hinters/linters run Jasmine tests
  76. vizr MassRelevance/vizr

  77. JavaScript workflow automation

  78. grunt

  79. bower $ npm install -g bower $ bower install $

    bower install underscore
  80. yeoman $ yo webapp $ npm install && bower install

    $ bower install underscore $ grunt
  81. RECAP Use Guard to automate workflow, delve into JavaScript, or

    build your own gem
  82. Static sites: Putting it all together, now

  83. jekyll _config.yml _posts/ $ jekyll --server

  84. Octopress

  85. None
  86. None
  87. Middleman

  88. Middleman + Padrino

  89. Middleman + Padrino templates partials layouts helpers

  90. techpeace/api-site-base api-site-base

  91. $ compass create api-site-base -r bootstrap-sass --using bootstrap $ middleman

    init api-site-base
  92. None
  93. 1 doctype html 2 html 3 head 4 meta charset="utf-8"

    5 6 /! Always force latest IE rendering engine or request Chrome Frame 7 meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" 8 9 /! Use title if it's in the page YAML frontmatter 10 title = data.page.title || "The Middleman" 11 12 == stylesheet_link_tag "styles" 13 == javascript_include_tag "all" 14 15 body class=page_classes 16 == partial 'navbar' 17 18 .container 19 == yield 20 21 .footer 22 .row 23 .span12 24 | ©2012 Product 25 layout.slim
  94. body class=page_classes == partial 'navbar' Partials

  95. .row .span12 h1 Product API Documentation .row .span12 p =

    lorem.sentences 7 .row.wells == well 'Documentation', 'settings.png', 'Read the docs' == well 'Examples', 'screen.png', 'Read some code' == well 'Getting Started', 'globe.png', 'Write some code' index.html.slim Templates
  96. layout.slim Templates .container == yield

  97. .row.wells == well 'Documentation', 'settings.png', 'Read the docs' == well

    'Examples', 'screen.png', 'Read some code' == well 'Getting Started', 'globe.png', 'Write some code' index.html.slim
  98. lorem.sentences 3 Lorem Helpers

  99. None
  100. You’ve got options... high_voltage Nanoc stasis Webby Frank StaticMatic brochure

    ruhoh Bonsai Webgen Korma Dynamicmatic Ace machined deplot Source: ruby-toolbox.com
  101. Backend as a Service

  102. Backend as a Service Parse

  103. Backend as a Service Parse

  104. TodoMVC

  105. TodoMVC

  106. None
  107. techpeace/todomvc-parse

  108. <script src="http://www.parsecdn.com/js/parse-1.0.14.min.js"> </script> <script type='text/javascript'> Parse.initialize("LjeawWUFxAcVb1QAIwqV2mbh9c2keODx73rYkISk", "vmmYKly7zibzYvZ70WQvFc7UB64pgPJ7aT41317c"); </script>

  109. app.Todo = Backbone.Model.extend({ defaults: { title: '', completed: false },

    toggle: function() { this.save({ completed: !this.get('completed') }); } });
  110. app.Todo = Parse.Object.extend({ // Map this model to the appropriate

    // Parse class. className: "Todo", defaults: { title: '', completed: false }, toggle: function() { this.save({ completed: !this.get('completed') }); } });
  111. app.Todo = Parse.Object.extend({ // Map this model to the appropriate

    // Parse class. className: "Todo", defaults: { title: '', completed: false }, toggle: function() { this.save({ completed: !this.get('completed') }); } });
  112. app.Todo = Parse.Object.extend({ // Map this model to the appropriate

    // Parse class. className: "Todo", defaults: { title: '', completed: false }, toggle: function() { this.save({ completed: !this.get('completed') }); } });
  113. var TodoList = Backbone.Collection.extend({

  114. var TodoList = Parse.Collection.extend({

  115. STEP 4 MISSING

  116. Deployment

  117. Behold: todo.matthewbuck.com

  118. Backlift

  119. Backlift

  120. Backlift

  121. Backlift

  122. Backlift

  123. Backlift

  124. Backlift

  125. Backlift

  126. None
  127. None
  128. Backlift

  129. RECAP jekyll Octopress Middleman Parse/Backlift GitHub page blog static site

    “static” site
  130. fin

  131. Credits sketches color scheme fonts _why www.colourlovers.com/palette/ 559428/lucky_bubble_gum Amaranth Economica

    Capture IT Impact Label Inconsolata This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.