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