Tweet
Tweet

Slide 1

Slide 1 text

Pattern Library meets Symfony @pistenprinz Integration of a Pattern Library at Large Scale

Slide 2

Slide 2 text

Talking to you 
 right now Does something with frontend at trivago Loves giving presentations

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Christoph Reinartz - @pistenprinz Graph 2015
 Way better, but still … peaks at the beginning of the stylesheet

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Christoph Reinartz - @pistenprinz A Footer
 Does somebody need a footer?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

–Christian Bauer „Zitat hier eingeben.“ Design Systems
 Not only in web

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Christoph Reinartz - @pistenprinz The Pattern Library
 Used tools

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Christoph Reinartz - @pistenprinz The Pattern Library
 The dependency graph

Slide 40

Slide 40 text

Christoph Reinartz - @pistenprinz What is a Pattern
 It depends

Slide 41

Slide 41 text

Christoph Reinartz - @pistenprinz The Business side The goals

Slide 42

Slide 42 text

Christoph Reinartz - @pistenprinz #1 Establish design and
 code consistency A Design System to strengthen brand experience

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Christoph Reinartz - @pistenprinz Sell it to the people
 The Kick-off presentation

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Christoph Reinartz - @pistenprinz The roll-out Vision
 The verbose version

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

–Christian Bauer „Zitat hier eingeben.“ Create packages
 trivago core patterns

Slide 53

Slide 53 text

–Christian Bauer

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Christoph Reinartz - @pistenprinz Adapt UI Layer to Symfony
 Customized frontend build stack main.css main.js chunk1.css chunk1.js …

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Christoph Reinartz - @pistenprinz Lint all the things
 trivago core patterns

Slide 61

Slide 61 text

Christoph Reinartz - @pistenprinz The outcome Already reaping the fruits

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Christoph Reinartz - @pistenprinz Graph before Ironman
 Way better, but still … peaks at the beginning of the stylesheet

Slide 66

Slide 66 text

Christoph Reinartz - @pistenprinz Graph after Ironman
 Improved curve New CSS base Adapted old UI components. Can now be easily rebuilt! SVG

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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