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
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
7. Christoph Reinartz - @pistenprinz Where we come from What happened since 2012
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
17. Christoph Reinartz - @pistenprinz #3 Creepy Render Bugs No, i don’t render your site
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
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?“
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
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
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
70. Christoph Reinartz - @pistenprinz #3 The Search Result Item Before and after
73. Christoph Reinartz - @pistenprinz #4 Read more We love what we do and write about it
75. Christoph Reinartz - @pistenprinz Thanks
 I’m done Christoph Reinartz Team Lead UI/UX Engineering @pistenprinz