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

Tame the Component Multi-verse v1

Michael Chan
May 04, 2022
10

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.

Michael Chan

May 04, 2022
Tweet

Transcript

  1. 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.
  2. 8 — Authorization and logic 👆 👀 👂 👆 👀

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

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

    👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 👆 👀 👂 ⬅ ➡ 🔮
  5. Table stakes 🍽 • 1 view • × 6 viewports

    • × 3 browser engines (was 4) • × 3 device capabilities (☝⌨🖱) • × 4 user abilities (⌨🖱☝👂)
  6. Scale 📈 • 2 Authorization — user types 
 (one

    logical variation) • 2 directions (RTL) • 2 UI frameworks
  7. ✅ Verify responsive behaviour ✅ Debug layouts ✅ Check alignment

    Features that make CSS debugging a snap CSS debugging Outline
  8. 👨💻 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
  9. 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
  10. Ryan Bahan , Shopify [Interactive] Storybook Controls improve our team’s

    cross-functional literacy and communication around React.
  11. Chromatic checks each commit for visual changes. They work by

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

    by Testing Library & play functions ⚡ No waiting and no fl ake 🛠 Low maintenance
  13. 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…’
  14. Brad Frost , Atomic Design By writing the story, you

    get the documentation for the component, tests, and a playground… all for free.
  15. …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
  16. 10-ish dimensions of UI complexity 👆 👀 👂 👆 👀

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

    Continuum imperative Declarative Component-driven development is the unlock