large scale refactoring at trivago - christoph reinartz - codemotion amsterdam 2016

bb

Large Scale CSS Refactoring at trivago

Amsterdam 12 May 2016

Christoph Reinartz ~ @pistenprinz

since 2012

twitter/medium @pistenprinz

www.creinartz.de

http://www.creinartz.de

Christoph Reinartz - @pistenprinz

What is it?A description

Project Ironman was the technical migration of the trivago hotel search's existing CSS core to a pattern library based user interface.*

*) business translation for #refactorAllTheThings


Ironman - Tech Context The Big Picture


#1 Establish design and code consistencyIntroduce a Frontend / Design System into the trivago hotel search


#2 Improve code quality and maintainabilityReduce technical debt


#3 Provide base for modern & sustainable UI rebuildBuild modern applications fast


The former Case StudyA Pattern Library and Atomic Design


The old company pagesBuilt without Design Thinking and Atomic Design


The relaunched site

Built with Design Thinking and Atomic Design


The first RedesignsCompany Pages and Quality Test Intro Page


Where we come from

What happened since 2012


Specificity graph 2012

The specificity wall


peaks at the beginning of the stylesheet

Graph before Ironman

Way better, but still…


Before Ironman

The Pain Points


#1 Sprites were out of controlWe built Frankenstein with Icons


#2 Creepy Render BugsNo, i don’t render your site


#3 Too much CSSHow many Selectors do you use? ALL!


#3 Too much CSS

How many Selectors do you use? ALL!


#4 Desktop first approachOh you poor mobile devices


#5 Inconsistency and missing StyleguideOr how to create fifty shades of grey or anything else


#6 Overly complex CSS/DOM structurediv, div, div, span, span, span


Ironman - the scope

The three disciplines


New CSS Core Old CSS Core

normalize.css reset.css

border-box content-box

mobile first (min-width) desktop first (max-width)

media queries inline in separate files

embed SVG icon image sprites

ITCSS layering [something]

BEM, OOCSS, Atomic CSS [something]

Post processing (MQPacker etc.) nothing

improved legacy / fallback handling [something]


Normalize.css incl. border-box switchReplace reset.css and remove content-box for box-sizing


Mobile first switchRewrite all media queries


Replace image sprites with SVGs and FallbackIcon solution based on Grunticon


Ironman - YOLO?!

Requirement Engineering

https://www.flickr.com/photos/jesper/346483272/


Ironman - the oath

What we had to promise


Retain the existing Layout & Designintegrate the new CSS framework base which was developed with the Pattern Library without changing the appearance of the site


Stop at components layer Fix the things at the root first


Ironman - technical details

What we had to refactor


#1 Refactor > 50k LOC of ScssRewrite / adapt the whole Scss Base


#2 Adapt dozens of templatesMarkup changes needed for the new architecture


#3 Keep IE8 supportYeah we still make money with IE8


#4 Remove all the Icons coming from spritesPrettify Frankenstein


#5 Extensive Device-TestingRe-Test the application on all possible device


#6 Do it four weeksTime is limited


Ironman - the business side

Management <3 refactoring. Not. </3


How to tell management that you need 4 weeks of feature freeze and the User Interface will look exactly the same afterwards?Developer goes Marketing


#1 Be a salesman- Sell it! Prove it! Show benefits!Argue!


#2 Do it in 3 weeks!Meet the deadline


#3 Don’t only think technically! Think like a business person


Ironman - the process

How to integrate such a project


#? How to integrate such a project into an existing process?Don’t harm the existing process


#? How to handle management expectation?How to keep management up to date


#? How to plan and estimate?#noEstimates


Ironman - Agility

Possible ways to enforce culture


#1 People over processThe Agile Manifesto told ya


#2 Commitment over estimation*Interested to know when you are done, or interested to be as fast as possible?*) only works if you meet the deadline


#3 Make progress transparent & involve everybodyUpdate the stakeholders as often as possible


#4 Motivate people and let them be awesomeHire awesome people and get out of their way


Ironman - the numbers

People & processes


The People One project team… and infinite supporters


9 Front-End Devs

3 Designers2 QA

Release Engineer

Management

Back-End Devs

Performance Lead

UBolt UXBolt

Product Owner


The (lean) Process 3 Meetings +17 Stand-Ups… and a Kanban board with 67 Post-Its and a slack-channel is all we needed


