Component-driven development is an excellent strategy to accelerate the development of frontends and user interfaces. The use of components enables reuse and simplifies the building, testing, and modularization of applications.
In small applications, the lists of components in use can be easily managed – you don’t need a specific tool to maintain those lists other than your own memory. But when applications and development teams grow in number and complexity, the number and complexity of components also increase, to the point where you need some kind of aid to keep track of components and keep coherence in your UIs.
To adopt component-driven development for medium to big projects, you need a tool capable of managing component libraries, documenting them, showcasing them, and enabling their development independently of the applications that use them.
This need for component management and cataloging is, fortunately, solved by a new class of tools that aim directly at accelerating the development and documentation of user interfaces and frontends. These tools offer support for different libraries, different JavaScript dialects, and diverse JavaScript frameworks for UI development, such as Angular, React, and Vue.
In addition, some of the component management tools also serve the function of generating front-end style guides.
What are style guides in the realm of front-end development?
They are live collections of all the elements in the user interface of an app under development. These guides not only present lists of components but also include functional, testable examples. They also offer code snippets of each component, which developers can copy and paste into their own code. Typically, style guides include common UI components, such as buttons, icons, navigation menus, form input elements, and modal overlays.
Below you can find reviews of the tools that are emerging as leaders in the UI component development and documentation tool segment.
Storybook
Storybook is a popular tool for developing front-end and UI components that allows you to work without worrying about application-specific dependencies. It offers a sandbox to build the UI in isolation, outside the app under development. This allows the development of hard-to-reach states and edge cases, resulting in significant improvements in component reusability, testability, and development speed.
It also facilitates the interaction with UX designers, simplifying the task of viewing existing components and identifying the ones that need to be created.
Storybook supports a variety of JavaScript frameworks, including React, Angular, Vue, Svelte, Web Components, and more than a dozen others. Use cases created in Storybook can be saved as stories in plain JavaScript, for review during development, testing, and QA.
The tool has an extensive ecosystem of addons that enables integration with development tools, facilitating workflow customization and automating testing and documentation. For example, the Docs Addon allows writing Markdown/MDX to generate customizable sites for component libraries and design systems.
Styleguidist
Styleguidist can be classified as a living style guide generator, but its functionality is close to that of a development environment server for UI components. The style guides created with Styleguidist show component properties and display editable usage examples based on markdown (.md) files. The tool is compatible with JavaScript dialects such as ES6, Flow, and TypeScript.
The auto-generated documents allow Styleguidist to function as a documentation portal for all components, which is available to the entire development team. It also simplifies the creation and maintenance of the UI documentation site, which includes the UI component catalog. It also allows creating markdown pages and importing UI components.
Centralized documentation in Styleguidist achieves significant time and effort savings on large projects, but resources must be allocated to keep the documentation up to date. Otherwise, you can fall into a problem called style guide mortality, which happens when documentation becomes outdated, developers stop using it, and the usefulness of style guides is simply lost.
It is common for Styleguidist to be used together with Storybook, as their strengths are complementary: Storybook can be used to build components and write stories to track changes to them, while Styleguidist can be used to document components using Markdown.
Bit
Bit is a distributed and extensible framework/repository – aka monorepo or multi-package repository – of UI components, which can be used as an infrastructure to build applications under the Component Driven Development (CDD) methodology. With this methodology, Bit aims to accelerate the build, testing, and maintenance processes, significantly shortening application development cycles and improving application quality.
Instead of building the components as part of the application, Bit allows them to be developed outside the app and then used to compose the applications from the bottom up. In turn, the components can be reused in many different applications, creating a sort of component marketplace available to an entire development team. As a result, you get extensible applications, which can have their functionality changed by simply adding or removing components.
Bit is compatible with React, Vue, and Angular libraries. It is based on a workspace philosophy, where workspaces are used to develop and compose components. This way of working allows you to build applications in a distributed way, but with a monolithic-like experience. The UI of Bit’s workspaces allows to visually develop and manage components with ease.
React Cosmos
React Cosmos is a development environment designed for creating scalable, high-quality user interfaces. It allows you to develop React components in isolation and create libraries of UI components. It can be used to drastically reduce development times, either through instant, visual regression testing or through integrations that could be customized according to your needs.
React Cosmos uses a philosophy based on component fixtures that allows you to bookmark your states by defining example inputs. Grouping component fixtures allows you to create a library of them, which React Cosmos exposes under an elegant user interface specially designed to make your time more productive.
To do its job, React Cosmos inserts itself into your build pipeline so it can understand your source code. This means that you can use the tool no matter which JS dialect you use to write your code – be it Flow, TypeScript or others. It also means that sometimes you have to add some options in some config to make the integration work.
As its name implies, React Cosmos operates exclusively with React, focusing on a few aspects of UI development, but doing so with the highest level of detail.
React Developer Tools
Offered by Facebook, this tool works as a Chrome plug-in, allowing you to inspect React component hierarchies within Chrome’s development tools. It is also available as an add-on for the Firefox browser.
React Developer Tools allows you to inspect and edit the state and properties of a component as you navigate your app’s component hierarchy tree. This interactive form of development gives you the ability to see how changes to one component affect the others, so you can correctly assemble your UI component structure and achieve proper separation between them.
When you install React Developer Tools in your browser you get two new tabs, one called Components and the other called Profiler. The first one shows you the root React components that were rendered on the page, as well as the subcomponents rendered by them. By selecting one of the components in the tree, you can inspect and edit its properties and status in the right pane. Using the breadcrumbs you can inspect the ancestors of the selected component. The Profiler tab is used to record performance information.
Docz
The process of documenting code is probably the one that coders hate the most. Perhaps even more than reading the bug reports they get from the testers. However, a constantly updated documentation site is essential to reduce development time, since it prevents the same components from being rewritten over and over again, and with different features each time.
Docz aims to simplify the process of documenting and updating documentation sites as much as possible so that developers don’t waste time they could use to finish applications faster. With Docz you can easily write and publish interactive documentation of your code, creating MDX files that showcase its virtues. As a result, you get a production-ready site with live-reloading, which refreshes in its entirety whenever a file changes.
If you are into API, you can explore these tools to create beautiful API documentation.
This is just getting started
In addition to the tools reviewed here, there are many other projects for tools to catalogue, manage and document components, such as Carte Blanche, Atellier, Bluekit, among others. Many of them are still in beta, while others are unmaintained projects, but it is worth knowing about them and keeping them on the radar as they can offer qualities that can substantially shorten software development times.
Many large modern companies – including Shopify, Atlassian, IBM, Spotify, and AirBNB – are adopting tool-backed design systems that speed up the development and documentation of UI components. However, you don’t have to wait until you’re a big company to adopt these tools. It’s best to start using them when you have a minimal catalog of components to maintain. You can get acquainted with them so you won’t be caught off guard when your component list grows and it becomes too expensive to start organizing it.
