What is storybook?
Storybook is a tool that empowers developers. Development of web applications with the focus on the components that build together to create sites. A playground to enable developers to only focus on their component at hand.
Storybook is a visual platform used to view all your components, built in a web language/ framework of choice, this enables less technical stakeholders in your project to see the work and progress made in the components of a new site / campaign.
Storybook also has many powerful features that aid developers + design agencies. There is functionality that allows you to test components to be rendered correctly on different devices, test for accessibilty requirements, full documentation on how to use each component + many more powerful featurers that prove to make Storybook an amazing tool.
Where can this be useful?
Because we are able to view the components being made in a catalog environment, it makes it easy to pick up a theme, and the general consistency of the components being made. You can easily see if the components match your desired branding.
A component library allows developers to share their efforts, without having to deploy an entire site, just to allow for people to play around with the new components. Because we are now thinking about sites with a variety of components, it makes us spend more time making these components robust.
Components can be designed to be robust, with the integrated tooling available, and because sprints can be made quicker due to a more granular web dev process, this means faster feedback. You can get feedback at a component level, rather than waiting until the entire site is made.
Component package
The Storybook component library goes hand in hand with a component library package. This can be hosted in NPM/Github packages/etc. The benefits of this are huge, this means that we can have one location for our components, separated from the site itself. Multiple projects can all utilise from one component library.
Each project can benefit from the same theme, if you an enterprise, this means all your products will be consistent, users on your sites will not have to struggle with adding additional information to their cognitive load. Users do not have to relearn how to use each one of your sites.
A component library means added modularity and reusability. You can even have multiple component libraries for each project, and use what you want. Why create from scatch, when you can reuse your previous efforts, or the efforts of a talented component creator.
Scalable components. What happens when you want to add an additional variant on a component. With a component library, we only have to make the change once, and then update the package. Each project that utilises the package will now have access to the new component version, without any code change. This is the true meaning of DRY (Don't Repeat Yourself). Component changes can propagate over all sites, that use the component library as a dependency.
Summary
Storybook is a fantastic tool. For me, it speeds up my development time ten fold. It allows me to focus on the front end when I want to. Then progress onto back end at another time. Having focused development workflows improves your productivity.
Storybook allows you to feel progression faster. Because you are not worrying about setting things up whilst you want to be creative.. well... you can be even more creative!
With the benefit of a component library, as you mature with more and more components, it becomes even easier to develop entire sites.