Design System Support Beyond React

Since the inception of our design system, React has been a core technology. Being in a polyglot tech organization however, React wasn't always a given. We never thought that the design system would be able to serve all teams equally. But we wondered if we might do more to support the non-React teams and products. This is a recounting of that journey.

Transcript

1. SUPPO RT BEYO N D REACT D ESIG N SYSTEM
2. 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
3. P R O J E C T C O N T E X T
4. 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.
5. 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
6. 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 :
7. 80/20
8. I M P L H I S T O RY
9. 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
10. R E A C T W H AT I S ? • UI Component lib • Combines visual elements w/ data • Pattern
11. 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
12. 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
13. . !"" 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 /
14. S E PA R AT E H T M L & C S S E A R LY D AY S
15. import html from './button.html' const Button = props => html(props) B U T T O N . J S <button class="root">{props.children}</button> B U T T O N . C S S
16. D R O P H T M L = T E S TA B L E • No Webpack in unit test environment
17. 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
18. 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
19. 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
20. L AT E S T G O I N G S - O N
21. Q 1 2 0 1 8 O K R S “Deliver industry leading content creation, management, and customer delivery platform”
22. 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
23. common react angular other…
24. 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 ?
25. 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 ”
26. G O O D S V E LT E • Simple component API • Is just JS • Can src styles in CSS again
27. 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
28. 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
29. G O O D S T E N C I L • Web Components is the closest thing to an interop standard we have
30. 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
31. 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
32. B A D S TAY R E A C T • Not supporting every team
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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”
39. 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
40. 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
41. 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
42. 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
43. dist !"" css # !"" index.css # !"" index.js # $"" index.scss !"" react # $"" index.js $"" vars $"" index.js D I S T /
44. .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
45. 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 <button class=“psds-button psds-button--appearance-${appearance}”> ... M Y- A P P / B U T T O N . J S / H T M L
46. 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
47. 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
48. 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
49. 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