Recently we have introduced Storybook to our frontend development workflow. Storybook is a UI web development environment that runs in the browser. It was initially developed as an open source project by a Sri Lankan startup. When the startup shut down the project was almost dropped. Luckily it was revived by a community of contributors and maintainers, which are spread across the world. Nowadays it is a very popular and modern tool for building modular UI’s. This is hugely reflected by its adoption in big tech companies, including Atlassian, Airbnb and many more. With the recent introduction of v4.0 a major release has introduced new exciting features.
The different tools in Storybook
A Storybook consists of building blocks, so called stories. They can be put together in many ways. Ideally a story implements and displays every behaviour and state of a UI component. A simple example would be a Button component. It can have many states such as active, loading or disabled. Stories can also cover edge cases elegantly. They encourage the developer to reason about possible component states in a very explicit manner.
Storybook helps to improve the development process. By putting components together as pieces complete screens can be assembled. This promotes componentisation and modularisation. It also provokes a habit of creating reusable components. By investing time upfront into figuring out the components architecture first immense productivity can be gained in the long term. It further helps to manage an applications complexity. Storybook runs outside of your application as a web application in its own environment. This makes developing and viewing seperate parts of the UI possible. It also makes testing easier since the component can be tested in isolation.
Storybook offers plenty of flexibility and supports many popular frontend libraries and frameworks from React and React native to Vue, Angular and more. Typescript usage can also be easily configured. If you already have an existing project set up Storybook can still be introduced since it is completely independent of your project. In case you want to demonstrate your UI to stakeholders or discuss it with a designer, Storybook provides you with an easy way to export it as a static application. This also means that Storybook serves as a form of documentation where a living style guide and different states of your application are visually documented. It also makes the feedback cycle between designer and developer team much easier.
Storybook itself is highly customisable and extendable through addons such as the actions addon. The actions addon enables the observation of events emitted by a component. In the case of a Button this means that only an active one can execute an observable action. Thanks to Storybook’s addon api creating your own addon is simple. One of the requirements for our deployed Storybook is to provide authentication. We introduced a login using an addon api hook with very little effort. There are many configuration options and measures that you can take to customize your Storybook.
How Do we Use it?
In our team we use Storybook in combination with React and atomic design. Atomic design is a methodology for creating design systems which is popular amongst designers. In our current project we are also facing the challenge of synchronizing the design requirements between multiple services. Because we want to preserve a distinct look and feel throughout the application the design needs to be unified across several autonomous teams. This is where Storybook is very helpful. It documents our UI library that is shared between services and teams. The components are extracted in the form of a component library. A new version of the library can be published via Artifactory at any time and is provided as a private npm package. This fulfils our need for a unified and versioned UI library, that we can reuse as a dependency across multiple applications.
Although Storybook supports multiple frontend libraries and frameworks at the moment we are not planning to use something other than React. However incorporating a new adapter for e.g. a Vue host application in the future should not present a huge obstacle, thanks to Storybook.