Advanced Design Systems Considerations

A presentation at JSConf Hawaii in February 2020 in Honolulu, HI, USA by Alex Sexton

Slide 1

Slide 1

Advanced Design Systems Considerations JSConf Hawaii 2020 (cc) image by anjan58 - https://flic.kr/p/4rQd7T

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

(cc) image by freestocks.org - https://flic.kr/p/JxqjjP

Slide 10

Slide 10

systems of systems

Slide 11

Slide 11

photo by invisionapp Prior art

Slide 12

Slide 12

design system by Meng To for designcode.io

Slide 13

Slide 13

Blend in

Slide 14

Slide 14

thank you for not thanking

Slide 15

Slide 15

Slide 16

Slide 16

values

Slide 17

Slide 17

Slide 18

Slide 18

more components does not guarantee more efficiency

Slide 19

Slide 19

fight for atomic components

Slide 20

Slide 20

avoid manifest destiny

Slide 21

Slide 21

avoid manifest destiny

Slide 22

Slide 22

Slide 23

Slide 23

solve people problems in meatspace

Slide 24

Slide 24

values over everything

Slide 25

Slide 25

design systems are for quality in the face of deadlines

Slide 26

Slide 26

Slide 27

Slide 27

only relevant for inside of a button

Slide 28

Slide 28

this is a button icon this is a regular icon

Slide 29

Slide 29

Button injects its own Icon

Slide 30

Slide 30

wrong size icon for inside a button

Slide 31

Slide 31

Special icon type for inside buttons…

Slide 32

Slide 32

Pass it in as a prop so we can modify it

Slide 33

Slide 33

Disallow children to avoid jamming an icon in there

Slide 34

Slide 34

nice looking & intuitive, just need to fix the size…

Slide 35

Slide 35

Icon knows about Button -vsButton knows about Icon

Slide 36

Slide 36

Inside of Icon, we render ourselves differently if we can tell that we’re in a button

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

create relationships without encoding strict dependencies

Slide 42

Slide 42

kinda like a foreign key

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

overrides iconSizeToken for its children to 12px

reads the value as 12px for this context

Slide 48

Slide 48

decentralization

Slide 49

Slide 49

Slide 50

Slide 50

Configuration is centralized by default and that isn’t super great

Slide 51

Slide 51

inversion of control as a means for configuration

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

only do internationalization once

Slide 55

Slide 55

Slide 56

Slide 56

good composition allows for good internationalization

Slide 57

Slide 57

borrowing good ideas from apple

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

the modifiers run in order before the View ever renders anything

Slide 61

Slide 61

the result of each modifier being turned on the component with all modifiers turned on

Slide 62

Slide 62

a react component that knows how to take the output from the modifiers runs first, has nothing to do with react

Slide 63

Slide 63

render anywhere that you can implement View

Slide 64

Slide 64

your design system should last longer than react is “cool”

Slide 65

Slide 65

what does success look like?

Slide 66

Slide 66

every arbitrary subset of your design system should be “complete”

Slide 67

Slide 67

decentralization & inversion of control

Slide 68

Slide 68

values outlast implementations

Slide 69

Slide 69

design systems are about values

Slide 70

Slide 70

Mahalo! send complaints to @slexaxton (cc) image by anjan58 - https://flic.kr/p/4rQd7T