November 10, 2019
It’s easier for developers to work on their new component in isolation. We have some UI elements where, if you want to see the “real” version on the site, then you have to do a bunch of steps (like log in, pick this option, go to this step, etc etc). That gets annoying when you have to repeat the process to test every single change. Much faster to just look at Storybook which shows the component in every possible state.
Doing so encourages better code quality, like components that are well encapsulated. Without Storybook, we saw more devs writing React components that were not very reusable. (one example, I saw a React component that was directly using window.location.search instead of taking that as a prop). If devs write the component in Storybook first, then that tends to make it more reusable.
That being said, if you’re a solo developer, I don’t know if it’s really worth the extra time investment to do something like this in the first place. However, it is a fulfilling process to complete if you’ve got a project you’re really passionate about.
I’d like to go over a few choices I investigated when trying to plan a component development solution of my own.
I initially started out building my own, but I quickly realized it was like developing another application just to manage the components for your actual application. It felt like it would get me a little bit of progress up front, but eventually would become unmaintainable and I’d stop using the tool.
Lots of smart developers, and even companies, have created sandbox environments for this. Why not just use them, and just leverage the time and knowledge that’s gone into them and use that to create better components that are easier to maintain?
React Styleguidist is a React component development environment with a living style guide. It provides a hot reloaded dev server and a living style guide that lists component propTypes and shows editable usage examples based on .md files. It supports ES6, Flow and TypeScript and works with Create React App out of the box. The auto-generated usage docs can help Styleguidist function as a documentation portal for your team’s different components.
I ultimately didn’t really use Styleguidist that much, it was really just something I switched to after I couldn’t get Storybook to work right away due to NFS issues I would later come back to solve.
The big cool thing is it allows you to browse a component library, view the different states of each component, and interactively develop and test components. When building a library, StoryBook is a neat way to visualize and document components and different addons, making it easier to integrate into your different tools and workflows. You can even reuse stories in unit-tests to confirm nuanced functionality.
Written by Steven Wright who lives and works in Sacramento building useful things.