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. 1995 2000 2005 2010 You Oughta Know 1995 HTML 2

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

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

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

    1997 CSS 2 JavaScript Source: evolutionoftheweb.com 2007 Mobile 2005 AJAX
  5. 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
  6. You Oughta Know 2013 CSS 3 Animation 2D/3D transforms Fonts

    HTML5 Semantic elements Local storage Video/audio Geolocation Drag and drop
  7. 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
  8. You Oughta Know 2013 minification linting asset packaging responsive design

    accessibility canvas WebGL WebSocket pushState templating
  9. 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
  10. 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
  11. Markaby Markup as Ruby <div> <ul> <li> <span>Now I'm very

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

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

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

    concerned." end end end
  15. nav ul { list-style: none; } nav ul li {

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

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

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

    color: red; font-weight: bold; font-style: serif; font-size: 12px; } h1 { color: red; } CSS
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. Sass Variables $green: #67917A; $border-width: 5px; .callout { border: {

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

    tr:nth-child(2n) { background-color: #e2e2e2; } } table.users { @include index-table; }
  27. Compass CSS3 .rounded { -webkit-border-radius: 5px 5px; -moz-border-radius: 5px /

    5px; -khtml-border-radius: 5px / 5px; border-radius: 5px / 5px; } CSS
  28. 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
  29. aside h2 Keynote Speakers ul li Matz li Uncle Bob

    slim Source: “Help, My Stylesheets are a Mess!” - Chriss Eppstein
  30. 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; } }
  31. 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; } }
  32. 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; } }
  33. 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; } }
  34. 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; } }
  35. 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
  36. 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
  37. Color .dark-background { background-color: $dark-blue; } .high-contrast { color: $light-blue;

    } Source: “Help, My Stylesheets are a Mess!” - Chris Eppstein
  38. 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
  39. Source: Viget Extend - “Ruby Tools for Non-Ruby Projects” guard

    'slim' do watch /^.+\.slim$/ end guard 'compass' do watch /^.+(\.scss)/ end Guardfile
  40. guard wants to do these things for you: compile CoffeeScript

    compile Haml livereload run hinters/linters run Jasmine tests
  41. yeoman $ yo webapp $ npm install && bower install

    $ bower install underscore $ grunt
  42. 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
  43. .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
  44. .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
  45. You’ve got options... high_voltage Nanoc stasis Webby Frank StaticMatic brochure

    ruhoh Bonsai Webgen Korma Dynamicmatic Ace machined deplot Source: ruby-toolbox.com
  46. app.Todo = Backbone.Model.extend({ defaults: { title: '', completed: false },

    toggle: function() { this.save({ completed: !this.get('completed') }); } });
  47. 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') }); } });
  48. 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') }); } });
  49. 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') }); } });
  50. fin

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