Design System Support Beyond React

Slide 1

Slide 1 text

SUPPO RT BEYO N D REACT D ESIG N SYSTEM

Slide 2

Slide 2 text

P R O J E C T C O N T E X T I M P L H I S T O RY L AT E S T G O I N G S - O N P U R P O S E I S T O S H A R E

Slide 3

Slide 3 text

P R O J E C T C O N T E X T

Slide 4

Slide 4 text

W H AT I S T H E D E S I G N S Y S T E M ? It is the UI building blocks for creating a cohesive design across Pluralsight products.

Slide 5

Slide 5 text

D E S I G N S Y S T E M G O A L S • Cohesive design language • Consistent UX in product UI • Accelerate dev

Slide 6

Slide 6 text

P R E - B A K E D C O M P O N E N T S A M A J O R D E L I V E R A B L E I S :

Slide 7

Slide 7 text

80/20

Slide 8

Slide 8 text

I M P L H I S T O RY

Slide 9

Slide 9 text

S TA R T E D W I T H R E A C T • Most projects use it • Most impactful • What we know • Direct solution

Slide 10

Slide 10 text

R E A C T W H AT I S ? • UI Component lib • Combines visual elements w/ data • Pattern

Slide 11

Slide 11 text

N O N - R E A C T P R O J E C T S • pre-2015 - Angular, legacy • 2015 - New product, React • since then - more React, less Angular • today - mostly React, a couple Angular, outliers

Slide 12

Slide 12 text

P L A N F O R M U LT I P L E T E C H S E A R LY D AY S

Slide 13

Slide 13 text

. !"" CHANGELOG.md !"" css # $"" index.module.css !"" index.js !"" package.json $"" react !"" __specs__ # !"" __snapshots__ # # $"" index.spec.js.snap # $"" index.spec.js $"" index.js . . . $"" angular PA C K A G E S / B U T T O N /

Slide 14

Slide 14 text

S E PA R AT E H T M L & C S S E A R LY D AY S

Slide 15

Slide 15 text

import html from './button.html' const Button = props => html(props) B U T T O N . J S {props.children} B U T T O N . C S S

Slide 16

Slide 16 text

D R O P H T M L = T E S TA B L E • No Webpack in unit test environment

Slide 17

Slide 17 text

