A story about how I fell in love with Storybook
I had heard about Storybook for a while and strongly associated it with ReactJS when I ran into a blog post of Dominic Nguyen describing all the redesign they did for the Storybook v5.0. The article intrigued me, I wanted to know more and soon I found out that Storybook has support not only for React but also for other modern frameworks, including Vue. It was more than enough to make me start thinking if I can integrate it into the project I’m working on and what the benefits we could have out of it.
Setting the goal
That is how I started my weekend hack project. Our application has quite a weird setup, it’s in a transitioning state between legacy AngularJS and fancy modern Vue. All the code is written in Typescript, the markup for Vue components is defined in Pug, SCSS is used for styles definition. Having that mixed setup of different tools and frameworks, I wasn’t sure if I can manage to integrate Storybook, but the goal was set.
Integration
Having spent several hours I got a live story for one of our Vue components! It was a WOW moment. I could see our Vue component living within a different isolated environment and having exactly the same look. It was amazing! And I was really impressed by how easy it was to customize Storybook for our setup.
Hunger for more
Next week I wanted to do more and set out to expand Storybook for all the Vue components we had at the moment. To achieve the goal I had to refactor them a bit, extract side-effect logic into container components. The results really blew my mind. All possible states of every presentational component were live in Storybook, you could see them, “touch” them and play with them, and they looked exactly the same way as in the application.
I got the benefits right away — explicit visualization of every state of the components helped to catch some bugs, e.g input fields were not in read-only state though they had to.
On the way, I got lots of aha moments and got some ideas, which I think will significantly change my approach to developing UIs. Below I want to share my thoughts about some of the significant benefits Storybook brings to UI development.
Forced separation between Container and Presentational components
We all know there are 2 types of components out there, Container components and Presentational ones. The problem though that we don’t always have a clear separation between both types of components, most of our components are a mix of both types — they mix up side affects logic (handling api requests and connection to Redux) with markup definition. That leads to complicated unit-tests and hard to reproduce states.
Why so?
Because nothing is really forcing us to do that logic separation.
Storybook to the rescue!
But once you embrace Storybook and set out to have all possible states of your UI defined in Storybook, you will be forced to explicitly separate presentational and container components, extract side effects logic into container components and leave presentational ones with the markup and styles definition.
Robust UI is not a myth
Creation of robust UI is not an easy task. It’s hard to predict all possible states of components, hard to reproduce every state in the context of a working application. As a result, we tend to skip rigorous visual testing for edge states and pay for it later when debugging weird bugs and trying to reproduce users’ problems.
Storybook helps you with that by enumerating all possible states of your components, visualizing every state and making you focus on one state at a time while developing a component.
Simplified design review
Your component needs to undergo a design review of every possible state? No problem, just give your designer a link to the Storybook enumerating every state of the component.
Improved Productivity
While developing a component a lot of time is usually spent to reproduce different states of your components, given your components are not truly Presentational components and contain some side-affects logic, like dealing with network requests and connecting to the store. And with every code change you need to wait for the whole application to reload and all the data fetched. That’s tiresome and you are required to have a good Internet connection.
Storybook solves the problem by forcing you to create true presentational components and enumerating and visualizing all possible states, providing all the data the component needs. It does it in an isolated environment and the re-rendering happens blazingly fast.
As a conclusion
I have just 1-week experience with Storybook and got very excited about what it enables UI developers to do. It helps you be more productive, get more fun from your daily work and deliver robust UI. It’s definitely going to change my approach to developing applications.
If you haven’t tried Storybook yet, I encourage you to give it a try. It’s definitely worth it.
