Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System Support Beyond React

510e0501c737af4df361f945fc295f63?s=47 Jake Trent
February 02, 2018

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.


Jake Trent

February 02, 2018



  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