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 and take a peek under the hood 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.

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
require.config({
○ paths
baseUrl: "/js/libs",
paths: {
"app": "/js/app",
"jquery": "..."
}
});

10. Require.js Modules
○ ID (optional)
define(
○ Dependencies id,
[dependencies],
array (optional) function(){
// callback
○ Callback
}
function );

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 var Listing =
Backbone.Model.extend({
○ custom methods initialize: function() {},
custom: function() {}
});

14. Backbone.js Views
○ el (DOM
var ListingDetail =
Backbone.View.extend({
context)
events: {
○ events "click .btn": "qmToggle",
},
○ initialize initialize: function () {},
render: function () {},
○ render qmToggle: function () {}
});
○ custom methods

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
{{#pages}}
■ If (basically) <a href="{{url}}">
{{num}}
■ Loop </a>
{{/pages}}

18. Sass
○ Valid CSS is valid Sass
○ Outputs plain CSS
○ Provides valuable features to
developers

19. Sass Import
CSS Sass
@import "buttons.css" @import "buttons"
Unlike CSS imports, Sass imports
don't necessarily generate
another HTTP request.

20. Sass Variables
CSS Sass
.error { .error {
color: #d40015; color: $error-color;
} }

21. Sass Mixins
CSS Sass
.error { .error {
color: #d40015; color: $error-color;
background-image: -webkit-linear-
gradient(#fdf2f3, #f4bfc4); @include background(
background-image: -moz-linear- linear-gradient(
gradient(#fdf2f3, #f4bfc4);
background-image: -o-linear- lighten($error-color, 95%),
gradient(#fdf2f3, #f4bfc4);
background-image: linear-gradient
lighten($error-color, 75%)
(#fdf2f3, #f4bfc4); )
background-color: #fdf2f3;
);
} }

22. Sass Placeholders
CSS Sass
.error { %error {
color: #d40015; color: $error-color;
} }
Placeholders are like classes,
except they don't get output
until they are used.

23. Sass Extend
CSS Sass
.error, .button-delete {
.button-delete { @extend .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;
}

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 Sass
<article class="listing"> .listing { @extend %skin-12; }
.listing-head { @extend %grid-row; }
<header class="listing-head">
.listing-title {
<h1 class="listing-title" /> @extend %grid-unit;
<dl class="listing-price /> @extend %text-14;
</header> @extend %width-2of3;
<div class="listing-body"> }
.listing-price {
<img class="listing-img">
@extend %grid-unit;
<div class="listing-caption"> @extend %text-20;
... @extend %width-1of3;
</div> }
.listing-body { @extend %grid-row; }
</div>
.listing-img { @extend %grid-unit; }
</article> .listing-caption { @extend %grid-last; }