Pattern Library meets Symfony

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

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