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.

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
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
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.
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