Project Ironman - Large Scale CSS Refactoring @trivago
•
7 likes•3,474 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Similar to Project Ironman - Large Scale CSS Refactoring @trivago
Similar to Project Ironman - Large Scale CSS Refactoring @trivago (20)
Recently uploaded
Recently uploaded (20)
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