Project Ironman - Large Scale CSS Refactoring @trivago

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


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


Ironman & the pattern library Built without Design Thinking and Atomic Design


Ironman & the pattern library Built with Design Thinking and Atomic Design


Ironman & Atomic Design

Atomic Design in one gif

http://bradfrost.com/blog/post/atomic-design-in-one-gif/


Ironman & the pattern library Behind the scenes - the developer playground


Before Ironman

The pain points

• IE7 support • Layout built on reset.css • Overly complex CSS/DOM structure • Desktop first approach • Inconsistency


Before Ironman

The pain points


Fifty shades of greyOr how to prove inconsistency


Specificity graph 2012

The specificity wall


Graph before ironman

Way better, but still …

peaks at the beginning of the stylesheet


Ironman & IE7

Disqualification


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


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!


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?


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!


Ironman - the challengesThe process

• How to integrate such a project into an existing process?

• How to handle management expectation? • How to plan and estimate?


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


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


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


Showcase 1Desktop first vs. Mobile first


Showcase 2Sprite Wars vs. SVG beauty


Showcase 3HTTP Requests


Showcase 3HTTP requests


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


Ironman - At a glance

Happy times

• Optimized design-development process through Atomic Design

• Changed coding guidelines and improved structure (ITCSS, BEM, OOCSS, …)


Moved to ITCSS

Prepared base for new UI components


Graph before Ironman

Way better, but still …

peaks at the beginning of the stylesheet


Graph after Ironman

Improved curve

New CSS base

Adapted old UI components. Can now be easily rebuilt!

SVG


Ready for the next stepsAutomate the pattern integration


ThanksI’m done

Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz

Project Ironman - Large Scale CSS Refactoring @trivago

Software

Transcript of Project Ironman - Large Scale CSS Refactoring @trivago