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
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
29. Christoph Reinartz - @pistenprinz Showcase 2
 Sprite Wars vs. SVG beauty
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