Project Ironman - Large Scale Refactoring @trivago (JSUnconf 2016)

Large Scale CSS Refactoring at trivago

@pistenprinz

Ironman release picture

Crazy Guy

Talking to you right now

Does something with frontend at trivago

Loves giving presentations

U.Bolt

Performance Unicorn

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 ContextThe 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

–Christian Bauer

„Zitat hier eingeben.“


Graph before ironman

Way better, but still …

peaks at the beginning of the stylesheet


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!


#4 Desktop first approachOh you poor mobile devices


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

Code / Process Audits• IE7 support • Layout built on reset.css • too complex CSS structure


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


Ironman - the scope

The three disciplines


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


#2 Mobile first switchRewrite all media queries


#3 Replace image sprites with SVGs and FallbackIcon solution based on Grunticon


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


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

Code / Process AuditsHow to tell management that you need you need 4 weeks of feature freeze and the User Interface will exactly look the same afterwards?


#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


Code / Process Audits• Foundation built to move the UI Development to the next level • Better rendering performance on mobile • Shared knowledge and understanding throughout, between all developers and the entire design/product team

CSS Selectors Before and after

7009 vs 5605



CSS Rules Before and after

5817 vs 4870



CSS Declarations Before and after

13500 vs 11300


Showcase 1Desktop first vs. Mobile first


Showcase 2Sprite Wars vs. SVG beauty


Showcase 3HTTP Requests


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


<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


Graph before Ironman

Way better, but still …

peaks at the beginning of the stylesheet


Graph after Ironman

Improved curve

New CSS base

Adapted old UI components. Can now be easily rebuilt!

SVG


The metricsA/B Test results


The final result Lets 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


Faster Product IterationsOld version of the search result


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


ThanksI’m done

Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz

Technology

Project Ironman - Large Scale Refactoring @trivago (JSUnconf 2016)