Ironman - the numbers

Code and Outcome


889 commits in 3 weeks16 commits per hour #YOLO


11973 LOC addedThat is new / changed code


36668 LOC removedDelete all the things (CSS,HTML,JS)


LOC from 52991 to 39755Removed nearly 25% of the Scss Base


Replaced 451 IconsInfinite Icons replaced with SVG Icons


352 changed filesInfinite Icons replaced with SVG Icons


Showcase 1Desktop first vs. Mobile first


Showcase 2Sprite Wars vs. SVG beauty


Showcase 3HTTP Requests


Showcase 3HTTP requests


<3 Sorted the colorsEstablished and introduce a color palette

trv-blue-light#3f9fc1

trv-red-light#d67763

trv-green-light#8cba3f

trv-green-lighter#b2d17f

trv-green-dark#4c7b00

trv-juri-light#697379

trv-juri-lighter#9ba2a6

trv-juri-lightest#ebeced

trv-blue-dark#005f81

trv-blue#007fad

trv-orange#f48f00

trv-red#c94a30

trv-orange-dark#b76b00

trv-orange-light#f6ab3f

trv-blue-lightest#e5f2f6

trv-red-lightest#f9ecea

trv-orange-lightest#fdf3e5

trv-red-dark#963724

trv-green#66a400

trv-juri#37454d

trv-juri-dark#293339

16

12 18

16

12

12

18

12

18

16

*

trv-juri-very-light#cdd0d2

trv-red-very-light#f1d1cb

trv-green-very-light#d8e8bf

trv-orange-very-light#fce3bf

trv-blue-very-light#bfdfea

trv-red-lighter#e4a49b

trv-orange-lighter#f9c780

trv-blue-lighter#7fbfd6

trv-green-lightest#eff5e5

20162015


<3 Solved the icon chaosReplaced the image sprites with a SVG icon set

description details infobig hotelconnect smiley heart towel star pictures

wifi spa beach breakfast pool pet golf tv family eco parking

bed_single bed_double bed_small couple universal home menu share edit

checkout checkin general rates

faq_circle faq info_circleinfo

arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus

image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle filter

dashboard statistics hotel2 hotel travel2 travel booking hotelchain upload delete tick_circle exclamation_circle contact

profile info product history giveback lock calendar search publisher career comment download map

smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent

level sort department

poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports

filterreset join

thin

share2 movie call piechart diagram music multimedia

wifi spa beach breakfast pool pet golf tv family eco parking

bed_single bed_double bed_small couple universal home menu share edit

checkout checkin general rates description details infobig hotelconnect smiley heart towel star pictures

icn_profile icn_info icn_product icn_history icn_giveback icn_lock icn_calendar icn_search icn_publisher icn_career icn_comment icn_download icn_map

icn_dashboard icn_statistics icn_hotel2 icn_hotel icn_travel2 icn_travel icn_booking icn_hotelchain icn_upload icn_delete icn_tick_circle exclamation_circle contact

image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle icn_filter

arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus

faq_circle faq info_circle info

smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellentsmiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent

level sort department

poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports

join

thin

filterreset share2 movie call piechart diagram music multimedia


peaks at the beginning of the stylesheet

Graph before Ironman

Way better, but still…


New CSS base

Adapted old UI components. Can now be easily rebuilt!

SVG

Graph after Ironman

Improved curve…


The metricsA/B Test results


The final resultLets celebrate and merge


Let’s go crazy


RetrospectiveWhat we have achieved - High Level Summary


<3 Foundation built to move the UI to the next levelSustainable base to continue UI rebuild


<3 Better rendering performance on mobileNo more poor mobile devices


<3 Shared knowledge and understanding Affects the developers and the entire design/product team


<3 Optimized design-development process Atomic Design FTW


<3 New coding guidelines and improved structure ITCSS, BEM, OOCSS, …


Moving fasterThe time after


Moved to ITCSS

Prepared base for new UI components


Faster Product IterationsOld version of the search result


The new item elementNew version built with pattern lab upon new base


The next challenges Auto integrate all the things


Ready for the next stepsAutomate the pattern integration


Thanks I’m done

Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz

large scale refactoring at trivago - christoph reinartz - codemotion amsterdam 2016

Technology