We need to talk about our frontend workflow

A presentation at ReactFest Lodon in March 2018 in London, UK by Siddharth Kshetrapal

Slide 1

Slide 1

OUR

FRONTEND

WORKFLOW

Slide 2

Slide 2

siddharth kp

Slide 3

Slide 3

@siddharthkp

Slide 4

Slide 4

youtube.com/siddharthkpshow

Slide 5

Slide 5

Slide 6

Slide 6

❤

Slide 7

Slide 7

OUR

FRONTEND

WORKFLOW IS BROKEN

Slide 8

Slide 8

IS BROKEN

Slide 9

Slide 9

QUALITY

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

CONSISTENCY

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

COMMUNICATION

Slide 17

Slide 17

HAND OFF

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

HAND OFF

Slide 22

Slide 22

SOLUTION?

Slide 23

Slide 23

2011

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

LEAKY ABSTRACTION

Slide 30

Slide 30

COMPONENT IS THE RIGHT ABSTRACTION

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

design systems

Slide 35

Slide 35

Slide 36

Slide 36

Karri Saarinen 
 Design Language System Lead @Airbnb

Set of shared and integrated principles and patterns that define the overall design of a product

Slide 37

Slide 37

@NateBaldwinArt

Slide 38

Slide 38

Te c h n i c a l
stuff

Slide 39

Slide 39

TOKENS

Slide 40

Slide 40

SPACING

Slide 41

Slide 41

BASE 
 COLORS

Slide 42

Slide 42

BRAND 
 GUIDELINES

Slide 43

Slide 43

TOKENS

Slide 44

Slide 44

COMPONENT LIBRARY

Slide 45

Slide 45

Slide 46

Slide 46

API

Slide 47

Slide 47

compound components

Slide 48

Slide 48

API

Slide 49

Slide 49

API

Slide 50

Slide 50

API

Slide 51

Slide 51

API

Slide 52

Slide 52

DOCUMENTATION IS THE
PRODUCT

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

DESIGN DECISIONS BAKED IN SYSTEM 


Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

SYNCED DESIGN ASSETS

Slide 60

Slide 60

airbnb/react-sketchapp brainly/html-sketchapp

Slide 61

Slide 61

Component Symbol prop override

Slide 62

Slide 62

PRO TIPS

Slide 63

Slide 63

#1 Consistency over Flexibility 
 #2 Build abstractions but ship all the building blocks 
 #3 Adoption is the only metric that matters.

Slide 64

Slide 64

Slide 65

Slide 65

HOW DO YOU CONVINCE YO U R C O M PA N Y ?

Slide 66

Slide 66

PEOPLE RUIN EVERYTHING

Slide 67

Slide 67

#1 Show people what’s wrong 
 #2 Speak their language #3 Build support from developers

Slide 68

Slide 68

siddharthkp github.com/auth0/cosmos