Project Ironman - Large Scale CSS Refactoring at trivago (2nd edition)

Keeping technical debt low while developing a CSS base on a large scale project is a tough challenge. Even more exciting is to refactor existing CSS / frontend foundations which became cluttered.

Running into into consistency issues between code and design which slows down the development of user interface iterations is a common problem in fast growing applications when the development doesn't follow efficient guidelines, styleguides and utilizes an efficient process.

At the beginning of 2015 we began establishing a design/frontend system and improving our design-development workflow at trivago. We introduced a pattern library, started utilizing atomic design in our workflow, created new coding guidelines, and adapted several methodologies like BEM and ITCSS in order to support us in maintaining and developing our CSS/UI on a large scale.

The talk will provide backgrounds, insights, learnings and technical approaches of refactoring a CSS base on a large scale project including its scope, the outcome and the business value.

Transcript

1. Large Scale CSS Refactoring at trivago @pistenprinz
2. Ironman release picture Crazy Guy Talking to you 
 right now Does something with frontend at trivago Loves giving presentations U.Bolt Performance Unicorn
3. 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
4. Code / Process Audits Project Ironman was the technical migration of the trivago hotel search's existing CSS core to a pattern library based user interface.* The official JIRA task
 A description
5. Christoph Reinartz - @pistenprinz Ironman - Tech Context
 The Big Picture
6. Christoph Reinartz - @pistenprinz #1 Establish design and
 code consistency Introduce a Frontend / Design System into the trivago hotel search
7. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability Reduce technical debt
8. Christoph Reinartz - @pistenprinz #3 Provide base for modern & sustainable UI rebuild Build modern applications fast
9. Christoph Reinartz - @pistenprinz The former Case Study
 A Pattern Library and Atomic Design
10. Christoph Reinartz - @pistenprinz Atomic Design
 Explained in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/
11. Christoph Reinartz - @pistenprinz The pattern library
 A tool to realize Atomic Design
12. Christoph Reinartz - @pistenprinz The Pattern Library
 Used tools
13. Christoph Reinartz - @pistenprinz The old company pages
 Built without Design Thinking and Atomic Design
14. Christoph Reinartz - @pistenprinz The relaunched site
 Built with Design Thinking and Atomic Design
15. Christoph Reinartz - @pistenprinz The first Redesigns
 Company Pages and Quality Test Intro Page
16. Christoph Reinartz - @pistenprinz Where we come from What happened since 2012
17. Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall
22. –Christian Bauer „Zitat hier eingeben.“
23. Christoph Reinartz - @pistenprinz Graph before ironman
 Way better, but still … peaks at the beginning of the stylesheet
