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

Transcript

1. Front-end WEB DEVELOPMENT with Ruby maTT BUCK @TECHPEACE
2. A (very) Little About Me
3. current gig
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
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
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
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
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
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.