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.

Christoph Reinartz

April 29, 2016
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Talking to you 
 right now Does something with frontend

    at trivago Loves giving presentations
  2. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Specificity graph 2012
 The specificity wall
  3. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

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

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

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

    on reset.css • too complex CSS structure
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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/
  12. Code / Process Audits Atomic Design
 Atomic Design in one

    gif http://bradfrost.com/blog/post/atomic-design-in-one-gif/ http://bradfrost.com/
  13. 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
  14. Christoph Reinartz - @pistenprinz #3 Provide base for modern &

    sustainable UI rebuild Build modern applications fast
  15. 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?“
  16. 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
  17. Christoph Reinartz - @pistenprinz IE7 support Layout built on reset.css

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

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

    frontend build stack main.css main.js chunk1.css chunk1.js …
  20. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

    support • Layout built on reset.css • too complex CSS structure Test Driven Development
 Hahaha
  21. Christoph Reinartz - @pistenprinz Code / Process Audits • IE7

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

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

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