Project Ironman - Large Scale CSS Refactoring @trivago

Project Ironman was the technical migration of the trivago hotel search's existing CSS core to a pattern library based user interface.
The talk was presented at OpenTechSchool Meetup Dortmund and gives insights and background about the project scope, its implementation and the business value.

Transcript

1. Large Scale CSS Refactoring at trivago
   @pistenprinz
   

   View Slide

2. Ironman release picture
   Crazy Guy
   Talking to you 

   right now
   Does something
   with frontend at
   trivago
   Loves giving
   presentations
   U.Bolt
   Performance
   Unicorn
   

   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 - the tech context

   The big picture
   • Establishing a Frontend / Design System
   • Reduce technical debt
   • Consistency in Code (and Design) over all
   applications
   • Provide base for modern & sustainable UI rebuild
   

   View Slide

5. Christoph Reinartz - @pistenprinz
   Ironman & the pattern library

   Built without Design Thinking and Atomic Design
   

   View Slide

6. Christoph Reinartz - @pistenprinz
   Ironman & the pattern library

   Built with Design Thinking and Atomic Design
   

   View Slide

7. Christoph Reinartz - @pistenprinz
   Ironman & Atomic Design

   Atomic Design in one gif
   http://bradfrost.com/blog/post/atomic-design-in-one-gif/
   

   View Slide

8. Christoph Reinartz - @pistenprinz
   Ironman & the pattern library

   Behind the scenes - the developer playground
   

   View Slide

9. Christoph Reinartz - @pistenprinz
   Before Ironman

   The pain points
   • IE7 support
   • Layout built on reset.css
   • Overly complex CSS/DOM structure
   • Desktop first approach
   • Inconsistency
   

   View Slide

10. Christoph Reinartz - @pistenprinz
    Before Ironman

    The pain points
    

    View Slide

11. Christoph Reinartz - @pistenprinz
    Fifty shades of grey

    Or how to prove inconsistency
    

    View Slide

12. Christoph Reinartz - @pistenprinz
    Specificity graph 2012

    The specificity wall
    

    View Slide

13. Christoph Reinartz - @pistenprinz
    Graph before ironman

    Way better, but still …
    peaks at the beginning
    of the stylesheet
    

    View Slide

14. Christoph Reinartz - @pistenprinz
    Ironman & IE7

    Disqualification
    

    View Slide

15. Christoph Reinartz - @pistenprinz
    Ironman - the scope

    The 3 disciplines
    • Normalize.css incl. border-box switch*
    • Mobile first switch*
    • SVG icons instead of image sprites*
    *) integrate the new CSS framework base which was developed with the
    Pattern Library but retain the existing layout and design
    

    View Slide

16. Christoph Reinartz - @pistenprinz
    Ironman - the scope

    In detail
    • Refactor > 50000 lines of Code of SCSS
    • Adapt dozens of templates
    • Keep IE8 support
    • Remove 1200 Icons
    • Extensive (Device-)Testing
    • In 4 weeks!
    

    View Slide

17. Christoph Reinartz - @pistenprinz
    Ironman - the challenges

    The business
    How to tell management that you need 4 weeks of
    feature freeze and the User Interface will look exactly
    the same afterwards?
    

    View Slide

18. 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

19. Christoph Reinartz - @pistenprinz
    Ironman - the challenges

    Possible ways to convince the business side
    • Argue!
    • Be a salesman- Sell it! Prove it! Show benefits!
    • Do it in 3 weeks!
    • Don’t only think technically!
    

    View Slide

20. Christoph Reinartz - @pistenprinz
    Ironman - the challenges

    The process
    • How to integrate such a project into an existing
    process?
    • How to handle management expectation?
    • How to plan and estimate?
    

    View Slide

21. Christoph Reinartz - @pistenprinz
    Ironman - the challenges

    Possible ways to enforce culture
    • People over process
    • Commitment over estimation
    • Agility
    • Make progress transparent
    • Involve everybody
    • Motivate people and let them be awesome
    

    View Slide

22. Christoph Reinartz - @pistenprinz
    

    View Slide

23. Christoph Reinartz - @pistenprinz
    Ironman in numbers

    People and processes
    • 1 Project Team
    • 9 awesome developers, 3 lovely designers
    • Infinite supporters
    • 3 Meetings
    • 17 daily stand-ups
    • 67 Post-Its on Kanban board
    • 1 Slack-channel
    

    View Slide

24. Christoph Reinartz - @pistenprinz
    Ironman in numbers

    Code and Outcome
    • ~800 Commits in 3 weeks
    • 11973 LOC added
    • 36668 LOC removed
    • Reduced SCSS LOC from 52991 to 39755
    • Infinite icons replaced with 451 SVGs
    • 352 files changed
    

    View Slide

25. Code / Process Audits
    • 1 Project Team
    • 7 awesome developers
    • infinite supporters
    

    View Slide

26. Christoph Reinartz - @pistenprinz
    Showcase 1

    Desktop first vs. Mobile first
    

    View Slide

27. View Slide

28. View Slide

29. Christoph Reinartz - @pistenprinz
    Showcase 2

    Sprite Wars vs. SVG beauty
    

    View Slide

30. View Slide

31. View Slide

32. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP Requests
    

    View Slide

33. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

34. Christoph Reinartz - @pistenprinz
    Showcase 3

    HTTP requests
    

    View Slide

35. Christoph Reinartz - @pistenprinz
    Ironman - At a glance

    Happy times
    • 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
    

    View Slide

36. Christoph Reinartz - @pistenprinz
    Ironman - At a glance

    Happy times
    • Optimized design-development process through
    Atomic Design
    • Changed coding guidelines and improved
    structure (ITCSS, BEM, OOCSS, …)
    

    View Slide

37. Christoph Reinartz - @pistenprinz
    Moved to ITCSS

    Prepared base for new UI components
    

    View Slide

38. Christoph Reinartz - @pistenprinz
    Graph before Ironman

    Way better, but still …
    peaks at the beginning
    of the stylesheet
    

    View Slide

39. Christoph Reinartz - @pistenprinz
    Graph after Ironman

    Improved curve
    New CSS
    base
    Adapted old UI components.
    Can now be easily rebuilt!
    SVG
    

    View Slide

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

    Automate the pattern integration
    

    View Slide

41. Christoph Reinartz - @pistenprinz
    Thanks

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

    View Slide