Refresh Tallahassee: The RE/MAX Front End Story

  • 370 views
Uploaded on

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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
370
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Refresh TallahasseeRE/MAX Front End Story
  • 2. function moore (you) { var me = { name: Rachael L Moore, tel: (646) 504-0616, tweet: @morewry }; return { success: you + me };}
  • 3. Performance○ High availability○ Efficient use of resources○ Fast response○ Quick transfer & load times
  • 4. Maintainability○ Easy to add new content○ Easy to move content○ Easy to remove content○ Easy to identify problem code
  • 5. Thick Client○ Runs on client side○ Natural fit for web○ Lower server requirements○ Lowers cost○ Increases availability
  • 6. Require.js○ Asynchronous file loader○ Based on CommonJS AMD proposal○ Important for performance○ Helps with maintainability
  • 7. https://www.youtube.com/watch?v=eX1d6ugKd1gClick to play video -- Example of loadingfiles (particularly JS) asynchronously withRequire.js
  • 8. Require.js Config○ baseUrl require.config({○ paths baseUrl: "/js/libs", paths: { "app": "/js/app", "jquery": "..." } });
  • 9. Require.js Modules○ ID (optional) define(○ Dependencies id, [dependencies], array (optional) function(){ // callback○ Callback } function );
  • 10. Backbone.js○ Lightweight○ Works with JSON○ Keeps back end data in sync with front end○ Provides structure for models & views
  • 11. https://www.youtube.com/watch?v=zmRIBAKQToIClick to play video -- Example of backboneview and model in action
  • 12. Backbone.js Models○ attributes○ initialize var Listing = Backbone.Model.extend({○ custom methods initialize: function() {}, custom: function() {} });
  • 13. 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
  • 14. Mustache○ Logic-less templates○ Hogan.js on client side○ Nustache on server side
  • 15. https://www.youtube.com/watch?v=EFiilk2LQLMClick to play video -- Example of Hogan (clientside) and Nustache (server side) rending HTMLusing the same Mustache templates
  • 16. Mustache Tags○ Variables○ Sections {{#pages}} ■ If (basically) <a href="{{url}}"> {{num}} ■ Loop </a> {{/pages}}
  • 17. Sass○ Valid CSS is valid Sass○ Outputs plain CSS○ Provides valuable features to developers
  • 18. Sass ImportCSS Sass@import "buttons.css" @import "buttons"Unlike CSS imports, Sass importsdont necessarily generateanother HTTP request.
  • 19. Sass VariablesCSS Sass.error { .error { color: #d40015; color: $error-color;} }
  • 20. Sass MixinsCSS 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; );} }
  • 21. Sass PlaceholdersCSS Sass.error { %error { color: #d40015; color: $error-color;} }Placeholders are like classes,except they dont get outputuntil they are used.
  • 22. Sass ExtendCSS 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;}
  • 23. Sass + OOCSS = Awesome
  • 24. Semantics○ Study of meaning○ "What is this?"○ Has > 1 answer
  • 25. Content Semantics○ Document = HTML○ Internal Real estate agent class="agent"○ External A person, i.e. microformat hCard
  • 26. Visual Semantics○ The vocabulary for CSS○ Two categories ■ Skeleton ■ Skin
  • 27. Analyze the design
  • 28. Identify SkeletonsStep 1: Find repeating structures"Abstractable layout patterns"
  • 29. Skeletons○ Inline block text next to others: inline block layout○ Floating complex blocks next to others: grid layout display, float, position, width
  • 30. Identify Skins2. Find repeating skins "Repeating visual qualities"
  • 31. Skins○ Headings & Links: color, font○ Containers & Buttons: bg color & gradient, shadow, borders○ Iconscolor, background, border, text-shadow, box-shadow, border-radius, etc.
  • 32. Identify ModulesStep 3: Find content modules"Verbally identifiable content"
  • 33. Modules○ Search results ○ Listing○ Refine search toolbar○ Breadcrumbs
  • 34. CombineHTML 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; }