19 Sep
Component-based architecture is a dominant feature of modern front-end JavaScript frameworks and although it does provide myriad benefits, it also introduces more complexity into codebases. In response to this increased complexity came Storybook, a highly useful open-source tool that can be used to build and test developers’ components in isolation.
In my recent Insiten University group session, I wanted to expose my team to the utility of this tool. We spent the first half of the session exploring what Storybook is and the super-cool Addons feature, which are functionalities that can be installed in a Storybook project and then executed on the imported components. We also examined the use of Storybook in two different contexts:
1. For applications: I have a side project called Globetrotter and have been using Storybook to build and test its components as it grows. My Storybook application lives inside the project directory and accesses the Globetrotter’s files in order to construct an isolated sandbox environment for component development and testing.
2. For component libraries: at Insiten, we’ve been developing a library of reusable components for both internal use and for client projects. As in the previous example, the Storybook application lives in the main project directory. However, since the project is a library (generated by the Angular CLI tool) and not an application, the library is published to NPM and Storybook is deployed to a static site so it can easily be viewed for reference without the need to serve it locally.
In the second half of the session, we went through a bare-bones repo that I set up with Angular + Storybook and walked through the process of creating a component and creating “stories” (the files to produce the test cases seen in the previous examples) for the new component in order to cement the discussed concepts.
What particularly excites me about Storybook is that it’s grown tremendously in its 3.5 years of existence and shows no signs of slowing down. It began as a tool only available for React and has expanded to work with every front-end framework/library you’ve ever heard of (and some that you haven’t), plus it has more than 20k commits on GitHub and full-time contributors. I’m pleased that we’re leveraging it an Insiten and would absolutely recommend it to anyone building front-end applications to integrate it into their development workflow.