25. Christoph Reinartz - @pistenprinz Before Ironman The Pain Points
26. Christoph Reinartz - @pistenprinz #1 Sprites were out of control We built Frankenstein with Icons
28. Christoph Reinartz - @pistenprinz #2 Creepy Render Bugs No, i don’t render your site
30. #3 Too much CSS How many Selectors do you use? ALL!
31. Christoph Reinartz - @pistenprinz #4 Desktop first approach Oh you poor mobile devices
32. Christoph Reinartz - @pistenprinz #5 Inconsistency and missing Styleguide Or how to create fifty shades of grey or anything else
33. Code / Process Audits • IE7 support • Layout built on reset.css • too complex CSS structure
34. Christoph Reinartz - @pistenprinz #6 Overly complex CSS/DOM structure div, div, div, span, span, span
35. Christoph Reinartz - @pistenprinz Ironman - the scope The three disciplines
36. Christoph Reinartz - @pistenprinz #1 Normalize.css incl. border- box switch Replace reset.css and remove content-box for box-sizing
37. Christoph Reinartz - @pistenprinz #2 Mobile first switch Rewrite all media queries
38. Christoph Reinartz - @pistenprinz #3 Replace image sprites with SVGs and Fallback Icon solution based on Grunticon
39. Christoph Reinartz - @pistenprinz Ironman - the oath What we had to promise
40. 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
41. Christoph Reinartz - @pistenprinz Ironman - technical details What we had to refactor
42. Christoph Reinartz - @pistenprinz #1 Refactor > 50k LOC of Scss Rewrite / adapt the whole Scss Base
43. Christoph Reinartz - @pistenprinz #2 Adapt dozens of templates Markup changes needed for the new architecture
44. Christoph Reinartz - @pistenprinz #3 Keep IE8 support Yeah we still make money with IE8
45. Christoph Reinartz - @pistenprinz #4 Remove all the Icons coming from sprites Prettify Frankenstein
46. Christoph Reinartz - @pistenprinz #5 Extensive Device-Testing Re-Test the application on all possible device
47. Christoph Reinartz - @pistenprinz #6 Do it four weeks Time is limited
48. Christoph Reinartz - @pistenprinz Ironman - the business side Management <3 refactoring. Not. </3
49. 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
50. 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?
51. Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it! Prove it! Show benefits! Argue!
52. Christoph Reinartz - @pistenprinz #2 Do it in 3 weeks! Meet the deadline
53. Christoph Reinartz - @pistenprinz #3 Don’t only think technically! Think like a business person
54. Christoph Reinartz - @pistenprinz Ironman - the process How to integrate such a project
55. Christoph Reinartz - @pistenprinz #? How to integrate such a project into an existing process? Don’t harm the existing process
56. Christoph Reinartz - @pistenprinz #? How to handle management expectation? How to keep management up to date
57. Christoph Reinartz - @pistenprinz #? How to plan and estimate? #noEstimates
58. Christoph Reinartz - @pistenprinz Ironman - Agility Possible ways to enforce culture
59. Christoph Reinartz - @pistenprinz #1 People over process The Agile Manifesto told ya
60. 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
61. Christoph Reinartz - @pistenprinz #3 Make progress transparent & involve everybody Update the stakeholders as often as possible
62. Christoph Reinartz - @pistenprinz #4 Motivate people and let them be awesome Hire awesome people and get out of their way
63. Christoph Reinartz - @pistenprinz Ironman - the numbers People & processes
65. Christoph Reinartz - @pistenprinz The People One project team … and infinite supporters
66. Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers 2 QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner
67. 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
68. Christoph Reinartz - @pistenprinz Ironman - the numbers Code and Outcome
69. Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16 commits per hour #YOLO
70. Christoph Reinartz - @pistenprinz 11973 LOC added That is new / changed code
71. Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the things (CSS,HTML,JS)
72. Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed nearly 25% of the Scss Base
73. Christoph Reinartz - @pistenprinz Replaced 451 Icons Infinite Icons replaced with SVG Icons
74. Christoph Reinartz - @pistenprinz 352 changed files Infinite Icons replaced with SVG Icons
75. 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
76. 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
77. 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
78. Code / Process Audits • 1 Project Team • 7 awesome developers • infinite supporters
79. Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile first
82. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG beauty
85. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP Requests
86. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests
87. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests
88. Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and introduce a color palette
89. 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
90. Christoph Reinartz - @pistenprinz <3 Solved the icon chaos Replaced the image sprites with a SVG icon set
91. 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
92. Christoph Reinartz - @pistenprinz Moved to ITCSS
 Prepared base for new UI components
93. Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but still … peaks at the beginning of the stylesheet
94. Christoph Reinartz - @pistenprinz Graph after Ironman
 Improved curve New CSS base Adapted old UI components. Can now be easily rebuilt! SVG
95. Christoph Reinartz - @pistenprinz The metrics
 A/B Test results
96. Christoph Reinartz - @pistenprinz The final result
 Lets celebrate and merge
97. Let’s go crazy

98. Christoph Reinartz - @pistenprinz Retrospective
 What we have achieved - High Level Summary
99. Christoph Reinartz - @pistenprinz <3 Foundation built to move the UI to the next level Sustainable base to continue UI rebuild
100. Christoph Reinartz - @pistenprinz <3 Better rendering performance on mobile No more poor mobile devices
101. Christoph Reinartz - @pistenprinz <3 Shared knowledge and understanding Affects the developers and the entire design/product team
102. Christoph Reinartz - @pistenprinz <3 Optimized design- development process Atomic Design FTW
103. Christoph Reinartz - @pistenprinz <3 New coding guidelines and improved structure ITCSS, BEM, OOCSS, …
104. Christoph Reinartz - @pistenprinz Moving faster
 The time after
105. Christoph Reinartz - @pistenprinz Faster Product Iterations
 Old version of the search result
106. Christoph Reinartz - @pistenprinz The new item element
 New version built with pattern lab upon new base
107. Christoph Reinartz - @pistenprinz The next challenges
 Auto integrate all the things
108. Christoph Reinartz - @pistenprinz Ready for the next steps
 Automate the pattern integration
109. Christoph Reinartz - @pistenprinz Create packages
 trivago core patterns
110. Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz