The difference between Storybook and Bit.dev

The difference between Storybook and Bit.dev

  • 389

Storybook excels in the visual development of standalone components. Bit handles the full lifecycle of reusable UI components across projects.

Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components. That is true, but that’s only a small part of what each of these tools can provide.

Storybook is a truly fantastic tool that excels in the local visual development of UI components and lets you save examples as a showcase gallery. bit.dev hosts UI components for distribution and collaboration across projects. It’s a cloud solution for components extracted, modularized and reused with Bit.

Bit and Storybook: Quick Intro

Storybook excels in the visual development of standalone components. Bit handles the full lifecycle of reusable UI components across projects.

Storybook is an excellent open-source tool that provides a user interface development environment and playground for UI components. It helps developers create components and showcase components interactively in an isolated development environment. A Static version of Storybook can also be built and deployed to a server, so you can create a static visual showcase gallery of your UI components, for yourself and your team to share. It does not extract UI components, hosts them, and distributes them across projects.

bit.dev is a platform that hosts UI components for distribution and collaboration across projects. It hosts Bit (open source) components, which are isolated, packed and extracted from their parent repos. Each component is automatically analyzed and packed with all files and dependencies. Each is built, tested and rendered in full isolation. Each is independently versioned and exported (to bit.dev or your server). Each is installed and updated as a standalone unit; no running CI for everything when you update a button. Each can be imported and modified from any new project. In bit.dev component examples are also rendered in isolation and showcased, but it does not yet provide a local visual environment to develop UI components.

How is bit.dev different from Storybook?

While Storybook excels in the visual development of standalone components, Bit handles the full lifecycle of components already created. It completes Storybook from the point a component lives in your project, and beyond. It also provides build/test capabilities for isolated component development.

A Storybook static gallery visualizes component examples. A bit.dev collection hosts components, which were extracted and exported using Bit. These components are independently packed, versioned, built, tested and rendered in isolation. They can be independently installed and updated in different projects right off bit.dev. When you explore a UI component in bit.dev, you might notice it shows the source-code and dependencies of the component.

For example, let’s look at the Grommet button component. In the beautiful Storybook gallery, you view rendered examples based on the story file.

Example of a Grommet button component in Storybook
Example of a Grommet button component in Storybook

In the bit.dev component, you can view the actual source code, dependencies and consume the component itself in different projects (source code).

Source-code of a Grommet button component in bit.dev
Source-code of a Grommet button component in bit.dev

Dependencies (which Bit automatically defines in an auto-generated package.json for each component before it’s exported):

Dependencies of a Grommet button component

Consumption via npm install / yarn add / bit import (to modify the code).

Consumption of a Grommet button component in bit.dev
Consumption of a Grommet button component in bit.dev

Let’s review these two parts: Bit (open-source) and bit.dev (platform).

What can Bit’s open-source tool do for you?

Bit handles the full lifecycle of components: isolate, build, test, version and export standalone components from a repository. Track changes to components, track versions, control component depdancy-graphs, merge code changes, and more.

bit-dev

  • Track a set of files in your repository as a component.
  • Automatically-define a package.json with all package and component dependencies for each component. Save overhead.
  • Wrap each component in a 100% isolated development environment (called “Capsule”), detached completely outside of your project.
  • Leverage pre-made extensions to build (compile/transpile), test and render each component in 100% isolation, to help make it 100% reusable.
  • Version each component independently, so you can deliver and get meaningful updates to specific components (don’t run app CI every time).
  • Control component dependency graphs: Updated button? Automatically update button-group without an unrelated slider component. incrementally update parts of your UI, across repos and components.
  • Export components from your repository to a remote hosting collection for reuse. Set up a remote collection on your own server, or use bit.dev.
  • Import a component into a new project so you can further modify the source code of the component, then tag and export a new version.
  • Track changes to the source code of components, and extend Git to merge source-code changes in different component versions.

What can bit.dev do for you?

Bit.dev is the all-in-one hub where you can host, organize, search, consume, showcase and manage your team’s shared UI components.

bit.dev

  • Host shared components for your team’s projects.
  • Organize and distribute shared UI components. Segment components by context, namespaces, labels and other parameters.
  • Consolidate your visual gallery with consumption and collaboration: Install components as packages from the bit.dev registry, using npm/yarn. Import components using Bit, for further development from a consuming repo, in order to increase adoption of shared components.
  • Run CI for each component in the cloud — build, test and render components- to bulletproof their reusability in any new project.
  • Provide advanced semantic search capabilities built for components, with added filters for labels (auto), bundle-size, dependencies, etc.
  • Showcase components in a visual example gallery. Dynamically add usage examples in the cloud for components without changing the source code.
  • Provide a live sandbox for every component, rendered in the cloud in isolation, to try it out and save examples for each component.
  • Auto-generate component docs (including API reference) so that you can focus on writing code + make sure docs will keep up with code changes.
  • Collaborate with a developer community that exports tens of thousands of new components to bit.dev every month.
  • Soon: bit.dev will integrate to GitHub so that you can send pull-requests to every single relevant repository every time you update a component.
  • Soon: Bit will support the component story format so that you can leverage Storybook examples as part of the bit.dev experience.

How’s a Storybook gallery different from a bit.dev collection?

A bit.dev collection is where components are exported to, imported from, managed and synced across your projects. It handles the distribution, consupmtion, and collaboartion of components. They resemble in the sense that like Storybook, bit.dev also presents visual examples of your components.

Well, your bit.dev collection hosts your actual components. You can export, import, install, and update components in your bit.dev collection.

bit.dev

A Storybook showcase gallery is a self-hosted documentation portal that leverages the stunning examples created by Storybook as a visual gallery.

Storybook example showcase
Storybook example showcase

A bit.dev collection is a set of cloud-hosted components that can be consumed right from the collection itself. The collection hosts the actual component source-code, runs their CI, packs them in a registry and more.

bit.dev reusable UI components
bit.dev reusable UI components

It also provides a visual showcase experience and sandbox, which currently isn’t local but cloud-based- to help in the distribution of shared components.

bit.dev

On top, Bit provides search capabilities built for components, which take into effect parameters that go down to the API of the component itself, and enhances it with manual filters for component bundle-size and more.

Search and filter by bundle-size, dependencies, tests etc

Can Stories document my reusable Bit components?

Storybook and Bit can live separately or side by side. For example, Storybook can provide a visual development environment for component prototyping and to create examples. Bit can then isolate these components from their projects, help you make them truly reusable, and use them in new apps.

A tweet so true, even when bit.dev was bitsrc.io long ago
A tweet so true, even when bit.dev was bitsrc.io long ago

Ideally, Storybook and bit.dev can and should be integrated as an enjoyable experience. The bit.dev team is working on supporting component story formats both in Bit and bit.dev, so that your stories will render as examples in your bit.dev collection, optionally with the great Storybook experience. You will be able to share and consume components right from the place you see your stories.

This means you can leverage Stroybook’s excellent local development capabilities to visually develop UI components (+ leverage Bit to build and test each in isolation), then export the components to bit.dev and watch as your components are visually organized in your team’s component hub.

An official release note will be published once this support is ready. Meanwhile, feel free to combine the workflows as you see fit. For questions don’t hesitate to reach out to the team via Gitter or Support.

Happy coding!