What is Bit?

What is Bit?

Bit is a collaboration platform for managing discrete components. Bit fits into the javascript eco-system to streamline components sharing by providing tools to:

  1. Export and import discrete components instead of a whole project.
  2. Discover and view live components
  3. Support the full life cycle of components including - building, testing, and rendering.

Why Bit?

Components are the building blocks of Modern web architectures are built with components. Encapsulated and reusable components with focused and well defined APIs are the building blocks for constructing software applications better and faster.

The major frontend frameworks, React, Vue, and Angular all share the concept of using components based architecture to compose state-of-the-art applications. Even the browsers themselves are now supporting components as an inherent feature by supporting the Web Components standards.

At the same time, Version Control Systems (VCS) and package managers are still revolving around the concept of projects. Each project is a single VCS repository. VCS repository management requires a substantial overhead. As a result, organizations are aggregating multiple components, and sometimes multiple projects, into a single VCS repository.

A typical example of a single repository holding multiple components are shared libraries such as Bootstrap or Material UI. Similarly, organizations manage their design systems in a single code repository.

The result is a complete discrepancy between producers and consumers. The components producer is storing all the components in a single repository and a single package. The consumer of the components only needs a subset of the package.

Bit bridges this gap. Bit adds a layer on top of existing tools for destructing repositories into discrete components with their lifecycle.

Bit Component

Inside a repository, all files are made equal. There is no semantic definition of a component, aside from conventions of directories and files names.

Bit adds the mapping between the component as a logical unit with a defined and specific functionality and the files that comprise this functionality.

Bit Component

Dependencies Management

Components do not exist in a vacuum. Components are built from other components and depend on functionality provided by other components.

Bit calculates the dependency graph per component. Understanding the intra-relationships between components enables the transferring of a component from one project to another.

Packaging Component

The specific content of a bit component varies according to the specific framework. It may hold a single plain javascript file with a single function, React or Vue component, an Angular module or a web component.

The modern frameworks require that each component goes through a build process to be usable. Good software practices also suggest unit testing for each component to validate its functionality.

In addition to the source code, Bit retains information about the component metadata: the source code, the dependencies graphs, and the tools used for building and testing the component.

Working With Components

Referencing components as logical units and not just a set of files enables developers to move components around. The component’s isolation layer segregates it from its original project and makes it usable even if the structure of the receiving project is different from the original one.

Bit Workflow

Add

An add command initiates a Bit component’s lifecycle. Bit component’s index is now tracking the files that comprise the component.

At this point, Bit can verify the graph dependency of the component. Bit can also associate the component with utilities - compiler and tester - and start building and testing the file.

Tag

When a component is ready to be shared with others, the developer tags it with a version number following the semver conventions. Bit stores the snapshot of the component’s source code and can now notify on any changes that were made to it.

Export

The developer can export a tagged version of the component to a centralized server. Organizations can have their central server or use bit.dev server for storing components.

A component exported to bit.dev also has a playground where the user can see a live version of the component and interact with it.

The component is now available for consumption by other developersin one of two ways: install or import.

Install

Use npm or yarn to install the component, like any other package. The installed component resides in the node_modules folder. The installed component has the built files (e.g., the dist folder), so it is ready for consumption.

Import

Developers may want to modify the component source code, for fixing a bug or changing the functionality. Developers import the component to their project and apply their changes.

Even if the component is imported and changed inside the project, it still receives all the modifications made to the original component.
A developer that has permissions to change the component can now tag and re-export their changes to the component. The other component’s consumers get the updates for the specific component only.

Is Bit the same as?

Is Bit the same as Git?

Bit loves Git. Just like Git, Bit is a distributed tool. There are lots of similarities between Git workflow and Bit workflow.

Bit does not require Git to exist in the project, but in some cases, such as in code merging, Bit uses Git’s functionality to perform these actions.

However, Bit should not replace Git in project development. The project’s code should remain in Git. Also, Git should track changes made to components exported to Bit.

Is Bit the same as NPM or Yarn?

Components published to Bit are built and reside in an NPM registry. That means that NPM and Yarn can install Bit components like any other packages.

The only requirement is that the .npmrc configuration has a reference to the @bit scope name. The registry configuration tells NPM and Yarn where to find Bit components.

Is Bit the same as Storybook?

Storybook is a fantastic tool for local components development. However, Bit goes beyond Storybook and focuses on component collaboration and discovery.

The collections exhibition on bit.dev let developers showcase components that reside in different repositories and projects. Developers can build live examples on the fly, without changing the project’s code.