Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016

b
b
Large Scale CSS Refactoring at trivago
Amsterdam 12 May 2016
Christoph Reinartz ~ @pistenprinz

since 2012
twitter/medium
@pistenprinz
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 consistency
Introduce a Frontend / Design System into the trivago hotel search

#2
Improve code quality and
maintainability
Reduce technical debt

#3
Provide base for modern & sustainable
UI rebuild
Build modern applications fast

The former Case Study 
A Pattern Library and Atomic Design

The old company pages 
Built without Design Thinking and Atomic Design

The relaunched site 
Built with Design Thinking and Atomic Design

The ﬁrst Redesigns 
Company Pages and Quality Test Intro Page

Where we come from
What happened since 2012

Speciﬁcity graph 2012 
The speciﬁcity 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 control
We built Frankenstein with Icons

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

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

#4
Desktop ﬁrst approach
Oh you poor mobile devices

#5
Inconsistency and missing Styleguide
Or how to create ﬁfty shades of grey or anything else

#6
Overly complex CSS/DOM structure
div, 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 switch
Replace reset.css and remove content-box for box-sizing

Mobile ﬁrst switch
Rewrite all media queries

Replace image sprites with SVGs and
Fallback
Icon solution based on Grunticon

Ironman - YOLO?!
Requirement Engineering

https://www.ﬂickr.com/photos/jesper/346483272/

Ironman - the oath
What we had to promise

Retain the existing Layout & Design
integrate 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 ﬁrst

Ironman - technical details
What we had to refactor

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

#2
Adapt dozens of templates
Markup changes needed for the new architecture

#3
Keep IE8 support
Yeah we still make money with IE8

#4
Remove all the Icons coming from
sprites
Prettify Frankenstein

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

#6
Do it four weeks
Time 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
beneﬁts!
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 process
The 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
everybody
Update the stakeholders as often as possible

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

Ironman - the numbers
People & processes

The People
One project team
… and inﬁnite 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 weeks
16 commits per hour #YOLO

11973 LOC added
That is new / changed code

36668 LOC removed
Delete all the things (CSS,HTML,JS)

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

Replaced 451 Icons
Inﬁnite Icons replaced with SVG Icons

352 changed ﬁles
Inﬁnite Icons replaced with SVG Icons

Showcase 1 
Desktop ﬁrst vs. Mobile ﬁrst

Showcase 2 
Sprite Wars vs. SVG beauty

Showcase 3 
HTTP Requests

Showcase 3 
HTTP requests

<3
Sorted the colors
Established 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 chaos
Replaced 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

New CSS
base
Adapted old UI components.
Can now be easily rebuilt!
SVG
Graph after Ironman 
Improved curve…

The metrics 
A/B Test results

The ﬁnal result 
Lets celebrate and merge

Let’s go crazy

Retrospective 
What we have achieved - High Level Summary

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

<3
Better rendering performance on
mobile
No 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 faster 
The time after

Moved to ITCSS 
Prepared base for new UI components

Faster Product Iterations 
Old version of the search result

The new item element 
New version built with pattern lab upon new base

The next challenges 
Auto integrate all the things

Ready for the next steps 
Automate 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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016

Similaire à Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016 (20)

Plus de Codemotion

Plus de Codemotion (20)

Dernier

Dernier (20)

Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016