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

Pattern Library meets Symfony

Pattern Library meets Symfony

Rebuilding an aircraft on the fly - A pattern library integration at large scale.

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

April 29, 2016
Tweet

Transcript

  1. Pattern Library meets Symfony @pistenprinz Integration of a Pattern Library

    at Large Scale
  2. Talking to you 
 right now Does something with frontend

    at trivago Loves giving presentations
  3. Christoph Reinartz - @pistenprinz Why a Pattern Library? How we

    managed to create an inconsistent UI
  4. Christoph Reinartz - @pistenprinz .gradient_bright_hover:hover, .gradient_bright_hover:hover *, .gradient_dark_hover:hover, .gradient_dark_hover:hover *

    { color:#fff !important } Show me your CSS
 Based on a true story
  5. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Specificity graph 2012
 The specificity wall
  6. None
  7. Christoph Reinartz - @pistenprinz Where we come from What happened

    since 2012
  8. None
  9. None
  10. None
  11. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Specificity graph 2012
 The specificity wall
  12. Christoph Reinartz - @pistenprinz Graph 2015
 Way better, but still

    … peaks at the beginning of the stylesheet
  13. Christoph Reinartz - @pistenprinz #1 Inconsistency and missing Styleguide Or

    how to create fifty shades of grey or anything else
  14. Code / Process Audits • IE7 support • Layout built

    on reset.css • too complex CSS structure
  15. Christoph Reinartz - @pistenprinz #2 Sprites were out of control

    We built Frankenstein with Icons
  16. None
  17. Christoph Reinartz - @pistenprinz #3 Creepy Render Bugs No, i

    don’t render your site
  18. None
  19. #4 Too much CSS How many Selectors do you use?

    ALL!
  20. Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design

    System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer
 One of our footers
  21. Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design

    System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer
 And yes, another one
  22. Christoph Reinartz - @pistenprinz A Footer
 Does somebody need a

    footer?
  23. Christoph Reinartz - @pistenprinz Code / Process Audits • Establishing

    a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer
 A first try of the unified footer
  24. Christoph Reinartz - @pistenprinz Code / Process Audits • Establishing

    a Frontend / Design System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications A Footer
 Unified version not unified
  25. Christoph Reinartz - @pistenprinz Footer Wars - Episode VI A

    new hope
  26. None
  27. Christoph Reinartz - @pistenprinz Modular Design Systems Explained in three

    slides
  28. Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design

    System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications Atomic Design
 Atomic Design in one gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/
  29. Code / Process Audits Atomic Design
 Atomic Design in one

    gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/ http://bradfrost.com/
  30. –Christian Bauer „Zitat hier eingeben.“ Design Systems
 Not only in

    web
  31. Christoph Reinartz - @pistenprinz What is the Pattern Library? A

    tool to realize Design Systems
  32. Christoph Reinartz - @pistenprinz #1 A Web View The central

    place to view your Design System
  33. Christoph Reinartz - @pistenprinz #2 Rapid Prototyping Tool Enables fast

    prototyping of UI components
  34. Christoph Reinartz - @pistenprinz #3 Static site generator Helps creating

    overview / style guide pages
  35. Christoph Reinartz - @pistenprinz #4 The documented library Annotations, Source-Code

    View & Twig Doc
  36. Christoph Reinartz - @pistenprinz #5 Central UI Pattern Storage All

    the patterns at one place
  37. Christoph Reinartz - @pistenprinz The Pattern Library
 Used tools

  38. Christoph Reinartz - @pistenprinz • Establishing a Frontend / Design

    System on Dev-Side • Reduce technical debt • Consistency in Code (and Design) over all applications The Pattern Library
 Behind the scenes - the web view
  39. Christoph Reinartz - @pistenprinz The Pattern Library
 The dependency graph

  40. Christoph Reinartz - @pistenprinz What is a Pattern
 It depends

  41. Christoph Reinartz - @pistenprinz The Business side The goals

  42. Christoph Reinartz - @pistenprinz #1 Establish design and
 code consistency

    A Design System to strengthen brand experience
  43. Christoph Reinartz - @pistenprinz #2 Improve code quality and maintainability

    Reduce technical debt
  44. Christoph Reinartz - @pistenprinz #3 Provide base for modern &

    sustainable UI rebuild Build modern applications fast
  45. Christoph Reinartz - @pistenprinz Sell it to the people
 The

    Kick-off presentation
  46. Christoph Reinartz - @pistenprinz The Q&A Session
 The question „And

    how do we update the applications? How do we roll-out the code from the pattern library?“
  47. None
  48. Christoph Reinartz - @pistenprinz Integrate the Pattern Library First steps

    integrating
  49. Christoph Reinartz - @pistenprinz The roll-out Vision
 The verbose version

  50. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure The roll-out Vision
 The more self-explanatory version
  51. Christoph Reinartz - @pistenprinz #1 Create packages We love dependencies.

    Do we?
  52. –Christian Bauer „Zitat hier eingeben.“ Create packages
 trivago core patterns

  53. –Christian Bauer

  54. Christoph Reinartz - @pistenprinz IE7 support Layout built on reset.css

    too complex CSS structure Create packages
 packages for UI
  55. Christoph Reinartz - @pistenprinz IE7 support Layout built on reset.css

    too complex CSS structure Create packages
 Composer for packages
  56. None
  57. Christoph Reinartz - @pistenprinz Adapt UI Layer to Symfony
 Customized

    frontend build stack main.css main.js chunk1.css chunk1.js …
  58. Christoph Reinartz - @pistenprinz #2 Ensure code quality Tests, linting,

    metrics and more
  59. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Test Driven Development
 Hahaha
  60. Christoph Reinartz - @pistenprinz Lint all the things
 trivago core

    patterns
  61. Christoph Reinartz - @pistenprinz The outcome Already reaping the fruits

  62. Christoph Reinartz - @pistenprinz #1 Large Scale CSS Refactoring Removed

    the old CSS foundation
  63. None
  64. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Specificity graph 2012
 The specificity wall
  65. Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but

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

    CSS base Adapted old UI components. Can now be easily rebuilt! SVG
  67. Christoph Reinartz - @pistenprinz #2 The company pages Before and

    after
  68. None
  69. None
  70. Christoph Reinartz - @pistenprinz #3 The Search Result Item Before

    and after
  71. None
  72. None
  73. Christoph Reinartz - @pistenprinz #4 Read more We love what

    we do and write about it
  74. None
  75. Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team

    Lead UI/UX Engineering @pistenprinz