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 · World Congress 2023

5:22 min

Interactive Storybook and Figma demonstration

Michael Siregar · World Congress 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 · World Congress 2021

1:56 min

Building interactive component documentation pages with Storybook

Tobias Scholz Tobias Scholz · World Congress 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
about 1 year 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
about 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
about 2 years ago

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

Sue Quackenbush

Livecoding with AI thumbnail
31:39
about 2 years ago

Livecoding with AI

Rainer Stropek

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

Upcoming sessions on this topic

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

How is SWE & EM roles are changing in the age of AI

  • Amol Sharma

    Stripe

    Engineering Manager

Open session

From Prompt Engineering to Harness Engineering: Building Observable and Governed GenAI Systems

  • Lakshmi Devi Prakash

    JPMorgan Chase

    VP, Applied AI/ML Lead

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Related videos

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

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

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

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

Michael Siregar

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

Bridging the Gap

Philipp Kremer

Building a component library for modern challenges thumbnail
29:44
World Congress 2023 • about 3 years ago

Building a component library for modern challenges

Filip Rakowski

Breaking Down Silos Between Design and Development thumbnail
54:22
World Congress 2021 • over 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.