Components at Scale: Choosing Your Component Playground
Which option is right for you?
Greetings.
At this point, it feels safe to say component-based design and development is here to stay. Gone are the days of designing and building pages in isolation. Instead, we’re building collections of components that all follow a shared design system and can be used across any application.
We’re achieving this with the help of UI development environments, by which I will refer to in this piece as component playgrounds — the most important tool to emerge from this paradigm. Component playgrounds allow us to build, test, and browse our components in isolation. When executed correctly, they make prototyping new experiences both easy and fast, thanks to the consistency they create.
OK, so you're sold on the idea of creating a component playground, your team is growing fast, and you’ve got multiple repos. You’re in need of a single, consistent source of truth or else you risk diverging the repos even further.
How Do We Go About It?
Well, we need a component-development environment where we can build, use, and test the components while keeping a library and documentation around all the built components. There are a few great examples out there, and for the sake of this piece, I’ve researched three of the top-performing ones.
Storybook | ☆ 44.5k
Storybook is a UI-development environment that allows you to visualize different states of your UI components and develop them interactively.
Notably, it offers the ability to toggle between user-specified component stories (i.e., states). The reason for that is because Storybook comes with a lot of add-ons for component design, documentation, testing, and much more.
As an example, you can play with your component props easily by using the Storybook Knobs add-on, which you can read more about here: “Components at Scale — Implementing Storybook.”
