Project Ironman - Large Scale CSS Refactoring @trivago

Slide 1

Slide 1 text

Large Scale CSS Refactoring at trivago @pistenprinz

Slide 2

Slide 2 text

Ironman release picture Crazy Guy Talking to you   right now Does something with frontend at trivago Loves giving presentations U.Bolt Performance Unicorn

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Christoph Reinartz - @pistenprinz Ironman & the pattern library  Built without Design Thinking and Atomic Design

Slide 6

Slide 6 text

Christoph Reinartz - @pistenprinz Ironman & the pattern library  Built with Design Thinking and Atomic Design

Slide 7

Slide 7 text

Christoph Reinartz - @pistenprinz Ironman & Atomic Design  Atomic Design in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/

Slide 8

Slide 8 text

Christoph Reinartz - @pistenprinz Ironman & the pattern library  Behind the scenes - the developer playground

Slide 9

Slide 9 text

Christoph Reinartz - @pistenprinz Before Ironman  The pain points • IE7 support • Layout built on reset.css • Overly complex CSS/DOM structure • Desktop ﬁrst approach • Inconsistency

Slide 10

Slide 10 text

Christoph Reinartz - @pistenprinz Before Ironman  The pain points

Slide 11

Slide 11 text

Christoph Reinartz - @pistenprinz Fifty shades of grey  Or how to prove inconsistency

Slide 12

Slide 12 text

Christoph Reinartz - @pistenprinz Speciﬁcity graph 2012  The speciﬁcity wall

Slide 13

Slide 13 text

Christoph Reinartz - @pistenprinz Graph before ironman  Way better, but still … peaks at the beginning of the stylesheet

Slide 14

Slide 14 text

Christoph Reinartz - @pistenprinz Ironman & IE7  Disqualiﬁcation

Slide 15

Slide 15 text

Christoph Reinartz - @pistenprinz Ironman - the scope  The 3 disciplines • Normalize.css incl. border-box switch* • Mobile ﬁrst 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

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

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?

Slide 18

Slide 18 text

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?

Slide 19

Slide 19 text

Christoph Reinartz - @pistenprinz Ironman - the challenges  Possible ways to convince the business side • Argue! • Be a salesman- Sell it! Prove it! Show beneﬁts! • Do it in 3 weeks! • Don’t only think technically!

Slide 20

Slide 20 text

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?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Christoph Reinartz - @pistenprinz

Slide 23

Slide 23 text

Christoph Reinartz - @pistenprinz Ironman in numbers  People and processes • 1 Project Team • 9 awesome developers, 3 lovely designers • Inﬁnite supporters • 3 Meetings • 17 daily stand-ups • 67 Post-Its on Kanban board • 1 Slack-channel

Slide 24

Slide 24 text

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 • Inﬁnite icons replaced with 451 SVGs • 352 ﬁles changed

Slide 25

Slide 25 text

Code / Process Audits • 1 Project Team • 7 awesome developers • inﬁnite supporters

Slide 26

Slide 26 text

Christoph Reinartz - @pistenprinz Showcase 1  Desktop ﬁrst vs. Mobile ﬁrst

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Christoph Reinartz - @pistenprinz Showcase 2  Sprite Wars vs. SVG beauty

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Christoph Reinartz - @pistenprinz Showcase 3  HTTP Requests

Slide 33

Slide 33 text

Christoph Reinartz - @pistenprinz Showcase 3  HTTP requests

Slide 34

Slide 34 text

Christoph Reinartz - @pistenprinz Showcase 3  HTTP requests

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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, …)

Slide 37

Slide 37 text

Christoph Reinartz - @pistenprinz Moved to ITCSS  Prepared base for new UI components

Slide 38

Slide 38 text

Christoph Reinartz - @pistenprinz Graph before Ironman  Way better, but still … peaks at the beginning of the stylesheet

Slide 39

Slide 39 text

Christoph Reinartz - @pistenprinz Graph after Ironman  Improved curve New CSS base Adapted old UI components. Can now be easily rebuilt! SVG

Slide 40

Slide 40 text

Christoph Reinartz - @pistenprinz Ready for the next steps  Automate the pattern integration

Slide 41

Slide 41 text

Christoph Reinartz - @pistenprinz Thanks  I’m done Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz