Date post: | 06-May-2015 |
Category: |
Documents |
Upload: | rachael-l-moore |
View: | 410 times |
Download: | 2 times |
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; }