Emma Britnor
Leveraging Storybook for Component Driven Development outside of your classic Component Library.
#1about 2 minutes
Addressing the challenges of scaling large web applications
Large applications often suffer from duplicated work and hard-to-reuse components, which component-driven development helps to solve.
#2about 5 minutes
Best practices for designing flexible and reusable component APIs
Adopt principles like single responsibility, composition, and render props to create modular and maintainable component APIs from the start.
#3about 6 minutes
Getting started with Storybook for isolated component development
Use Storybook to build UI components in isolation, write stories to document different states, and get auto-generated documentation.
#4about 2 minutes
Handling complex components with state and API calls
Replicate complex component behaviors in Storybook by mocking API calls with MSW and managing global state with decorators.
#5about 3 minutes
Integrating user interactions and Figma designs into Storybook
Use the play method to script user interactions within stories and integrate Figma designs directly for better design-to-code consistency.
#6about 2 minutes
Leveraging stories for UI and visual regression testing
Import stories directly into React Testing Library for UI-driven testing and use Chromatic for automated visual regression testing.
#7about 2 minutes
Using Storybook to build and maintain shared libraries
Well-documented components in Storybook make it easier to identify reusable patterns and extract them into a shared component library.
Related jobs
Jobs that call for the skills explored in this talk.
Douglas GmbH
Düsseldorf, Germany
Intermediate
Senior
TypeScript
React
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
04:56 MIN
Recreating React components using AI and dev tools
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
05:28 MIN
The origin story of the Polypane developer browser
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
03:16 MIN
Improving the developer feedback loop with specialized tools
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
09:00 MIN
Navigating the growing complexity of modern CSS
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
02:33 MIN
Why you might not need JavaScript for everything
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
03:31 MIN
The value of progressive enhancement and semantic HTML
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
11:32 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
03:58 MIN
Making accessibility tooling actionable and encouraging
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
Featured Partners
Related Videos
19:46Building a framework-independent component library
Tobias Scholz
28:35Unlocking Seamless Collaboration: Design-First APIs for UI Components
Lucien Immink
29:44Building a component library for modern challenges
Filip Rakowski
32:21Design Systems and how to develop consistent and scalable products with them
Michael Siregar
41:28Component styling in a JS world — evolve your mental model
Maximilian Heinrich
41:54Extending HTML with Web Components
Rowdy Rabouw
25:22Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
46:39Frameworkless: How to use Web-Components in production?
Tobias Münch
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
Confideck GmbH
Vienna, Austria
Remote
Intermediate
Senior
Node.js
MongoDB
TypeScript
Twin.Link GmbH
Osnabrück, Germany
Intermediate
Senior
React
TypeScript
TechBiz Global GmbH
REST
Docker
Node.js
JavaScript
Continuous Integration
awesome.
Sheffield, United Kingdom
Remote
£35-50K
PHP
API
CSS
+8