const getClassName = props => classNames({ [props.css['ps-button']]: true, [props.css['ps-button--' + props.size]]: props.size, [props.css['ps-button--' + props.appearance]]: props.appearance }) B U T T O N . J S .ps-button { display: inline-block; padding: 8px 16px; border: 0; border-radius: 2px; … B U T T O N . C S S

Slide 18

Slide 18 text

M O V E C S S = B E T T E R D E V X • Lots of iterations • Easy install • Prebuilt files • Inlined CSS-in-JS

Slide 19

Slide 19 text

R E A C T C S S - I N - J S C O M P O N E N T S T O D AY

Slide 20

Slide 20 text

L AT E S T G O I N G S - O N

Slide 21

Slide 21 text

Q 1 2 0 1 8 O K R S “Deliver industry leading content creation, management, and customer delivery platform”

Slide 22

Slide 22 text

C O M M O N F O U N D AT I O N A L C O D E T O S U P P O R T M U LT I P L E U I R U N T I M E S Q 1 E X P E R I M E N T

Slide 23

Slide 23 text

common react angular other…

Slide 24

Slide 24 text

VA N I L L A J S W E B C O M P O N E N T S W H AT ’ S C O M PAT I B L E ?

Slide 25

Slide 25 text

VA N I L L A J S S V E LT E C O M P I L E R A S F R A M E W O R K “ D I S A P P E A R I N G F R A M E W O R K ”

Slide 26

Slide 26 text

G O O D S V E LT E • Simple component API • Is just JS • Can src styles in CSS again

Slide 27

Slide 27 text

B A D S V E LT E • Doesn’t fully disappear • One-components would produce duplicate code • Plain JS likely to never be directly consumed

Slide 28

Slide 28 text

W E B C O M P O N E N T S S T E N C I L B E T T E R D E V X F O R W E B C O M P O N E N T S C O M P I L E S T O - S P E C W E B C O M P O N E N T S

Slide 29

Slide 29 text

G O O D S T E N C I L • Web Components is the closest thing to an interop standard we have

Slide 30

Slide 30 text

B A D S T E N C I L • Nice package, but presumes a lot • Polyfills still required • Framework wrappers likely non- trivial for React • Script tag-oriented; CDN culture push • Web Components state unclear

Slide 31

Slide 31 text

G O O D S TAY R E A C T • No table flips; people know what to expect • Focus on product expansion, not platform support • Leverage current expertise

Slide 32

Slide 32 text

B A D S TAY R E A C T • Not supporting every team

Slide 33

Slide 33 text

R E A C T U S A G E • 24 teams • 2 Angular • 8 n/a - no ui, legacy, non- styleguide, yet-to-decide • 14 React - 87% of current web UIs

Slide 34

Slide 34 text

A B S T R A C T I O N C O S T • No abstraction is free • Some drastic • Component dev more challenging • Finding contributors more challenging

Slide 35

Slide 35 text

P R O J E C T L I F E C Y C L E • Getting v1 to live • Might not be ready for platform expansion yet • Bandwidth-constrained • Focused R&D halts component dev

Slide 36

Slide 36 text

W H AT E L S E C A N W E D O T O H E L P ? P L A N N I N G W I T H C O N T E N T T O O L S • Design consolidation • Stylesheet publishing

Slide 37

Slide 37 text

D E S I G N C O N S O L I D AT I O N • 80/20 - UI from styleguide • Universal language • Core - spacing, type, color, motion • No duplication of design authority

Slide 38

Slide 38 text

Q 4 2 0 1 7 D E S I G N S Y S T E M S U R V E Y “We spend less time worrying about what things need to look like.” “Consistent language between Sketch files and code”

Slide 39

Slide 39 text

P U B L I S H S T Y L E S H E E T S • Extract CSS, still in JS • Generate .css on publish

Slide 40

Slide 40 text

export default { ['.psds-button']: { display: 'inline-flex', justifyContent: 'center', alignItems: ‘stretch', ... [`.psds-button--appearance-${vars.appearances.stroke}`]: { border: `1px solid ${core.colors.orange}`, color: core.colors.orange, ... B U T T O N . C S S

Slide 41

Slide 41 text

import * as glamor from ‘glamor’ import css from ‘./button.css’ const buttonStyles = ({ appearance }) => glamor.css({ ...css[`.psds-button`], ...css[`.psds-button—appearance-${appearance}`] }) B U T T O N . J S

Slide 42

Slide 42 text

const { fs, css } = require('@pluralsight/ps-design-system-build') const js = require('../dist/css/index').default fs.writeFile(cssOutputPath, css.jsToCss(js)) B U I L D / C S S . J S

Slide 43

Slide 43 text

dist !"" css # !"" index.css # !"" index.js # $"" index.scss !"" react # $"" index.js $"" vars $"" index.js D I S T /

Slide 44

Slide 44 text

.psds-button { display: inline-flex; justify-content: center; align-items: stretch; ... .psds-button--appearance-stroke { border: 1px solid #f96816; color: #f96816; ... D I S T / C S S / I N D E X . C S S

Slide 45

Slide 45 text

npm install @pluralsight/ps-design-system-button M Y- A P P / @import “@pluralsight/ps-design-system-button/dist/css/index.css”; M Y- A P P / B U T T O N . C S S ... M Y- A P P / B U T T O N . J S / H T M L

Slide 46

Slide 46 text

C S S - I N - J S S T Y L E S H E E T • Local map to key into • Less expressive conditionals • Sometimes harder to read the logic/rules • BEM - most common naming convention in the company for css

Slide 47

Slide 47 text

S N A P S H O T S I N R E FA C T O R I N G • Snapshot tests very valuable • Lots based on prop permutations • Generated by storybook — Storyshots

Slide 48

Slide 48 text

C O N T E N T T O O L S I S U S I N G R E A C T L AT E S T D E V E L O P M E N T

Slide 49

Slide 49 text

G E T I N V O LV E D • #design-system-dev - Project dev discussion • #design-system-help - I need help or can help others • #design-system-news - Update feed on new stuff • #design-system-css (temp) - current css experiment • design-system.pluralsight.com - docs, ref, roadmap