Refresh Tallahassee

RE/MAX Front End Story

function moore (you) {var me = { name: Rachael L Moore, tel: (646) 504-0616, tweet: @morewry};return { success: you + me };

}

Performance

○ High availability

○ Efficient use of resources

○ Fast response

○ Quick transfer & load times

Maintainability

○ Easy to add new content

○ Easy to move content

○ Easy to remove content

○ Easy to identify problem code

Thick Client

○ Runs on client side

○ Natural fit for web

○ Lower server requirements

○ Lowers cost

○ Increases availability

Require.js

○ Asynchronous file loader

○ Based on CommonJS AMD proposal

○ Important for performance

○ Helps with maintainability

https://www.youtube.com/watch?v=eX1d6ugKd1g

Click to play video -- Example of loading files (particularly JS) asynchronously with Require.js

Require.js Config

○ baseUrl

○ paths require.config({baseUrl: "/js/libs",paths: {

"app": "/js/app","jquery": "..."

}});

Require.js Modules

○ ID (optional)

○ Dependencies

array (optional)

○ Callback

function

define(id,[dependencies],function(){

// callback}

);

Backbone.js

○ Lightweight

○ Works with JSON

○ Keeps back end data in sync

with front end

○ Provides structure for models &

views

https://www.youtube.com/watch?v=zmRIBAKQToI

Click to play video -- Example of backbone view and model in action

Backbone.js Models

○ attributes

○ initialize

○ custom methods

var Listing = Backbone.Model.extend({

initialize: function() {}, custom: function() {}

});

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 () {}});

Mustache

○ Logic-less templates

○ Hogan.js on client side

○ Nustache on server side

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

Mustache Tags

○ Variables

○ Sections

■ If (basically)

■ Loop

{{#pages}}<a href="{{url}}">

{{num}}</a>

{{/pages}}

Sass

○ Valid CSS is valid Sass

○ Outputs plain CSS

○ Provides valuable features to

developers

Sass ImportCSS

@import "buttons.css"

Sass

@import "buttons"

Unlike CSS imports, Sass imports don't necessarily generate another HTTP request.

Sass VariablesCSS

.error { color: #d40015;}

Sass

.error { color: $error-color;}

Sass MixinsCSS

.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%) ) );}

Sass PlaceholdersCSS

.error { color: #d40015;}

Sass

%error { color: $error-color;}

Placeholders are like classes, except they don't get output until they are used.

Sass ExtendCSS

.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;}

Sass + OOCSS

=

Awesome

Semantics

○ Study of meaning

○ "What is this?"

○ Has > 1 answer

Content Semantics

○ Document = HTML

○ Internal

Real estate agent class="agent"

○ External

A person, i.e. microformat hCard

Visual Semantics

○ The vocabulary for CSS

○ Two categories

■ Skeleton

■ Skin

Analyze the design

Identify Skeletons

Step 1: Find repeating structures

"Abstractable layout patterns"

Skeletons

○ Inline block text next to others:

inline block layout

○ Floating complex blocks next to

others: grid layout

display, float, position, width

Identify Skins

2. Find repeating skins

"Repeating visual qualities"

Skins

○ Headings & Links: color, font

○ Containers & Buttons: bg color &

gradient, shadow, borders

○ Icons

color, background, border, text-shadow,

box-shadow, border-radius, etc.

Identify Modules

Step 3: Find content modules

"Verbally identifiable content"

Modules

○ Search results

○ Listing

○ Refine search toolbar

○ Breadcrumbs

CombineHTML

<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; }