Project Ironman - Large Scale CSS Refactoring @trivago

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.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

January 12, 2016
Tweet

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. 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
  5. Christoph Reinartz - @pistenprinz Ironman & the pattern library
 Built

    without Design Thinking and Atomic Design
  6. Christoph Reinartz - @pistenprinz Ironman & the pattern library
 Built

    with Design Thinking and Atomic Design
  7. Christoph Reinartz - @pistenprinz Ironman & Atomic Design
 Atomic Design

    in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/
  8. Christoph Reinartz - @pistenprinz Ironman & the pattern library
 Behind

    the scenes - the developer playground
  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
  10. Christoph Reinartz - @pistenprinz Before Ironman
 The pain points

  11. Christoph Reinartz - @pistenprinz Fifty shades of grey
 Or how

    to prove inconsistency
  12. Christoph Reinartz - @pistenprinz Specificity graph 2012
 The specificity wall

  13. Christoph Reinartz - @pistenprinz Graph before ironman
 Way better, but

    still … peaks at the beginning of the stylesheet
  14. Christoph Reinartz - @pistenprinz Ironman & IE7
 Disqualification

  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
  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!
  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?
  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?
  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!
  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?
  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
  22. Christoph Reinartz - @pistenprinz

  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
  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
  25. Code / Process Audits • 1 Project Team • 7

    awesome developers • infinite supporters
  26. Christoph Reinartz - @pistenprinz Showcase 1
 Desktop first vs. Mobile

    first
  27. None
  28. None
  29. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG

    beauty
  30. None
  31. None
  32. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP Requests

  33. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  34. Christoph Reinartz - @pistenprinz Showcase 3
 HTTP requests

  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
  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, …)
  37. Christoph Reinartz - @pistenprinz Moved to ITCSS
 Prepared base for

    new UI components
  38. Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but

    still … peaks at the beginning of the stylesheet
  39. Christoph Reinartz - @pistenprinz Graph after Ironman
 Improved curve New

    CSS base Adapted old UI components. Can now be easily rebuilt! SVG
  40. Christoph Reinartz - @pistenprinz Ready for the next steps
 Automate

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

    Lead UI/UX Engineering @pistenprinz