SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Creating Living Style Guides to Improve Performance
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.
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
WE NEED TO KILL THAT
TYPE OF STYLE GUIDE So a new, leaner, more effective version can emerge.
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
A GOOD STYLE GUIDE LEADS
TO: ❖ Better UI layer code ❖ More informed design choices ❖ A better performing site (we’ll show you how)
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
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
grep -r font-size . |
wc -l recursively current directory send results count the lines
SOME COMPONENTS HAVE ASSOCIATED JS
❖ We keep all the parts of a component together ❖ Scripts, Sass, docs, partials, skins, and init functionality
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
WE’LL FOCUS ON THE SASS
You are probably comfortable with templating, watchers, build processes, so we’ll focus on building our styles effectively.
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:
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
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!