Tweet
Tweet

Slide 1

Slide 1 text

Large Scale CSS Refactoring at trivago @pistenprinz

Slide 2

Slide 2 text

Ironman release picture Crazy Guy Talking to you 
 right now Does something with frontend at trivago Loves giving presentations U.Bolt Performance Unicorn

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Christoph Reinartz - @pistenprinz Ironman - Tech Context
 The Big Picture

Slide 6

Slide 6 text

Christoph Reinartz - @pistenprinz #1 Establish design and
 code consistency Introduce a Frontend / Design System into the trivago hotel search

Slide 7

Slide 7 text

Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability Reduce technical debt

Slide 8

Slide 8 text

Christoph Reinartz - @pistenprinz #3 Provide base for modern & sustainable UI rebuild Build modern applications fast

Slide 9

Slide 9 text

Christoph Reinartz - @pistenprinz The former Case Study
 A Pattern Library and Atomic Design

Slide 10

Slide 10 text

Christoph Reinartz - @pistenprinz The old company pages
 Built without Design Thinking and Atomic Design

Slide 11

Slide 11 text

Christoph Reinartz - @pistenprinz The relaunched site
 Built with Design Thinking and Atomic Design

Slide 12

Slide 12 text

Christoph Reinartz - @pistenprinz The first Redesigns
 Company Pages and Quality Test Intro Page

Slide 13

Slide 13 text

Christoph Reinartz - @pistenprinz Where we come from What happened since 2012

Slide 14

Slide 14 text

Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

–Christian Bauer „Zitat hier eingeben.“

Slide 20

Slide 20 text

Christoph Reinartz - @pistenprinz Graph before ironman
 Way better, but still … peaks at the beginning of the stylesheet

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Christoph Reinartz - @pistenprinz Before Ironman The Pain Points

Slide 23

Slide 23 text

Christoph Reinartz - @pistenprinz #1 Sprites were out of control We built Frankenstein with Icons

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Christoph Reinartz - @pistenprinz #2 Creepy Render Bugs No, i don’t render your site

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Christoph Reinartz - @pistenprinz #4 Desktop first approach Oh you poor mobile devices

Slide 29

Slide 29 text

Christoph Reinartz - @pistenprinz #5 Inconsistency and missing Styleguide Or how to create fifty shades of grey or anything else

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Christoph Reinartz - @pistenprinz #6 Overly complex CSS/DOM structure div, div, div, span, span, span

Slide 32

Slide 32 text

Christoph Reinartz - @pistenprinz Ironman - the scope The three disciplines

Slide 33

Slide 33 text

Christoph Reinartz - @pistenprinz #1 Normalize.css incl. border- box switch Replace reset.css and remove content-box for box-sizing

Slide 34

Slide 34 text

Christoph Reinartz - @pistenprinz #2 Mobile first switch Rewrite all media queries

Slide 35

Slide 35 text

Christoph Reinartz - @pistenprinz #3 Replace image sprites with SVGs and Fallback Icon solution based on Grunticon

Slide 36

Slide 36 text

Christoph Reinartz - @pistenprinz Ironman - the oath What we had to promise

Slide 37

Slide 37 text

Christoph Reinartz - @pistenprinz 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

Slide 38

Slide 38 text

Christoph Reinartz - @pistenprinz Ironman - technical details What we had to refactor

Slide 39

Slide 39 text

Christoph Reinartz - @pistenprinz #1 Refactor > 50k LOC of Scss Rewrite / adapt the whole Scss Base

Slide 40

Slide 40 text

Christoph Reinartz - @pistenprinz #2 Adapt dozens of templates Markup changes needed for the new architecture

Slide 41

Slide 41 text

Christoph Reinartz - @pistenprinz #3 Keep IE8 support Yeah we still make money with IE8

Slide 42

Slide 42 text

Christoph Reinartz - @pistenprinz #4 Remove all the Icons coming from sprites Prettify Frankenstein

Slide 43

Slide 43 text

Christoph Reinartz - @pistenprinz #5 Extensive Device-Testing Re-Test the application on all possible device

Slide 44

Slide 44 text

Christoph Reinartz - @pistenprinz #6 Do it four weeks Time is limited

Slide 45

Slide 45 text

Christoph Reinartz - @pistenprinz Ironman - the business side Management <3 refactoring. Not.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it! Prove it! Show benefits! Argue!

Slide 49

Slide 49 text

Christoph Reinartz - @pistenprinz #2 Do it in 3 weeks! Meet the deadline

