What is Storybook?

Let's understand what this tool is all about.

One of the first things to understand is, of course, what Storybook is, how it works, and who it is for.

Starting with a use case#

Let's start by seeing how the development process normally goes on a project:

  1. You receive a task to develop a feature: let's say it's a form on the checkout page.

  2. Then, you need to set up the development environment (connect to the VPN, run the backend, run the frontend, etc.).

  3. Finally, you get to the page on which the feature will live.

It's quite bothersome having to navigate between multiple pages, filling forms and clicking buttons every time you have to get to where the feature should be. Sometimes, you're building components that contain multiple states (e.g., loading, success, error), and it's not always easy to replicate all states of a component, leading you to alter the component's code just to force a specific state.

Most, if not all, developers have gone through these situations and understand the pain that is going through them daily.

Most of the time while you're developing, you might want to focus on the component you're building, so anything else (like other elements on a page) becomes noise. Having a way to quickly access any component or feature, and also being able to mock all use-cases for them, can be incredibly beneficial and save you lots of time. Storybook is here as a solution for that.

What is Storybook?#

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase but separately from your application, so it works like a sandbox, allowing developers to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and others!

You could think of it as an actual book, with a nice index for pages that link to your UI components. Every component has stories to tell about itself, and these stories represent the different UI states of that component. Regardless of the situation, even if you're offline, you will be able to access that page and easily find and play around with the components.

Storybook is used vastly for component libraries, but it also has great potential to help develop features of an application, even pages. In this course, I will show you all of that potential.

Storybook addons#

In the Storybook ecosystem, there are addons, installable packages that you can add to your project, that will provide extra functionality to Storybook. There are incredible addons that help you do great things, such as connect with design tools, analyze the accessibility of your components, measure performance, automatically generate documentation for your components, and so on. You can also create your own addons with any functionality you want! We will be covering all about them in this course.

Who is Storybook for?#

Some people seem to think that Storybook is a tool only for component library developers, and that certainly is not true.

Storybook will help you build from the simplest, most atomic component, like a button or an input, all the way to complex features or full pages. We will use its full potential in this course.

Given that Storybook helps summarize the UI of applications, designers and QAs can benefit from it. With Storybook, you can ease the development of a design system and share a single language with designers. QAs can get an overview and test functionalities in isolation. Storybook can even be used to demo functionality to your Stakeholders, and you will not have a Demo Effect (when everything works perfectly except when you demo it).

With Storybook, you isolate the behavior of the application in a sandbox environment that doesn't usually rely on external factors such as a backend, which could be faulty by the time you're demoing what you've done.

Storybook is trusted by thousands of companies, and some of them even make their Storybook public! They might serve as inspiration, and you can find a list of public Storybooks here.

Example of Storybook from

The Guardian

.

How does it work?#

From a technical aspect, Storybook is essentially a React app that runs in your codebase, separately from your main app. You start it by running a CLI command, and it will look for files in your codebase that contain a .stories.* extension (e.g. stories.tsx for Typescript React), gather all of those components, and display them in a nice UI.

In an example of a Restaurant Card, you would have a RestaurantCard.stories.tsx file, which renders the component with mocked properties for every scenario. Below, you see an example with a basic and a loading state. We will learn how all this works in detail in the next lessons.

PS: It's important to note that Storybook does not produce any production code. Your .stories.tsx files are used for development purposes only.

What's next?#

In the next lesson, we will be talking about two important concepts that relate perfectly with React: Atomic Design and Component-Driven Development.

Start a new discussion. All notification go to the author.