Large Scale CSS Refactoring

Large Scale CSS Refactoring

Project Ironman: the technical migration of the trivago hotel search’s existing CSS core 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. 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.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

May 12, 2016
Tweet

Transcript

  1. b b Large Scale CSS Refactoring at trivago Amsterdam 12

    May 2016 Christoph Reinartz ~ @pistenprinz
  2. since 2012 twitter/medium @pistenprinz www.creinartz.de

  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

  14. None
  15. None
  16. None
  17. None
  18. Christoph Reinartz - @pistenprinz peaks at the beginning of the

    stylesheet Graph before Ironman
 Way better, but still…
  19. None
  20. Christoph Reinartz - @pistenprinz Before Ironman The Pain Points

  21. Christoph Reinartz - @pistenprinz #1 Sprites were out of control

    We built Frankenstein with Icons
  22. None
  23. Christoph Reinartz - @pistenprinz #2 Creepy Render Bugs No, i

    don’t render your site
  24. None
  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
  30. None
  31. None
  32. None
  33. None
  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

  41. https://www.flickr.com/photos/jesper/346483272/

  42. None
  43. None
  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. 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?
  57. Christoph Reinartz - @pistenprinz #1 Be a salesman- Sell it!

    Prove it! Show benefits! Argue!
  58. Christoph Reinartz - @pistenprinz #2 Do it in 3 weeks!

    Meet the deadline
  59. Christoph Reinartz - @pistenprinz #3 Don’t only think technically! Think

    like a business person
  60. Christoph Reinartz - @pistenprinz Ironman - the process How to

    integrate such a project
  61. Christoph Reinartz - @pistenprinz #? How to integrate such a

    project into an existing process? Don’t harm the existing process
  62. Christoph Reinartz - @pistenprinz #? How to handle management expectation?

    How to keep management up to date
  63. Christoph Reinartz - @pistenprinz #? How to plan and estimate?

    #noEstimates
  64. Christoph Reinartz - @pistenprinz Ironman - Agility Possible ways to

    enforce culture
  65. Christoph Reinartz - @pistenprinz #1 People over process The Agile

    Manifesto told ya
  66. 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
  67. Christoph Reinartz - @pistenprinz #3 Make progress transparent & involve

    everybody Update the stakeholders as often as possible
  68. Christoph Reinartz - @pistenprinz #4 Motivate people and let them

    be awesome Hire awesome people and get out of their way
  69. Christoph Reinartz - @pistenprinz Ironman - the numbers People &

    processes
  70. None
  71. Christoph Reinartz - @pistenprinz The People One project team …

    and infinite supporters
  72. Christoph Reinartz - @pistenprinz 9 Front-End Devs 3 Designers 2

    QA Release Engineer Management Back-End Devs Performance Lead UBolt UXBolt Product Owner
  73. 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
  74. Christoph Reinartz - @pistenprinz Ironman - the numbers Code and

    Outcome
  75. Christoph Reinartz - @pistenprinz 889 commits in 3 weeks 16

    commits per hour #YOLO
  76. Christoph Reinartz - @pistenprinz 11973 LOC added That is new

    / changed code
  77. Christoph Reinartz - @pistenprinz 36668 LOC removed Delete all the

    things (CSS,HTML,JS)
  78. Christoph Reinartz - @pistenprinz LOC from 52991 to 39755 Removed

    nearly 25% of the Scss Base
  79. Christoph Reinartz - @pistenprinz Replaced 451 Icons Infinite Icons replaced

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

    with SVG Icons
  81. Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile

    first
  82. None
  83. None
  84. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG

    beauty
  85. None
  86. None
  87. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP Requests

  88. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  89. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  90. Christoph Reinartz - @pistenprinz <3 Sorted the colors Established and

    introduce a color palette
  91. 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
  92. 2016 2015

  93. Christoph Reinartz - @pistenprinz <3 Solved the icon chaos Replaced

    the image sprites with a SVG icon set
  94. 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
  95. Christoph Reinartz - @pistenprinz peaks at the beginning of the

    stylesheet Graph before Ironman
 Way better, but still…
  96. Christoph Reinartz - @pistenprinz New CSS base Adapted old UI

    components. Can now be easily rebuilt! SVG Graph after Ironman
 Improved curve…
  97. Christoph Reinartz - @pistenprinz The metrics
 A/B Test results

  98. Christoph Reinartz - @pistenprinz The final result
 Lets celebrate and

    merge
  99. Christoph Reinartz - @pistenprinz Let’s go crazy


  100. Christoph Reinartz - @pistenprinz Retrospective
 What we have achieved -

    High Level Summary
  101. Christoph Reinartz - @pistenprinz <3 Foundation built to move the

    UI to the next level Sustainable base to continue UI rebuild
  102. Christoph Reinartz - @pistenprinz <3 Better rendering performance on mobile

    No more poor mobile devices
  103. Christoph Reinartz - @pistenprinz <3 Shared knowledge and understanding Affects

    the developers and the entire design/product team
  104. Christoph Reinartz - @pistenprinz <3 Optimized design-development process Atomic Design

    FTW
  105. Christoph Reinartz - @pistenprinz <3 New coding guidelines and improved

    structure ITCSS, BEM, OOCSS, …
  106. Christoph Reinartz - @pistenprinz Moving faster
 The time after

  107. Christoph Reinartz - @pistenprinz Moved to ITCSS
 Prepared base for

    new UI components
  108. Christoph Reinartz - @pistenprinz Faster Product Iterations
 Old version of

    the search result
  109. Christoph Reinartz - @pistenprinz The new item element
 New version

    built with pattern lab upon new base
  110. Christoph Reinartz - @pistenprinz The next challenges
 Auto integrate all

    the things
  111. Christoph Reinartz - @pistenprinz Ready for the next steps
 Automate

    the pattern integration
  112. Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team

    Lead UI/UX Engineering @pistenprinz