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

<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

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

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

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!

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

project ironman - large scale refactoring @trivago (jsunconf 2016)

Technology

large scale refactoring at trivago - christoph reinartz -...

reflections on teaching refactoring: a tale of two...

athlete guide - ironman-china · to ironman 70.3 shanghai...

mock trivago pitch deck

chapter 11 – refactoring literature -...

trivago – giulia eremita - #smwmln – social media better...

direct link - trivago

official results guide - ironman official site | ironman...

how to trivago hotelier final

ironman - hamburg cyclassics · 2019-07-19 · ironman 70.3...

ironman maastricht limburg 28.07.2015 results agegroup...

ironman series

refactoring for observation · 2020-01-24 · refactoring...

refactoring, re nement, and...

large scale data processing pipelines at trivago

wrapup of refactoring example...refactoring should not cause...

ironman 70.3 wc nice men september 08, 2019 results … ›...

refactoring - computer action...

kafka at trivago

ironman series - shadesystems.co.nz€¦ · ironman -...