Project Ironman - Large Scale CSS Refactoring @trivago
7 likes3,486 views
The document details the 'Ironman' project at Trivago, focusing on a large-scale CSS refactoring to implement a pattern library-based user interface aimed at reducing technical debt and improving consistency. Key initiatives included a switch to mobile-first design, the removal of outdated CSS, and the integration of SVG icons, all completed in a tightly managed four-week timeline. The project resulted in significant code reduction and enhanced rendering performance, setting a foundation for future UI development improvements.
Project Ironman - Large Scale CSS Refactoring @trivago
- 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