Creating Living Style Guides to Improve Performance

  • 88,498 views
Uploaded on

Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.

Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Greetings from Poland.
    http://www.fastlaw.pl
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
88,498
On Slideshare
0
From Embeds
0
Number of Embeds
88

Actions

Shares
Downloads
0
Comments
1
Likes
110

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. CREATING LIVING STYLEGUIDESRefactoringTrulia’s UI with SASS, OOCSS, and handlebars@stubbornella
  • 2. WHY DON’T THESE STYLEGUIDES WORK?❖ They take months to produce❖ Often out of date before they are ever pdf’ed❖ They are design centric and exclude engineering from theequation
  • 3. WE NEED TO KILL THATTYPE OF STYLE GUIDESo a new, leaner, more effective version can emerge.
  • 4. WE BELIEVE IN LIVINGSTYLE GUIDES
  • 5. WHAT IS A LIVING STYLEGUIDE?❖ Guide to existing site styles❖ Lives in code, so it evolves with the site or app❖ Collaboration tool for engineering and design teams to worktogether
  • 6. A GOOD STYLE GUIDELEADS TO:❖ Better UI layer code❖ More informed design choices❖ A better performing site (we’ll show you how)
  • 7. a collaboration
  • 8. TRULIA CHOSE TOCONVERT THEIR SRPMainly because it was already on the agenda for a redesign
  • 9. REAL USERMEASUREMENTS (RUM)What matters to you?
  • 10. THEIR NEW HTML IS 48%SMALLER
  • 11. 21% FASTER LOAD TIME
  • 12. 60% FASTER TIME TOFIRST BYTE
  • 13. THEY REDUCED UNUSEDCSS BY 135KB
  • 14. SRP PAGE VIEWS UP 11%
  • 15. PDP PAGE VIEWS UP 3%
  • 16. TRULIA ALSO CARESABOUT...Click throughs, leads, customer satisfaction, and filter use. All ofthose metrics also improved.
  • 17. SO WHAT DOES THATHAVE TO DO WITH ASTYLE GUIDE?
  • 18. YOUR CSS CAUSES LOTSOF PERF ISSUES❖ It blocks progressive rendering❖ It pulls in background images❖ It correlates directly to render speed❖ It slows your javascript❖ It causes janky scrolling and animations
  • 19. A STYLE GUIDE CAN HELP
  • 20. WHAT WE WANT IS THIS...
  • 21. BUT WHAT WE HAVE ISTHIS...styles duplicated over and over
  • 22. ANALYZING DUPLICATIONGrep | CSS Lint | CSSCSS
  • 23. ON THIS PROJECT WEUSED GREP❖ Include all your most crufty CSS for best results.❖ Grep for various selectors, properties, and values❖ Don’t worry about perfect, we just need orders of magnitude
  • 24. grep -r font-size . | wc -lrecursively current directorysend results count the lines
  • 25. TRULIA DETAILSh1-h6 564font-size 2267margin 3993padding 4493padding: 0 1214margin: 0 1019Lots of room for improvement!
  • 26. TRULIA DETAILS!important 495color 3920hex 6464#fff 1297total rules 16,225background 4888Unused CSS (home page) 186kb or 74%Lots of room for improvement!
  • 27. ANALYZING DESIGNINCONSISTENCYDESIGN INCONSISTENCY
  • 28. DEMO TYPOGRAPHY TOOL
  • 29. USE HEURISTICS ANDCOMMON SENSETo reduce the total number of styles
  • 30. BUTTONS
  • 31. FOR EACH COMPONENT,THREE OPTIONS:Build!Replace{123 Redesign
  • 32. DO THIS FOR ALLCOMPONENT TYPES...Try to find as many variations as you can
  • 33. DEMO THE STYLE GUIDE
  • 34. HOW DO WE BUILD ACOMPONENT?
  • 35. COMPONENT STRUCTUREKeep component files self-contained
  • 36. WE KEEP ALLCOMPONENTSTOGETHERIndependent of the appsviews
  • 37. CREATE SMALL FILES❖ Less merge conflicts❖ Easier to include/exclude acomponent
  • 38. SOME COMPONENTSHAVE ASSOCIATED JS❖ We keep all the parts of acomponent together❖ Scripts, Sass, docs, partials,skins, and init functionality
  • 39. HOW WE COMPILEOUR COMPONENTS❖ JSON file that references components (we don’t love this bit)❖ @import component Sass files❖ Watchers set up to automatically build all the docs wheneverthe handlebars, Sass, or JavaScript are saved
  • 40. WE’LL FOCUS ON THESASSYou are probably comfortable with templating, watchers, buildprocesses, so we’ll focus on building our styles effectively.
  • 41. the ubiquitous gray boxLET’S MAKE A GRAYROUNDED CORNER BOX
  • 42. MY BOX NEEDS CLEARFIXso let’s create a mixin and see how it affects the output.@include
  • 43. WHAT DO MIXINS DO TOTHE OUTPUT?Property value pairs are copied throughout the stylesheet@mixin  clearfix-­‐overflow  {     overflow:hidden;      *overflow:visible;      zoom:1;}.myCoolThing  {    @include  clearfix-­‐overflow;}This:
  • 44. PROPERTY VALUE PAIRSARE COPIED:.myCoolThing  {    overflow:hidden;      *overflow:visible;      zoom:1;}Becomes:
  • 45. IF YOU’VE USED IT MORETHAN ONCE:.myCoolThing  {    overflow:hidden;      *overflow:visible;      zoom:1;}.myCoolThing2  {    overflow:hidden;      *overflow:visible;      zoom:1;}.myCoolThing3  {    overflow:hidden;      *overflow:visible;      zoom:1;}.myCoolThing4  {    overflow:hidden;      *overflow:visible;      zoom:1;}
  • 46. NEXT, I TRIED TOMAKE TABSIn the OOCSS world, tabs are just a fancy kind of box.
  • 47. HERE, WE TELL SASS TABSARE A BOX:
  • 48. HERE, WE TELL SASS TABSARE A BOX:
  • 49. OMG! OUTPUT IS BAD!
  • 50. OMG! OUTPUT IS BAD!notice line numbers and file name
  • 51. OH SO TEMPTING...to make the SASS nesting match the html nesting!It feels so good!
  • 52. THE INCEPTION RULE:Never go more than three levels deep
  • 53. SO HOW DO WE USE SASSand also have good architecture?
  • 54. BUILD SIMPLECOMPONENTS FIRSTas they often get used in complex ones
  • 55. VARIABLES
  • 56. VARIABLES
  • 57. TYPOGRAPHY
  • 58. TYPOGRAPHY
  • 59. HARD TO CALCULATE?CREATE HELPERS@mobywhale
  • 60. EASY TO SEE WHAT THESEVARIABLES DO
  • 61. LISTS
  • 62. LINKS
  • 63. A HANDLEBARS FILE PERCOMPONENT
  • 64. 3 LAYOUT MECHANISMS
  • 65. GRIDS
  • 66. GRIDS VARIABLES
  • 67. MEDIA BLOCK
  • 68. INLINE LIST
  • 69. MAKE IT EASIER TO DOTHE RIGHT THING THANTHE WRONG THINGPeople will have a tendency to go back to “views” based CSS,unless they have been shown another way
  • 70. TAKE AWAYS:❖ This was clearly a group effort, these metrics improvedbecause of design, style guide, Sass, UI layer improvements, andserver side cleanup❖ Sass can be made to be performant when effectivelycombined with OOCSS for architecture and styleguides fororganization❖ Most importantly, the team is enjoying working on the UIcode.They feel ownership, and want to improve it.❖ Good performance is a feature!
  • 71. GET THE CODE:https://github.com/stubbornella/oocss
  • 72. THANK YOU!@stubbornellahttps://github.com/stubbornella/oocss