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

Tame the Component Multi-verse v1

Ad9e927bce4bd0519631296b5af7af83?s=47 Michael Chan
May 04, 2022
1

Tame the Component Multi-verse v1

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component is a multitude of challenges. How do you actually manage it? Disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development is a multiverse where dimensions like time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, document our work and tame the multiverse of our components.

Ad9e927bce4bd0519631296b5af7af83?s=128

Michael Chan

May 04, 2022
Tweet

Transcript

  1. BURN ALL JEST SNAPSHOTS WITH FIRE

  2. BURN ALL JEST SNAPSHOTS WITH FIRE

  3. BURN ALL JEST SNAPSHOTS WITH FIRE

  4. BURN ALL JEST SNAPSHOTS WITH FIRE

  5. WhoTF is this?

  6. WhoTF is this? • 👋 I’m chan, chantastic, or Michael

    (he/him/any) • 🩲 I have accidentally peed myself as an adult • 🎙 I used to host React Podcast • 🕯 I burned out • 🔫 Pivoted to being the oldest guy logging 40/wk on Destiny 2 (probably) • 👷 Part of the React Working Group • 🎮 Started my favorite online space: discord.gg/lunchdev • 🧓 12 years in developer productivity, design systems, and frontend architecture • 🥸 I read at a roughly 3rd grade reading level • 🕸 I’m now working at Chromatic to improve the UX of the web.
  7. Testing Trophy on it’s side

  8. https://kentcdodds.com/blog/the-testing-trophy-and-testing-classi fi cations

  9. None
  10. https://twitter.com/kentcdodds/status/960723172591992832/photo/1 Static Unit Integration End to end

  11. Static Unit Integration End to end

  12. Static Unit Integration End to end

  13. Static Unit Integration End to end

  14. Static Unit Integration End to end

  15. Static Unit Integration End to end

  16. Static Unit Integration End to end

  17. Static Unit Integration End to end

  18. Static Unit Integration End to end Visual

  19. Static Unit Integration End to end Visual UI Testing Continuum

  20. The UI Multi-verse

  21. The 10-ish Dimensions of Web UI

  22. …or 35,000 perfect states

  23. 1 — Ideal

  24. 2 — Async

  25. 3 — Async (variations) 404 500 skel.

  26. 4 — Viewport 404 500 skel.

  27. 5 — Browser engine

  28. 6 — User abilities 👆👀👂 👆 👀 👂 👆 👀

    👂 👆 👀 👂 👆 👀
  29. 7 — Device capabilities 👆⌨🖱🗣 👆 👀 👂 👆 👀

    👂 👆 👀 👂 👆 👀
  30. 8 — Authorization and logic 👆 👀 👂 👆 👀

    👂 👆 👀 👂 👆 👀 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀
  31. 9 — Localization (LTR/RTL) 👆 👀 👂 👆 👀 👂

    👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 ⬅ ➡
  32. 10 — Organization 👆 👀 👂 👆 👀 👂 👆

    👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 ⬅ ➡ 🔮
  33. 10 — Organization 🔮

  34. 10 — Organization 🔮

  35. 10 — Organization 🔮

  36. 11 — Framework autonomy 🔮

  37. Personal Problems

  38. Table stakes 🍽 • 1 view • × 6 viewports

    • × 3 browser engines (was 4) • × 3 device capabilities (☝⌨🖱) • × 4 user abilities (⌨🖱☝👂)
  39. Perfect states 216

  40. Scale 📈 • 2 Authorization — user types 
 (one

    logical variation) • 2 directions (RTL) • 2 UI frameworks
  41. Perfect states 864

  42. Style 💅 (My case) • 2 theme • 2 contrast

    modes • 10 applications
  43. Ideal states pre view 34,560

  44. Ideal states pre view 34,560

  45. https://uxdesign.cc/create-a-button-component-with- fi gma-variants-auto-layout-ac636ea1db76

  46. https://uxdesign.cc/create-a-button-component-with- fi gma-variants-auto-layout-ac636ea1db76 Figma button 1134 variants

  47. We survive by just not thinking about it 🙈🙉🙊

  48. The problem is test creation

  49. Static Unit Integration End to end Visual Suitability

  50. Static Unit Integration End to end Visual interfaces Suitability

  51. Static Unit Integration End to end Visual interfaces implementation Suitability

  52. Static Unit Integration End to end Visual Flows interfaces implementation

    Suitability
  53. Static Unit Integration End to end Visual Flows interfaces implementation

    coordination Suitability
  54. Static Unit Integration End to end Visual Flows interfaces implementation

    non-visual coordination Suitability
  55. Static Unit Integration End to end Visual Flows interfaces implementation

    non-visual visual coordination Suitability
  56. Static Unit Integration End to end Visual engineers Suitability by

    Role QA
  57. Static Unit Integration End to end Visual engineers Suitability by

    Role QA 🤷
  58. Static Unit Integration End to end Visual engineers Suitability by

    Role QA LGTM!
  59. Static Unit Integration End to end Visual imperative UI Testing

    Continuum imperative Declarative
  60. Static Unit Integration End to end Visual imperative UI Testing

    Continuum Declarative
  61. How do we produce tests in this visual integration gap?

  62. Automatically

  63. Declarative UI Testing

  64. Declarative UI Testing @winkerVSbecks

  65. Storybook

  66. Designers have sticker sheets

  67. Sticker sheet for components

  68. ✅ Verify responsive behaviour Features that make CSS debugging a

    snap CSS debugging Viewport
  69. ✅ Verify responsive behaviour ✅ Debug layouts Features that make

    CSS debugging a snap CSS debugging Measure
  70. ✅ Verify responsive behaviour ✅ Debug layouts ✅ Check alignment

    Features that make CSS debugging a snap CSS debugging Outline
  71. 👨💻 During dev: use A11y panel to audit components as

    you build them. ✅ PR check: import stories into Jest and run Axe on CI. Accessibility tests
  72. Verify event handlers Use ArgTypes to create callbacks that appear

    in the actions panel. Verify whether the handler received the correct arguments in a glance. Events log
  73. Overview story Use Docs Page to explain what the component

    does and when to use it.
  74. Controls Graphical UI to interact with a component args dynamically

  75. Ryan Bahan , Shopify [Interactive] Storybook Controls improve our team’s

    cross-functional literacy and communication around React.
  76. Chromatic

  77. Chromatic checks each commit for visual changes. They work by

    taking screenshots of every story and comparing them previous baseline. Visual tests This changed
  78. Interaction tests ✅ Simulates user behavior in browser 🐙 Powered

    by Testing Library & play functions ⚡ No waiting and no fl ake 🛠 Low maintenance
  79. None
  80. None
  81. Automated checks

  82. Brad Frost , Atomic Design Testing has historically been really

    rough for us because it's been like ‘picture in your mind's eye, a modal, and imagine clicking on a button that opens that model…’
  83. Brad Frost , Atomic Design By writing the story, you

    get the documentation for the component, tests, and a playground… all for free.
  84. None
  85. None
  86. So…

  87. We are similarly cursed 😈

  88. Because we love the web 👯❤🕸

  89. Because we love the web 👯❤🕸

  90. Because we love the web 👯❤🕸 Y?

  91. Because we love the web 👯❤🕸 Y tho?

  92. Because we love the web 👯❤🕸 Y tho?

  93. Because we love the web 👯❤🕸 Y tho?

  94. Because we love the web 👯❤🕸 Y tho?

  95. We love the web 👯❤🕸

  96. …but I love the web 👯❤🕸 Desktop in Edge Admin

    on mobile Keyboard focus on Desktop Accessible via VoiceOver RTL in Arabic Loading State Light mode High contrast Reduced motion
  97. 10-ish dimensions of UI complexity 👆 👀 👂 👆 👀

    👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 ⬅ ➡
  98. Static Unit Integration End to end Visual imperative UI Testing

    Continuum imperative Declarative
  99. Static Unit Integration End to end Visual imperative UI Testing

    Continuum imperative Declarative
  100. Static Unit Integration End to end Visual imperative UI Testing

    Continuum imperative Declarative Component-driven development is the unlock
  101. Sandi Metz “Tests are the wall at your back”

  102. Tame your UI Multi-verse 🕸

  103. chan.dev @chantastic discord.gg/lunchdev