Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016
1 like1,141 views
The document outlines the 'Ironman' project at Trivago, which focused on a large-scale CSS refactoring to enhance design consistency and code maintainability. The initiative aimed to transition the CSS core to a pattern library-based interface while retaining the existing site's layout and appearance. Key achievements included reducing technical debt, optimizing mobile rendering, and establishing new coding guidelines for improved development processes.
![Christoph Reinartz - @pistenprinz
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]](https://image.slidesharecdn.com/sseea8petxqzqazyji54-signature-97ac0cba55d83fa6f2a2f253a387270677bf11da9177d0b7d555fb911fc34ba2-poli-160526084215/85/Large-Scale-Refactoring-at-Trivago-Christoph-Reinartz-Codemotion-Amsterdam-2016-36-320.jpg)
Large Scale Refactoring at Trivago - Christoph Reinartz - Codemotion Amsterdam 2016
- 1. b b Large Scale CSS Refactoring at trivago Amsterdam 12 May 2016 Christoph Reinartz ~ @pistenprinz
- 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. Christoph Reinartz - @pistenprinz Ironman - Tech Context The Big Picture
- 5. Christoph Reinartz - @pistenprinz #1 Establish design and code consistency Introduce a Frontend / Design System into the trivago hotel search
- 6. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability Reduce technical debt
- 7. Christoph Reinartz - @pistenprinz #3 Provide base for modern & sustainable UI rebuild Build modern applications fast
- 8. Christoph Reinartz - @pistenprinz The former Case Study A Pattern Library and Atomic Design
- 9. Christoph Reinartz - @pistenprinz The old company pages Built without Design Thinking and Atomic Design
- 10. Christoph Reinartz - @pistenprinz The relaunched site Built with Design Thinking and Atomic Design
- 11. Christoph Reinartz - @pistenprinz The first Redesigns Company Pages and Quality Test Intro Page
- 12. Christoph Reinartz - @pistenprinz Where we come from What happened since 2012
- 13. Christoph Reinartz - @pistenprinz Specificity graph 2012 The specificity wall
- 18. Christoph Reinartz - @pistenprinz peaks at the beginning of the stylesheet Graph before Ironman Way better, but still…
- 20. Christoph Reinartz - @pistenprinz Before Ironman The Pain Points
- 21. Christoph Reinartz - @pistenprinz #1 Sprites were out of control We built Frankenstein with Icons
- 23. Christoph Reinartz - @pistenprinz #2 Creepy Render Bugs No, i don’t render your site
- 25. Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!
- 26. Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!
- 27. Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!
- 28. Christoph Reinartz - @pistenprinz #4 Desktop first approach Oh you poor mobile devices
- 29. Christoph Reinartz - @pistenprinz #5 Inconsistency and missing Styleguide Or how to create fifty shades of grey or anything else
- 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 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]
- 37. Christoph Reinartz - @pistenprinz Normalize.css incl. border-box switch Replace reset.css and remove content-box for box-sizing
- 38. Christoph Reinartz - @pistenprinz Mobile first switch Rewrite all media queries
- 39. Christoph Reinartz - @pistenprinz Replace image sprites with SVGs and Fallback Icon solution based on Grunticon
- 40. Christoph Reinartz - @pistenprinz Ironman - YOLO?! Requirement Engineering
- 44. Christoph Reinartz - @pistenprinz Ironman - the oath What we had to promise
- 45. 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
- 46. Christoph Reinartz - @pistenprinz Stop at components layer Fix the things at the root first
- 47. Christoph Reinartz - @pistenprinz Ironman - technical details What we had to refactor
- 48. Christoph Reinartz - @pistenprinz #1 Refactor > 50k LOC of Scss Rewrite / adapt the whole Scss Base
- 49. Christoph Reinartz - @pistenprinz #2 Adapt dozens of templates Markup changes needed for the new architecture
- 50. Christoph Reinartz - @pistenprinz #3 Keep IE8 support Yeah we still make money with IE8
- 51. Christoph Reinartz - @pistenprinz #4 Remove all the Icons coming from sprites Prettify Frankenstein
- 52. Christoph Reinartz - @pistenprinz #5 Extensive Device-Testing Re-Test the application on all possible device
- 53. Christoph Reinartz - @pistenprinz #6 Do it four weeks Time is limited
- 54. Christoph Reinartz - @pistenprinz Ironman - the business side Management <3 refactoring. Not. </3
- 55. 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
- 56. Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it! Prove it! Show benefits! Argue!
- 57. Christoph Reinartz - @pistenprinz #2 Do it in 3 weeks! Meet the deadline
- 58. Christoph Reinartz - @pistenprinz #3 Don’t only think technically! Think like a business person
- 59. Christoph Reinartz - @pistenprinz Ironman - the process How to integrate such a project
- 60. Christoph Reinartz - @pistenprinz #? How to integrate such a project into an existing process? Don’t harm the existing process
- 61. Christoph Reinartz - @pistenprinz #? How to handle management expectation? How to keep management up to date
- 62. Christoph Reinartz - @pistenprinz #? How to plan and estimate? #noEstimates
- 63. Christoph Reinartz - @pistenprinz Ironman - Agility Possible ways to enforce culture
- 64. Christoph Reinartz - @pistenprinz #1 People over process The Agile Manifesto told ya
- 65. 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
- 66. Christoph Reinartz - @pistenprinz #3 Make progress transparent & involve everybody Update the stakeholders as often as possible
- 67. Christoph Reinartz - @pistenprinz #4 Motivate people and let them be awesome Hire awesome people and get out of their way
- 68. Christoph Reinartz - @pistenprinz Ironman - the numbers People & processes
- 70. Christoph Reinartz - @pistenprinz The People One project team … and infinite supporters
- 71. Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers2 QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner
- 72. 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
- 73. Christoph Reinartz - @pistenprinz Ironman - the numbers Code and Outcome
- 74. Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16 commits per hour #YOLO
- 75. Christoph Reinartz - @pistenprinz 11973 LOC added That is new / changed code
- 76. Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the things (CSS,HTML,JS)
- 77. Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed nearly 25% of the Scss Base
- 78. Christoph Reinartz - @pistenprinz Replaced 451 Icons Infinite Icons replaced with SVG Icons
- 79. Christoph Reinartz - @pistenprinz 352 changed files Infinite Icons replaced with SVG Icons
- 80. Christoph Reinartz - @pistenprinz Showcase 1 Desktop first vs. Mobile first
- 83. Christoph Reinartz - @pistenprinz Showcase 2 Sprite Wars vs. SVG beauty
- 86. Christoph Reinartz - @pistenprinz Showcase 3 HTTP Requests
- 87. Christoph Reinartz - @pistenprinz Showcase 3 HTTP requests
- 88. Christoph Reinartz - @pistenprinz Showcase 3 HTTP requests
- 89. Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and introduce a color palette
- 91. 20162015
- 92. Christoph Reinartz - @pistenprinz <3 Solved the icon chaos Replaced the image sprites with a SVG icon set
- 93. 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
- 94. Christoph Reinartz - @pistenprinz peaks at the beginning of the stylesheet Graph before Ironman Way better, but still…
- 95. Christoph Reinartz - @pistenprinz New CSS base Adapted old UI components. Can now be easily rebuilt! SVG Graph after Ironman Improved curve…
- 96. Christoph Reinartz - @pistenprinz The metrics A/B Test results
- 97. Christoph Reinartz - @pistenprinz The final result Lets celebrate and merge
- 98. Christoph Reinartz - @pistenprinz Let’s go crazy
- 99. Christoph Reinartz - @pistenprinz Retrospective What we have achieved - High Level Summary
- 100. Christoph Reinartz - @pistenprinz <3 Foundation built to move the UI to the next level Sustainable base to continue UI rebuild
- 101. Christoph Reinartz - @pistenprinz <3 Better rendering performance on mobile No more poor mobile devices
- 102. Christoph Reinartz - @pistenprinz <3 Shared knowledge and understanding Affects the developers and the entire design/product team
- 103. Christoph Reinartz - @pistenprinz <3 Optimized design-development process Atomic Design FTW
- 104. Christoph Reinartz - @pistenprinz <3 New coding guidelines and improved structure ITCSS, BEM, OOCSS, …
- 105. Christoph Reinartz - @pistenprinz Moving faster The time after
- 106. Christoph Reinartz - @pistenprinz Moved to ITCSS Prepared base for new UI components
- 107. Christoph Reinartz - @pistenprinz Faster Product Iterations Old version of the search result
- 108. Christoph Reinartz - @pistenprinz The new item element New version built with pattern lab upon new base
- 109. Christoph Reinartz - @pistenprinz The next challenges Auto integrate all the things
- 110. Christoph Reinartz - @pistenprinz Ready for the next steps Automate the pattern integration
- 111. Christoph Reinartz - @pistenprinz Thanks I’m done Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz