Bit and StoryBook: Two Different Things

The difference between Bit and StoryBook, two very different tools in the component-driven ecosystem.

TL:DR

Bit’s CLI tool and workspace lets you compose apps where different app parts (UIs, features, pages, user-experiences) are Lego-like “containerized” components. Each is decoupled and developed, versioned, tested, built and released autonomously. Each component can be reused and updated in many applications, with automated dependency management and more.

On the Bit Cloud platform teams can build many products together in a composable way. All components can be shared, discovered, and used in different products. Ownership over scopes of components can be assigned to different teams. Changes and updates to components can be suggested, reviewed, built and released to all apps across the entire organization.

Example case study:

A Shared Building Block Approach to Better User Experience | Dell

StoryBook is a tool for visual feedback on UI component development that provides a rich experience with many features. It provides an iframe to render components without interference from app business logic and context that helps you focus even on hard-to-reach edge cases. The visual images (“stories”) created in the process can be gathered into a gallery or catalog and then uploaded to a website so that others can view it as well.

Are Bit and StoryBook alternatives?

No.

Think of it this way: A published repo with 50 components it a CD-Rom burned as a package which now everyone is kindly requested to adopt. You’ll need Git, NPM, probably some “monorepo” tooling, and also a good way to showcase the components on the CD-Rom. That’s the Album cover.

Bit is like Spotify for components, mixed with a creator studio; create a feature, upload to the cloud, share with your team, let people compose it into their playlists (products), and collaborate on changes and updates. It’s an end-to-end platform for component-driven product development.

The two do overlap in visualizing components and viewing visual documentation, but that’s about the only similar role or functionality.

Let’s dive in.

Bit: End-to-End Component-Driven Development

• What — A toolchain for component-driven development where each app part (feature, UI, UX etc) is developed, versioned, managed and released separately and can be easily reused and updated across apps.
• Why — Composability brings greater speed, scalability, consistency and efficiency to frontend applications and their development process. The result it much faster delivery, better apps, and easier collaboration.
• When to use (examples for component-driven development):

→ When you want to split app development into decoupled components (e.g. “Micro Frontends”) — so each is developed and released separately by autonomous teams.

→ When you want to reuse and share features/UX/UI across apps and teams (e.g. to increase development speed, efficiency, and consistency).

→ When you want create a platform for shared features where everyone can access, use, contribute, and suggest/update changes to components.

→ When you’re struggling between code-sharing, builds, managing dependencies and more… go composable for the best of both worlds.

→ When you want to create new features and start adding them to legacy apps regardless of their tech-stack and codebase constraints.

→ When you’re seeking a composable approach to your software application system and/or organizational structure.

• Key features — Bit’s key features include:

Bit open-source workspace and CLI

An open toolset for creating features and UIs as independent components including their full dev and release lifecycle: A component development workspace, a friendly CLI tool, component dev-environments, versioning, automated dependency management, packaging, tests, builds, change suggestions, merges and much more.

With Bit, you can create a new workspace anywhere you want (even outside the app), create components, compose them as dependencies, and create new features and applications as independent building blocks.

Bit will let you build each component with its own dev-environment, will automate dependency detection and management, handle versioning and packaging, and enable tests and builds that go up to all impacted components. It even comes with a local visual UI dev workspace (which is a point where, in a glimpse, the preview screen reminds of storybook — but everything else is different; a full tool for component-driven development).

Bit Cloud for collaboration and for scaling organizations

On Bit Cloud you can host and share your Bit components to reuse between apps or to share with others. Components can be organized by “Scopes” — according to their respective business function or team.

For example here’s the analytics scope used by Bit’s R&D itself:

/analyitcs — a scope of components that build analytics dashboards

Change requests: When you make changes to a bunch of components, you can create a new lane usin Bit CLI, and then add the change request to bit cloud. For example, here’s the actual change request for the new bit.dev homepage prior to its upcoming release:

As you can see in the change request you can see which components changes, review and discuss the changes. You can bring in designers as well to compare and approve changes to components and to other components impacted by the change across the organization.

The “impact” pane on the right lets you see and simulate the impact of your changes on every other component, scope and team in the organization.

Designers can review the changes before they are released, be defined as mandatory reviewers, and engage with discussions and suggestions directly over the products that are going to your users on production:

You can review the changes to the components visually, but also to the code, dependencies (peer, dev, runtime etc), tests and everything else:

Optionally you can use Ripple CI — the component-driven build tool — to build and test the changes to your components. The process is super fast since it only builds changes to components that actually changed instead of an entire project, and ripples the build across the organization.

The results can be simulated and later updated after a review process.

Finally, when everyone approves and the release is good to go, you can merge the changes and release the new versions to your applications.

d

You can track the components in your organization, their usage, activity, tech-stacks and much more in an analytics control dashboard.

And, you can visually see the graph of dependencies between components (and scopes) in the organization at any moment to understand your composable system and the impact of changes.

Summary: With Bit you build applications like Lego with Bit components — that act as conceptual “containers” for components. You can develop them anywhere, use them in many apps, and easily collaborate and update changes across different products and teams. It also provides visualization and discoverability as part of the process, where a confusion point with Storybook and its functions might specifically occur.

Storybook: a visual UI component development and documentation tool

• What — Storybook is an open-source tool for visual feedback in the local development of UI components, and those visuals can turn into a gallery of examples you can host on a website and show others.
• Why — Developing UI elements with visual feedback that handles many edge-cases (e.g. phones and tablets) is a great way to reduce the design error margin when developing a component. The image gallery is a neat way to showcase the components you build.
• When to use — StoryBook comes in handy if you want to either get a quick visual feedback while developing UI components with rough edge-cases or when you want a rather a quick way to get a gallery of your visual component images to host on a static website.
• Key features — The two key features of storybook are a visual UI development view for components and documentation in the form of visual component representations that can be hosted on some website.

Local visual UI development

As you develop a UI component, StoryBook lets you get a quick visual feedback on your work including advanced views and exploring edge-cases such as different devices etc. It reduces design errors in the process.

Alongside your components, you can write story files that will be used as the “Story” of the component to showcase its visual output. Storybook provides many wonderful features to enhance this experience.

Example:

// Inside src/stories/2-Header.stories.js

import React from 'react';

import Header from '../components/Header';

export default {
  title: 'Header',
  component: Header,
};

export const Text = () => <Header>Hello Header</Header>;

Component visual showcases

Your component “Stories” can become a showcase gallery that you can host on a website of your choice which you setup and maintain. There, other people including designers and developers can view the components.

Integrations

Storybook provides many integrations with popular tools to enhance your workflow and help with important things such as accessibility testing.

Bit and StoryBook for Design Systems

In this last part we’ll answer the question “how do Bit and StoryBook fit into my design system?”

So here’s the quick answer:

StoryBook will help develop UI components visually, and provide a showcase gallery of your components’ “Story” visuals on a website. This helps with sharing the looks of components between designers and developers. If you have a UI library it can be added on top.

Bit lets you build a scalable system of independent components and shared UIs across your applications and products. If a package with 30 components is a CD-Rom, then Bit + Bit Cloud create a “Spotify” like platform for shared components in the organization that provides a component-driven development workflow for developers, designers and everyone else. As it grows, it becomes an ecosystem that fosters adoption, collaboration, and contribution to the design system development process.

You can also use Bit to separate theses and styles from the functional components, and allow composable theming — so you can easily customize or change the design of a feature across the organization’s products.

Learn more: