Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Project Ironman - Large Scale CSS Refactoring @...

Project Ironman - Large Scale CSS Refactoring @trivago

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.

Christoph Reinartz

January 12, 2016
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Ironman release picture Crazy Guy Talking to you 
 right

    now Does something with frontend at trivago Loves giving presentations U.Bolt Performance Unicorn
  2. 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
  3. 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
  4. Christoph Reinartz - @pistenprinz Ironman & Atomic Design
 Atomic Design

    in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/
  5. Christoph Reinartz - @pistenprinz Before Ironman
 The pain points •

    IE7 support • Layout built on reset.css • Overly complex CSS/DOM structure • Desktop first approach • Inconsistency
  6. Christoph Reinartz - @pistenprinz Graph before ironman
 Way better, but

    still … peaks at the beginning of the stylesheet
  7. 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
  8. 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!
  9. 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?
  10. 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?
  11. 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!
  12. 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?
  13. 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
  14. 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
  15. 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
  16. Code / Process Audits • 1 Project Team • 7

    awesome developers • infinite supporters
  17. 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
  18. 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, …)
  19. Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but

    still … peaks at the beginning of the stylesheet
  20. Christoph Reinartz - @pistenprinz Graph after Ironman
 Improved curve New

    CSS base Adapted old UI components. Can now be easily rebuilt! SVG