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. Pattern Library meets Symfony
    @pistenprinz
    Integration of a Pattern Library at Large Scale

    View Slide

  2. Talking to you 

    right now
    Does something
    with frontend at trivago
    Loves giving
    presentations

    View Slide

  3. Christoph Reinartz - @pistenprinz
    Why a Pattern Library?
    How we managed to create an
    inconsistent UI

    View Slide

  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

    View Slide

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

    The specificity wall

    View Slide

  6. View Slide

  7. Christoph Reinartz - @pistenprinz
    Where we come from
    What happened since 2012

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

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

    The specificity wall

    View Slide

  12. Christoph Reinartz - @pistenprinz
    Graph 2015

    Way better, but still …
    peaks at the beginning
    of the stylesheet

    View Slide

  13. Christoph Reinartz - @pistenprinz
    #1
    Inconsistency and missing
    Styleguide
    Or how to create fifty shades of grey or anything else

    View Slide

  14. Code / Process Audits
    • IE7 support
    • Layout built on reset.css
    • too complex CSS structure

    View Slide

  15. Christoph Reinartz - @pistenprinz
    #2
    Sprites were out of control
    We built Frankenstein with Icons

    View Slide

  16. View Slide

  17. Christoph Reinartz - @pistenprinz
    #3
    Creepy Render Bugs
    No, i don’t render your site

    View Slide

  18. View Slide

  19. #4
    Too much CSS
    How many Selectors do you use? ALL!

    View Slide

  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

    View Slide

  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

    View Slide

  22. Christoph Reinartz - @pistenprinz
    A Footer

    Does somebody need a footer?

    View Slide

  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

    View Slide

  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

    View Slide

  25. Christoph Reinartz - @pistenprinz
    Footer Wars - Episode VI
    A new hope

    View Slide

  26. View Slide

  27. Christoph Reinartz - @pistenprinz
    Modular Design Systems
    Explained in three slides

    View Slide

  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/

    View Slide

  29. Code / Process Audits
    Atomic Design

    Atomic Design in one gif
    http://bradfrost.com/blog/post/atomic-design-in-one-gif/
    http://bradfrost.com/

    View Slide

  30. –Christian Bauer
    „Zitat hier eingeben.“
    Design Systems

    Not only in web

    View Slide

  31. Christoph Reinartz - @pistenprinz
    What is the Pattern Library?
    A tool to realize Design Systems

    View Slide

  32. Christoph Reinartz - @pistenprinz
    #1
    A Web View
    The central place to view your Design System

    View Slide

  33. Christoph Reinartz - @pistenprinz
    #2
    Rapid Prototyping Tool
    Enables fast prototyping of UI components

    View Slide

  34. Christoph Reinartz - @pistenprinz
    #3
    Static site generator
    Helps creating overview / style guide pages

    View Slide

  35. Christoph Reinartz - @pistenprinz
    #4
    The documented library
    Annotations, Source-Code View & Twig Doc

    View Slide

  36. Christoph Reinartz - @pistenprinz
    #5
    Central UI Pattern Storage
    All the patterns at one place

    View Slide

  37. Christoph Reinartz - @pistenprinz
    The Pattern Library

    Used tools

    View Slide

  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

    View Slide

  39. Christoph Reinartz - @pistenprinz
    The Pattern Library

    The dependency graph

    View Slide

  40. Christoph Reinartz - @pistenprinz
    What is a Pattern

    It depends

    View Slide

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

    View Slide

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

    code consistency
    A Design System to strengthen brand experience

    View Slide

  43. Christoph Reinartz - @pistenprinz
    #2
    Improve code quality and
    maintainability
    Reduce technical debt

    View Slide

  44. Christoph Reinartz - @pistenprinz
    #3
    Provide base for modern &
    sustainable UI rebuild
    Build modern applications fast

    View Slide

  45. Christoph Reinartz - @pistenprinz
    Sell it to the people

    The Kick-off presentation

    View Slide

  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?“

    View Slide

  47. View Slide

  48. Christoph Reinartz - @pistenprinz
    Integrate the Pattern Library
    First steps integrating

    View Slide

  49. Christoph Reinartz - @pistenprinz
    The roll-out Vision

    The verbose version

    View Slide

  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

    View Slide

  51. Christoph Reinartz - @pistenprinz
    #1
    Create packages
    We love dependencies. Do we?

    View Slide

  52. –Christian Bauer
    „Zitat hier eingeben.“
    Create packages

    trivago core patterns

    View Slide

  53. –Christian Bauer

    View Slide

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

    packages for UI

    View Slide

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

    Composer for packages

    View Slide

  56. View Slide

  57. Christoph Reinartz - @pistenprinz
    Adapt UI Layer to Symfony

    Customized frontend build stack
    main.css
    main.js
    chunk1.css
    chunk1.js

    View Slide

  58. Christoph Reinartz - @pistenprinz
    #2
    Ensure code quality
    Tests, linting, metrics and more

    View Slide

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

    Hahaha

    View Slide

  60. Christoph Reinartz - @pistenprinz
    Lint all the things

    trivago core patterns

    View Slide

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

    View Slide

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

    View Slide

  63. View Slide

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

    The specificity wall

    View Slide

  65. Christoph Reinartz - @pistenprinz
    Graph before Ironman

    Way better, but still …
    peaks at the beginning
    of the stylesheet

    View Slide

  66. Christoph Reinartz - @pistenprinz
    Graph after Ironman

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

    View Slide

  67. Christoph Reinartz - @pistenprinz
    #2
    The company pages
    Before and after

    View Slide

  68. View Slide

  69. View Slide

  70. Christoph Reinartz - @pistenprinz
    #3
    The Search Result Item
    Before and after

    View Slide

  71. View Slide

  72. View Slide

  73. Christoph Reinartz - @pistenprinz
    #4
    Read more
    We love what we do and write about it

    View Slide

  74. View Slide

  75. Christoph Reinartz - @pistenprinz
    Thanks

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

    View Slide