WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 • Aug 20, 2024 • Session details

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Emma Britnor

Struggling with bloated frontend monoliths? Move beyond simple UI libraries by developing complex, stateful features directly inside Storybook. Force stronger architectural boundaries and accelerate testing.

Pause
Mute Enter Fullscreen
#1 about 6 min

Decoupling component development in large codebases

Moving beyond basic framework features to true component-driven development minimizes duplicate effort and bloated codebases.

#2 about 6 min

Designing flexible and reusable component APIs

Applying single-responsibility principles and render props patterns ensures UI components remain maintainable and modular.

#3 about 5 min

Building and documenting UI components in isolation

Writing standardized story formats automatically yields interactive documentation and reusable code snippets.

#4 about 4 min

Handling APIs and global state within stories

Leveraging mock service workers and state provider decorators allows rigorous testing of complex, interactive components.

#5 about 3 min

Integrating Storybook with Figma workflows

Embedding design files directly alongside rendered components prevents visual inconsistencies and streamlines prototyping.

#6 about 1 min

Driving UI testing with component stories

Rendering composed stories within React Testing Library eliminates redundant setup for complex component states.

#7 about 4 min

Implementing local visual regression testing

Running visual tests locally via Chromatic provides immediate feedback on UI changes before reaching continuous integration workflows.

Matching moments

2:09 min

Documenting components using Storybook

Michael Siregar · WWC 2023

5:22 min

Interactive Storybook and Figma demonstration

Michael Siregar · WWC 2023

4:29 min

Documenting component variants visually using the Storybook environment

Nathalia Rus · LIVE

4:27 min

Unifying UI libraries across React development and Storybook

Erica Rider +1 · WWC 2021

1:56 min

Building interactive component documentation pages with Storybook

Tobias Scholz Tobias Scholz · WWC 2025

2:05 min

Using public UI libraries to guide component architecture

Nathalia Rus · LIVE

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
10 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, Jürgen Müller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
almost 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
almost 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
almost 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Reinventing Testing Practices in the AI Era

Eric Deandrea

Java Champion & Senior Principal Software Engineer, IBM

Eric Deandrea

Related videos

Unlocking Seamless Collaboration: Design-First APIs for UI Components thumbnail
28:35
LIVE • almost 2 years ago

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Building a framework-independent component library thumbnail
19:46
WWC 2025 • 12 months ago

Building a framework-independent component library

Tobias Scholz

Design Systems and how to develop consistent and scalable products with them thumbnail
32:21
WWC 2023 • almost 3 years ago

Design Systems and how to develop consistent and scalable products with them

Michael Siregar

Bridging the Gap thumbnail
6:16
WWC 2023 • almost 3 years ago

Bridging the Gap

Philipp Kremer

Building a component library for modern challenges thumbnail
29:44
WWC 2023 • almost 3 years ago

Building a component library for modern challenges

Filip Rakowski

Breaking Down Silos Between Design and Development thumbnail
54:22
WWC 2021 • about 5 years ago

Breaking Down Silos Between Design and Development

Erica Rider, Stan Carrico

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.