Slide 50

Slide 50 text

Christoph Reinartz - @pistenprinz #3 Don’t only think technically! Think like a business person

Slide 51

Slide 51 text

Christoph Reinartz - @pistenprinz Ironman - the process How to integrate such a project

Slide 52

Slide 52 text

Christoph Reinartz - @pistenprinz #? How to integrate such a project into an existing process? Don’t harm the existing process

Slide 53

Slide 53 text

Christoph Reinartz - @pistenprinz #? How to handle management expectation? How to keep management up to date

Slide 54

Slide 54 text

Christoph Reinartz - @pistenprinz #? How to plan and estimate? #noEstimates

Slide 55

Slide 55 text

Christoph Reinartz - @pistenprinz Ironman - Agility Possible ways to enforce culture

Slide 56

Slide 56 text

Christoph Reinartz - @pistenprinz #1 People over process The Agile Manifesto told ya

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Christoph Reinartz - @pistenprinz #3 Make progress transparent & involve everybody Update the stakeholders as often as possible

Slide 59

Slide 59 text

Christoph Reinartz - @pistenprinz #4 Motivate people and let them be awesome Hire awesome people and get out of their way

Slide 60

Slide 60 text

Christoph Reinartz - @pistenprinz Ironman - the numbers People & processes

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Christoph Reinartz - @pistenprinz The People One project team … and infinite supporters

Slide 63

Slide 63 text

Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers 2 QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Christoph Reinartz - @pistenprinz Ironman - the numbers Code and Outcome

Slide 66

Slide 66 text

Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16 commits per hour #YOLO

Slide 67

Slide 67 text

Christoph Reinartz - @pistenprinz 11973 LOC added That is new / changed code

Slide 68

Slide 68 text

Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the things (CSS,HTML,JS)

Slide 69

Slide 69 text

Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed nearly 25% of the Scss Base

Slide 70

Slide 70 text

Christoph Reinartz - @pistenprinz Replaced 451 Icons Infinite Icons replaced with SVG Icons

Slide 71

Slide 71 text

Christoph Reinartz - @pistenprinz 352 changed files Infinite Icons replaced with SVG Icons

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile first

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG beauty

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Christoph Reinartz - @pistenprinz Showcase 3
 HTTP Requests

Slide 82

Slide 82 text

Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

Slide 83

Slide 83 text

Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

Slide 84

Slide 84 text

Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and introduce a color palette

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Christoph Reinartz - @pistenprinz <3 Solved the icon chaos Replaced the image sprites with a SVG icon set

Slide 87

Slide 87 text

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_circle info 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_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 join thin filterreset share2 movie call piechart diagram music multimedia

Slide 88

Slide 88 text

Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but still … peaks at the beginning of the stylesheet

Slide 89

Slide 89 text

Christoph Reinartz - @pistenprinz Graph after Ironman
 Improved curve New CSS base Adapted old UI components. Can now be easily rebuilt! SVG

Slide 90

Slide 90 text

Christoph Reinartz - @pistenprinz The metrics
 A/B Test results

Slide 91

Slide 91 text

Christoph Reinartz - @pistenprinz The final result
 Lets celebrate and merge

Slide 92

Slide 92 text

Let’s go crazy


Slide 93

Slide 93 text

Christoph Reinartz - @pistenprinz Retrospective
 What we have achieved - High Level Summary

Slide 94

Slide 94 text

Christoph Reinartz - @pistenprinz <3 Foundation built to move the UI to the next level Sustainable base to continue UI rebuild

Slide 95

Slide 95 text

Christoph Reinartz - @pistenprinz <3 Better rendering performance on mobile No more poor mobile devices

Slide 96

Slide 96 text

Christoph Reinartz - @pistenprinz <3 Shared knowledge and understanding Affects the developers and the entire design/product team

Slide 97

Slide 97 text

Christoph Reinartz - @pistenprinz <3 Optimized design- development process Atomic Design FTW

Slide 98

Slide 98 text

Christoph Reinartz - @pistenprinz <3 New coding guidelines and improved structure ITCSS, BEM, OOCSS, …

Slide 99

Slide 99 text

Christoph Reinartz - @pistenprinz Moving faster
 The time after

Slide 100

Slide 100 text

Christoph Reinartz - @pistenprinz Faster Product Iterations
 Old version of the search result

Slide 101

Slide 101 text

Christoph Reinartz - @pistenprinz The new item element
 New version built with pattern lab upon new base

Slide 102

Slide 102 text

Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz