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.

Transcript

1. b
   b
   Large Scale CSS Refactoring at trivago
   Amsterdam 12 May 2016
   Christoph Reinartz ~ @pistenprinz
   

   View Slide

2. since 2012
   twitter/medium
   @pistenprinz
   www.creinartz.de
   

   View Slide

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
   

   View Slide

4. Christoph Reinartz - @pistenprinz
   Ironman - Tech Context

   The Big Picture
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Christoph Reinartz - @pistenprinz
   The former Case Study

   A Pattern Library and Atomic Design
   

   View Slide

9. Christoph Reinartz - @pistenprinz
   The old company pages

   Built without Design Thinking and Atomic Design
   

   View Slide

10. Christoph Reinartz - @pistenprinz
    The relaunched site

    Built with Design Thinking and Atomic Design
    

    View Slide

11. Christoph Reinartz - @pistenprinz
    The first Redesigns

    Company Pages and Quality Test Intro Page
    

    View Slide

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

    View Slide

13. Christoph Reinartz - @pistenprinz
    Specificity graph 2012

    The specificity wall
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

19. View Slide

20. Christoph Reinartz - @pistenprinz
    Before Ironman
    The Pain Points
    

    View Slide

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

    View Slide

22. View Slide

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

    View Slide

24. View Slide

25. Christoph Reinartz - @pistenprinz
    #3
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

26. Christoph Reinartz - @pistenprinz
    #3
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

27. Christoph Reinartz - @pistenprinz
    #3
    Too much CSS
    How many Selectors do you use? ALL!
    

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

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

    View Slide

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

    View Slide

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]
    

    View Slide

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

    View Slide

38. Christoph Reinartz - @pistenprinz
    Mobile first switch
    Rewrite all media queries
    

    View Slide

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

    View Slide

40. Christoph Reinartz - @pistenprinz
    Ironman - YOLO?!
    Requirement Engineering
    

    View Slide

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

    View Slide

42. View Slide

43. View Slide

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

    View Slide

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
    

    View Slide

46. Christoph Reinartz - @pistenprinz
    Stop at components layer

    Fix the things at the root first
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

70. View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

81. Christoph Reinartz - @pistenprinz
    Showcase 1

    Desktop first vs. Mobile first
    

    View Slide

82. View Slide

83. View Slide

84. Christoph Reinartz - @pistenprinz
    Showcase 2

    Sprite Wars vs. SVG beauty
    

    View Slide

85. View Slide

86. View Slide

87. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP Requests
    

    View Slide

88. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

89. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

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

    View Slide

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
    

    View Slide

92. View Slide

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

    View Slide

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
    

    View Slide

95. Christoph Reinartz - @pistenprinz
    peaks at the beginning
    of the stylesheet
    Graph before Ironman

    Way better, but still…
    

    View Slide

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

    Improved curve…
    

    View Slide

97. Christoph Reinartz - @pistenprinz
    The metrics

    A/B Test results
    

    View Slide

98. Christoph Reinartz - @pistenprinz
    The final result

    Lets celebrate and merge
    

    View Slide

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

    

    View Slide

100. Christoph Reinartz - @pistenprinz
     Retrospective

     What we have achieved - High Level Summary
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

106. Christoph Reinartz - @pistenprinz
     Moving faster

     The time after
     

     View Slide

107. Christoph Reinartz - @pistenprinz
     Moved to ITCSS

     Prepared base for new UI components
     

     View Slide

108. Christoph Reinartz - @pistenprinz
     Faster Product Iterations

     Old version of the search result
     

     View Slide

109. Christoph Reinartz - @pistenprinz
     The new item element

     New version built with pattern lab upon new base
     

     View Slide

110. Christoph Reinartz - @pistenprinz
     The next challenges

     Auto integrate all the things
     

     View Slide

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

     Automate the pattern integration
     

     View Slide

112. Christoph Reinartz - @pistenprinz
     Thanks

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

     View Slide