project ironman - large scale css refactoring @trivago
TRANSCRIPT
Large Scale CSS Refactoring at trivago
@pistenprinz
Ironman release picture
Crazy Guy
Talking to you right now
Does something with frontend at trivago
Loves giving presentations
U.Bolt
Performance Unicorn
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
Christoph Reinartz - @pistenprinz
Ironman - the tech contextThe 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
Christoph Reinartz - @pistenprinz
Ironman & the pattern library Built without Design Thinking and Atomic Design
Christoph Reinartz - @pistenprinz
Ironman & the pattern library Built with Design Thinking and Atomic Design
Christoph Reinartz - @pistenprinz
Ironman & Atomic Design
Atomic Design in one gif
http://bradfrost.com/blog/post/atomic-design-in-one-gif/
Christoph Reinartz - @pistenprinz
Ironman & the pattern library Behind the scenes - the developer playground
Christoph Reinartz - @pistenprinz
Before Ironman
The pain points
• IE7 support • Layout built on reset.css • Overly complex CSS/DOM structure • Desktop first approach • Inconsistency
Christoph Reinartz - @pistenprinz
Before Ironman
The pain points
Christoph Reinartz - @pistenprinz
Fifty shades of greyOr how to prove inconsistency
Christoph Reinartz - @pistenprinz
Specificity graph 2012
The specificity wall
Christoph Reinartz - @pistenprinz
Graph before ironman
Way better, but still …
peaks at the beginning of the stylesheet
Christoph Reinartz - @pistenprinz
Ironman & IE7
Disqualification
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
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!
Christoph Reinartz - @pistenprinz
Ironman - the challengesThe business
How to tell management that you need 4 weeks of feature freeze and the User Interface will look exactly the same afterwards?
Code / Process AuditsHow to tell management that you need you need 4 weeks of feature freeze and the User Interface will exactly look the same afterwards?
Christoph Reinartz - @pistenprinz
Ironman - the challengesPossible 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!
Christoph Reinartz - @pistenprinz
Ironman - the challengesThe process
• How to integrate such a project into an existing process?
• How to handle management expectation? • How to plan and estimate?
Christoph Reinartz - @pistenprinz
Ironman - the challengesPossible ways to enforce culture
• People over process • Commitment over estimation • Agility • Make progress transparent • Involve everybody • Motivate people and let them be awesome
Christoph Reinartz - @pistenprinz
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
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
Code / Process Audits• 1 Project Team • 7 awesome developers • infinite supporters
Christoph Reinartz - @pistenprinz
Showcase 1Desktop first vs. Mobile first
Christoph Reinartz - @pistenprinz
Showcase 2Sprite Wars vs. SVG beauty
Christoph Reinartz - @pistenprinz
Showcase 3HTTP Requests
Christoph Reinartz - @pistenprinz
Showcase 3HTTP requests
Christoph Reinartz - @pistenprinz
Showcase 3HTTP requests
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
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, …)
Christoph Reinartz - @pistenprinz
Moved to ITCSS
Prepared base for new UI components
Christoph Reinartz - @pistenprinz
Graph before Ironman
Way better, but still …
peaks at the beginning of the stylesheet
Christoph Reinartz - @pistenprinz
Graph after Ironman
Improved curve
New CSS base
Adapted old UI components. Can now be easily rebuilt!
SVG
Christoph Reinartz - @pistenprinz
Ready for the next stepsAutomate the pattern integration
Christoph Reinartz - @pistenprinz
ThanksI’m done
Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz