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

Design System Support Beyond React

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
Tweet

More Decks by Jake Trent

Other Decks in Technology

Transcript

  1. 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
  2. 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.
  3. 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
  4. 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 :
  5. 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
  6. R E A C T W H AT I S

    ? • UI Component lib • Combines visual elements w/ data • Pattern
  7. 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
  8. 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
  9. . !"" 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 /
  10. S E PA R AT E H T M L

    & C S S E A R LY D AY S
  11. 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
  12. D R O P H T M L = T

    E S TA B L E • No Webpack in unit test environment
  13. 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
  14. 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
  15. 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
  16. Q 1 2 0 1 8 O K R S

    “Deliver industry leading content creation, management, and customer delivery platform”
  17. 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
  18. 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 ?
  19. 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 ”
  20. G O O D S V E LT E •

    Simple component API • Is just JS • Can src styles in CSS again
  21. 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
  22. 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
  23. G O O D S T E N C I

    L • Web Components is the closest thing to an interop standard we have
  24. 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
  25. 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
  26. B A D S TAY R E A C T

    • Not supporting every team
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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”
  33. 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
  34. 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
  35. 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
  36. 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
  37. dist !"" css # !"" index.css # !"" index.js #

    $"" index.scss !"" react # $"" index.js $"" vars $"" index.js D I S T /
  38. .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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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