Refresh Tallahassee: The RE/MAX Front End Story

Come join us downstairs at the Proof Brewing Company for another excellent evening of inspiration! Rachael Moore, the front-end lead on the new remax.com, has kindly agreed to share the story of this massive (and really nicely done) site. Among the likely topics of discussion are: Object-oriented CSS, CSS preprocessors, JavaScript frameworks, and the ins and outs of working with a distributed team.

Transcript

1. Refresh Tallahassee RE/MAX Front End Story
2. function moore (you) { var me = { name: Rachael L Moore, tel: (646) 504-0616, tweet: @morewry }; return { success: you + me }; }
4. Performance ◦ High availability ◦ Efficient use of resources ◦ Fast response ◦ Quick transfer & load times
5. Maintainability ◦ Easy to add new content ◦ Easy to move content ◦ Easy to remove content ◦ Easy to identify problem code
6. Thick Client ◦ Runs on client side ◦ Natural fit for web ◦ Lower server requirements ◦ Lowers cost ◦ Increases availability
7. Require.js ◦ Asynchronous file loader ◦ Based on CommonJS AMD proposal ◦ Important for performance ◦ Helps with maintainability
8. https://www.youtube.com/watch?v=eX1d6ugKd1g Click to play video -- Example of loading files (particularly JS) asynchronously with Require.js
9. Require.js Config ◦ baseUrl ◦ paths require.config({ baseUrl: "/js/libs", paths: { "app": "/js/app", "jquery": "..." } });
10. Require.js Modules ◦ ID (optional) ◦ Dependencies array (optional) ◦ Callback function define( id, [dependencies], function(){ // callback } );
11. Backbone.js ◦ Lightweight ◦ Works with JSON ◦ Keeps back end data in sync with front end ◦ Provides structure for models & views
12. https://www.youtube.com/watch?v=zmRIBAKQToI Click to play video -- Example of backbone view and model in action
13. Backbone.js Models ◦ attributes ◦ initialize ◦ custom methods var Listing = Backbone.Model.extend({ initialize: function() {} , custom: function() {} });
14. Backbone.js Views ◦ el (DOM context) ◦ events ◦ initialize ◦ render ◦ custom methods var ListingDetail = Backbone.View.extend({ events: { "click .btn": "qmToggle", }, initialize: function () {} , render: function () {} , qmToggle: function () {} });
15. Mustache ◦ Logic-less templates ◦ Hogan.js on client side ◦ Nustache on server side
16. https://www.youtube.com/watch?v=EFiilk2LQLM Click to play video -- Example of Hogan (client side) and Nustache (server side) rending HTML using the same Mustache templates
17. Mustache Tags ◦ Variables ◦ Sections ▪ If (basically) ▪ Loop {{#pages}} <a href="{{url}}"> {{num}} </a> {{/pages}}
18. Sass ◦ Valid CSS is valid Sass ◦ Outputs plain CSS ◦ Provides valuable features to developers
19. Sass Import CSS @import "buttons.css" Sass @import "buttons" Unlike CSS imports, Sass imports don't necessarily generate another HTTP request.
20. Sass Variables CSS .error { color: #d40015; } Sass .error { color: $error-color; }
21. Sass Mixins CSS .error { color: #d40015; background-image: -webkit-linear- gradient(#fdf2f3, #f4bfc4); background-image: -moz-linear- gradient(#fdf2f3, #f4bfc4); background-image: -o-linear- gradient(#fdf2f3, #f4bfc4); background-image: linear-gradient (#fdf2f3, #f4bfc4); background-color: #fdf2f3; } Sass .error { color: $error-color; @include background( linear-gradient( lighten($error-color, 95% ), lighten($error-color, 75% ) ) ); }
22. Sass Placeholders CSS .error { color: #d40015; } Sass %error { color: $error-color; } Placeholders are like classes, except they don't get output until they are used.
23. Sass Extend CSS .error, .button-delete { color: #d40015; background-image: -webkit-linear-gradient (#fdf2f3, #f4bfc4); background-image: -moz-linear-gradient (#fdf2f3, #f4bfc4); background-image: -o-linear-gradient (#fdf2f3, #f4bfc4); background-image: linear-gradient (#fdf2f3, #f4bfc4); background-color: #fdf2f3; } Sass .button-delete { @extend .error; }
24. Sass + OOCSS = Awesome
25. Semantics ◦ Study of meaning ◦ "What is this?" ◦ Has > 1 answer
26. Content Semantics ◦ Document = HTML ◦ Internal Real estate agent class="agent" ◦ External A person, i.e. microformat hCard
27. Visual Semantics ◦ The vocabulary for CSS ◦ Two categories ▪ Skeleton ▪ Skin
28. Analyze the design
30. Identify Skeletons Step 1: Find repeating structures "Abstractable layout patterns"
32. Skeletons ◦ Inline block text next to others: inline block layout ◦ Floating complex blocks next to others: grid layout display, float, position, width
33. Identify Skins 2. Find repeating skins "Repeating visual qualities"
35. Skins ◦ Headings & Links: color, font ◦ Containers & Buttons: bg color & gradient, shadow, borders ◦ Icons color, background, border, text-shadow, box-shadow, border-radius, etc.
36. Identify Modules Step 3: Find content modules "Verbally identifiable content"
38. Modules ◦ Search results ◦ Listing ◦ Refine search toolbar ◦ Breadcrumbs
39. Combine HTML <article class="listing"> <header class="listing-head"> <h1 class="listing-title" /> <dl class="listing-price /> </header> <div class="listing-body"> <img class="listing-img"> <div class="listing-caption"> ... </div> </div> </article> Sass .listing { @extend %skin-12; } .listing-head { @extend %grid-row; } .listing-title { @extend %grid-unit; @extend %text-14; @extend %width-2of3; } .listing-price { @extend %grid-unit; @extend %text-20; @extend %width-1of3; } .listing-body { @extend %grid-row; } .listing-img { @extend %grid-unit; } .listing-caption { @extend %grid-last; }