Component library: Storybook

The story of Storybook, a tool that can help combine your design, development, and customer teams.

The story of Storybook, a tool that can help combine your design, development, and customer teams.

What is Storybook?

With the gain of React’s popularity, another tool gained popularity: Storybook. Simply said, Storybook is a tool that allows user interface developers to create a showcase of components. You may wonder how this can help development. Its importance varies in different contexts, but in some, it is an invaluable tool.

Storybook brings at least three major benefits to projects it’s being used in:

  1. Decoupled frontend and backend work
  2. Design and development team collaboration
  3. Encouraging atomic design and component reuse

Storybook for frontend development by Storybook.JS.org

Decoupled frontend and backend work

Have you ever experienced a developer being “blocked by” another developer? That means that a developer must wait until someone else finishes their work before they can start. It was a situation not uncommon between frontend and backend work. Traditionally frontend work started after backend developers had implemented the content structure. Whenever backend work took longer than expected, frontend work was blocked.

Storybook can help reduce that bottleneck by decoupling frontend and backend work. With Storybook, developers can implement components as soon as design requirements are clear. Once backend work has finished the components are connected to the backend data structure. The components are very similar to the ones that will be later used in the project and the overhead many times is small.

Design and development team collaboration

Storybook shines in larger teams where designers and developers are involved, for example. Having a tool that gives insight into what components an app or site consists of helps designers collaborate with developers. Not only designers but also customers benefit from this gained visibility and can give valuable feedback early on in the project process.

Kuvakaappaus Storybook-komponenteista, jotka on kehitetty atomisen suunnittelun periaatteita varten

Encouraging atomic design and component reuse

Storybook provides visibility to your components: the building blocks of your site. It is easy to see what components are available and how the components look and behave. It even provides the means to show components in different contexts. For instance, you could display the regular user menu version and its dark mode version. Or a regular button, a large button version and an inverted button all side by side.

Because of the visibility that Storybook provides, components are easier discovered by all team members and also reused more. One of the main principles of atomic design is that a large component is made out of smaller components. These smaller components in another variation can form a completely different component. Having such building blocks at your disposal often reduces development time and the creation of many unnecessary custom solutions. Having to maintain lots of custom code is a story of its own.

Learn more about Storybook

How can we help you?

Drop us a message and let’s chat.