project ironman - large scale refactoring @trivago (jsunconf 2016)
TRANSCRIPT
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
Christoph Reinartz - @pistenprinz
Ironman - Tech ContextThe Big Picture
Christoph Reinartz - @pistenprinz
#1 Establish design and code consistencyIntroduce a Frontend / Design System into the trivago hotel search
Christoph Reinartz - @pistenprinz
#2 Improve code quality and maintainabilityReduce technical debt
Christoph Reinartz - @pistenprinz
#3 Provide base for modern & sustainable UI rebuildBuild modern applications fast
Christoph Reinartz - @pistenprinz
The former Case StudyA Pattern Library and Atomic Design
Christoph Reinartz - @pistenprinz
The old company pagesBuilt without Design Thinking and Atomic Design
Christoph Reinartz - @pistenprinz
The relaunched site
Built with Design Thinking and Atomic Design
Christoph Reinartz - @pistenprinz
The first RedesignsCompany Pages and Quality Test Intro Page
Christoph Reinartz - @pistenprinz
Where we come from
What happened since 2012
Christoph Reinartz - @pistenprinz
Specificity graph 2012
The specificity wall
–Christian Bauer
„Zitat hier eingeben.“
Christoph Reinartz - @pistenprinz
Graph before ironman
Way better, but still …
peaks at the beginning of the stylesheet
Christoph Reinartz - @pistenprinz
Before Ironman
The Pain Points
Christoph Reinartz - @pistenprinz
#1 Sprites were out of controlWe built Frankenstein with Icons
Christoph Reinartz - @pistenprinz
#2 Creepy Render BugsNo, i don’t render your site
#3 Too much CSSHow many Selectors do you use? ALL!
Christoph Reinartz - @pistenprinz
#4 Desktop first approachOh you poor mobile devices
Christoph Reinartz - @pistenprinz
#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
Christoph Reinartz - @pistenprinz
#6 Overly complex CSS/DOM structurediv, div, div, span, span, span
Christoph Reinartz - @pistenprinz
Ironman - the scope
The three disciplines
Christoph Reinartz - @pistenprinz
#1 Normalize.css incl. border-box switchReplace reset.css and remove content-box for box-sizing
Christoph Reinartz - @pistenprinz
#2 Mobile first switchRewrite all media queries
Christoph Reinartz - @pistenprinz
#3 Replace image sprites with SVGs and FallbackIcon solution based on Grunticon
Christoph Reinartz - @pistenprinz
Ironman - the oath
What we had to promise
Christoph Reinartz - @pistenprinz
Retain the existing Layout & Designintegrate the new CSS framework base which was developed with the Pattern Library without changing the appearance of the site
Christoph Reinartz - @pistenprinz
Ironman - technical details
What we had to refactor
Christoph Reinartz - @pistenprinz
#1 Refactor > 50k LOC of ScssRewrite / adapt the whole Scss Base
Christoph Reinartz - @pistenprinz
#2 Adapt dozens of templatesMarkup changes needed for the new architecture
Christoph Reinartz - @pistenprinz
#3 Keep IE8 supportYeah we still make money with IE8
Christoph Reinartz - @pistenprinz
#4 Remove all the Icons coming from spritesPrettify Frankenstein
Christoph Reinartz - @pistenprinz
#5 Extensive Device-TestingRe-Test the application on all possible device
Christoph Reinartz - @pistenprinz
#6 Do it four weeksTime is limited
Christoph Reinartz - @pistenprinz
Ironman - the business side
Management <3 refactoring. Not. </3
Christoph Reinartz - @pistenprinz
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?
Christoph Reinartz - @pistenprinz
#1 Be a salesman- Sell it! Prove it! Show benefits!Argue!
Christoph Reinartz - @pistenprinz
#2 Do it in 3 weeks!Meet the deadline
Christoph Reinartz - @pistenprinz
#3 Don’t only think technically! Think like a business person
Christoph Reinartz - @pistenprinz
Ironman - the process
How to integrate such a project
Christoph Reinartz - @pistenprinz
#? How to integrate such a project into an existing process?Don’t harm the existing process
Christoph Reinartz - @pistenprinz
#? How to handle management expectation?How to keep management up to date
Christoph Reinartz - @pistenprinz
#? How to plan and estimate?#noEstimates
Christoph Reinartz - @pistenprinz
Ironman - Agility
Possible ways to enforce culture
Christoph Reinartz - @pistenprinz
#1 People over processThe Agile Manifesto told ya
Christoph Reinartz - @pistenprinz
#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
Christoph Reinartz - @pistenprinz
#3 Make progress transparent & involve everybodyUpdate the stakeholders as often as possible
Christoph Reinartz - @pistenprinz
#4 Motivate people and let them be awesomeHire awesome people and get out of their way
Christoph Reinartz - @pistenprinz
Ironman - the numbers
People & processes
Christoph Reinartz - @pistenprinz
The People One project team… and infinite supporters
Christoph Reinartz - @pistenprinz
9 Front-End Devs
3 Designers2 QA
Release Engineer
Management
Back-End Devs
Performance Lead
UBolt UXBolt
Product Owner
Christoph Reinartz - @pistenprinz
The (lean) Process 3 Meetings +17 Stand-Ups… and a Kanban board with 67 Post-Its and a slack-channel is all we needed
Christoph Reinartz - @pistenprinz
Ironman - the numbers
Code and Outcome
Christoph Reinartz - @pistenprinz
889 commits in 3 weeks16 commits per hour #YOLO
Christoph Reinartz - @pistenprinz
11973 LOC addedThat is new / changed code
Christoph Reinartz - @pistenprinz
36668 LOC removedDelete all the things (CSS,HTML,JS)
Christoph Reinartz - @pistenprinz
LOC from 52991 to 39755Removed nearly 25% of the Scss Base
Christoph Reinartz - @pistenprinz
Replaced 451 IconsInfinite Icons replaced with SVG Icons
Christoph Reinartz - @pistenprinz
352 changed filesInfinite Icons replaced with SVG Icons
Christoph Reinartz - @pistenprinz
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
Christoph Reinartz - @pistenprinz
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 Rules Before and after
5817 vs 4870
Christoph Reinartz - @pistenprinz
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 Declarations Before and after
13500 vs 11300
Christoph Reinartz - @pistenprinz
Showcase 1Desktop first vs. Mobile first
Christoph Reinartz - @pistenprinz
Showcase 2Sprite Wars vs. SVG beauty
Christoph Reinartz - @pistenprinz
Showcase 3HTTP Requests
Christoph Reinartz - @pistenprinz
Showcase 3HTTP requests
Christoph Reinartz - @pistenprinz
Showcase 3HTTP requests
Christoph Reinartz - @pistenprinz
<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
Christoph Reinartz - @pistenprinz
<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
Christoph Reinartz - @pistenprinz
Graph before Ironman
Way better, but still …
peaks at the beginning of the stylesheet
Christoph Reinartz - @pistenprinz
Graph after Ironman
Improved curve
New CSS base
Adapted old UI components. Can now be easily rebuilt!
SVG
Christoph Reinartz - @pistenprinz
The metricsA/B Test results
Christoph Reinartz - @pistenprinz
The final result Lets celebrate and merge
Let’s go crazy
Christoph Reinartz - @pistenprinz
RetrospectiveWhat we have achieved - High Level Summary
Christoph Reinartz - @pistenprinz
<3 Foundation built to move the UI to the next levelSustainable base to continue UI rebuild
Christoph Reinartz - @pistenprinz
<3 Better rendering performance on mobileNo more poor mobile devices
Christoph Reinartz - @pistenprinz
<3 Shared knowledge and understanding Affects the developers and the entire design/product team
Christoph Reinartz - @pistenprinz
<3 Optimized design-development process Atomic Design FTW
Christoph Reinartz - @pistenprinz
<3 New coding guidelines and improved structure ITCSS, BEM, OOCSS, …
Christoph Reinartz - @pistenprinz
Moving fasterThe time after
Christoph Reinartz - @pistenprinz
Faster Product IterationsOld version of the search result
Christoph Reinartz - @pistenprinz
The new item elementNew version built with pattern lab upon new base
Christoph Reinartz - @pistenprinz
ThanksI’m done
Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz