Successfully reported this slideshow.

Creating Living Style Guides to Improve Performance

121

Share

Loading in …3
×
1 of 83
1 of 83

Creating Living Style Guides to Improve Performance

121

Share

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 Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Creating Living Style Guides to Improve Performance

  1. CREATING LIVING STYLE GUIDES RefactoringTrulia’s UI with SASS, OOCSS, and handlebars @stubbornella
  2. WHY DON’T THESE STYLE GUIDES WORK? ❖ They take months to produce ❖ Often out of date before they are ever pdf’ed ❖ They are design centric and exclude engineering from the equation
  3. WE NEED TO KILL THAT TYPE OF STYLE GUIDE So a new, leaner, more effective version can emerge.
  4. WE BELIEVE IN LIVING STYLE GUIDES
  5. WHAT IS A LIVING STYLE GUIDE? ❖ Guide to existing site styles ❖ Lives in code, so it evolves with the site or app ❖ Collaboration tool for engineering and design teams to work together
  6. A GOOD STYLE GUIDE LEADS TO: ❖ Better UI layer code ❖ More informed design choices ❖ A better performing site (we’ll show you how)
  7. a collaboration
  8. TRULIA CHOSE TO CONVERT THEIR SRP Mainly because it was already on the agenda for a redesign
  9. REAL USER MEASUREMENTS (RUM) What matters to you?
  10. THEIR NEW HTML IS 48% SMALLER
  11. 21% FASTER LOAD TIME
  12. 60% FASTER TIME TO FIRST BYTE
  13. THEY REDUCED UNUSED CSS BY 135KB
  14. SRP PAGE VIEWS UP 11%
  15. PDP PAGE VIEWS UP 3%
  16. TRULIA ALSO CARES ABOUT... Click throughs, leads, customer satisfaction, and filter use. All of those metrics also improved.
  17. SO WHAT DOES THAT HAVE TO DO WITH A STYLE GUIDE?
  18. YOUR CSS CAUSES LOTS OF 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 IS THIS... styles duplicated over and over
  22. ANALYZING DUPLICATION Grep | CSS Lint | CSSCSS
  23. ON THIS PROJECT WE USED 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 -l recursively current directory send results count the lines
  25. TRULIA DETAILS h1-h6 564 font-size 2267 margin 3993 padding 4493 padding: 0 1214 margin: 0 1019 Lots of room for improvement!
  26. TRULIA DETAILS !important 495 color 3920 hex 6464 #fff 1297 total rules 16,225 background 4888 Unused CSS (home page) 186kb or 74% Lots of room for improvement!
  27. ANALYZING DESIGN INCONSISTENCY DESIGN INCONSISTENCY
  28. DEMO TYPOGRAPHY TOOL
  29. USE HEURISTICS AND COMMON SENSE To reduce the total number of styles
  30. BUTTONS
  31. FOR EACH COMPONENT, THREE OPTIONS: Build! Replace { 1 2 3 Redesign
  32. DO THIS FOR ALL COMPONENT TYPES... Try to find as many variations as you can
  33. DEMO THE STYLE GUIDE
  34. HOW DO WE BUILD A COMPONENT?
  35. COMPONENT STRUCTURE Keep component files self-contained
  36. WE KEEP ALL COMPONENTS TOGETHER Independent of the apps views
  37. CREATE SMALL FILES ❖ Less merge conflicts ❖ Easier to include/exclude a component
  38. SOME COMPONENTS HAVE ASSOCIATED JS ❖ We keep all the parts of a component together ❖ Scripts, Sass, docs, partials, skins, and init functionality
  39. HOW WE COMPILE OUR 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 whenever the handlebars, Sass, or JavaScript are saved
  40. WE’LL FOCUS ON THE SASS You are probably comfortable with templating, watchers, build processes, so we’ll focus on building our styles effectively.
  41. the ubiquitous gray box LET’S MAKE A GRAY ROUNDED CORNER BOX
  42. MY BOX NEEDS CLEARFIX so let’s create a mixin and see how it affects the output. @include
  43. WHAT DO MIXINS DO TO THE 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 PAIRS ARE COPIED: .myCoolThing  {    overflow:hidden;      *overflow:visible;      zoom:1; } Becomes:
  45. IF YOU’VE USED IT MORE THAN 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 TO MAKE TABS In the OOCSS world, tabs are just a fancy kind of box.
  47. HERE, WE TELL SASS TABS ARE A BOX:
  48. HERE, WE TELL SASS TABS ARE 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 SASS and also have good architecture?
  54. BUILD SIMPLE COMPONENTS FIRST as 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 THESE VARIABLES DO
  61. LISTS
  62. LINKS
  63. A HANDLEBARS FILE PER COMPONENT
  64. 3 LAYOUT MECHANISMS
  65. GRIDS
  66. GRIDS VARIABLES
  67. MEDIA BLOCK
  68. INLINE LIST
  69. MAKE IT EASIER TO DO THE RIGHT THING THAN THE WRONG THING People 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 improved because of design, style guide, Sass, UI layer improvements, and server side cleanup ❖ Sass can be made to be performant when effectively combined with OOCSS for architecture and styleguides for organization ❖ Most importantly, the team is enjoying working on the UI code.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! @stubbornella https://github.com/stubbornella/oocss

×