Bit

Community • Docs • Video • Examples • Gitter • Blog

Bit - Share components directly from your project's source code without changing it, organize them in curated collections and sync them in all your projects.

Bit cuts the time and overhead for sharing and managing components as a team, eliminates the maintenance overhead of additional repositories and packages for sharing code, helps to keep your code DRY and saves your time & effort for building new things.

• Isolate and share components directly from any path in your repository, without changing your source-code.

• Organize components in curated collections on the cloud (or on your own server) to make them discoverable for your team.

• Collaborate and develop on components from different repositories in a distributed workflow, while keeping a single source of truth.

• Install components using Yarn or NPM, even if shared with Bit.

• Learn and control exactly which components are being used by who and where, and make multiple component changes in multiple projects without breaking a single one of them.

• Extend Bit to visually render, test, compile and parse useful information for your components without having to spend hours writing documentation.

Bit is a collaborative open source project, actively maintained by a venture-backed team and used by different organizations and OSS communities.

Use Cases

UI / Web components: Organize, share and manage React, Vue and Angular components.

• Tutorial: Bit with React.
• An example React app with 9 React components shared and made individually available with Bit.

Node.js modules: Share and sync Node.js modules between micro-services in a multi-repo architecture.

• Tutorial: Bit with Node.js.

Shared Libraries: use Bit to easily turn any shared-lib into a dynamic collection of individual components in minutes.

• Tutorial: Bit with Shared Libraries.

Additional use cases: GraphQL APIs, Serverless functions, Utility functions and any encapsulated, reusable functionality.

Supported Languages

Bit's design is language agnostic. Still, it requires language-specific drivers for language-sensitive features (binding etc):

• bit-javascript

Quick Start

Let's add Bit to a repository to isolate and share components.

Install Bit

npm install bit-bin -g

See additional installation methods.

Initialize Bit on a repository

To start isolating components in your repository (UI components, small modules, reusable functions etc), we will need to initialize Bit for your repository.

Go to your repository root directory and execute bit init.

MacbookPro:src bit$ cd my-repository
MacbookPro:src bit$ bit init
successfully initialized Bit on the repository.

Create a component collection

A scope is a collection of shared components with a common theme or ownership. Scopes group and organize components together, so that they can be discovered and synced in additional projects.

Let's create a free Scope on the Bit community hub. You can also think of it as your "component cloud".

Scopes are lightweight and can also be set up on any server, much like Git repositories.

Isolate and track reusable component(s) in your repository

Bit enables you to isolate and track any subset of files in your repository as a reusable component.

Let's isolate the components button, login and logo in the following project's directory structure.

MacbookPro:src bit$ tree . -I node_modules
.
├── App.js
├── App.test.js
├── components
│   ├── button
│   │   ├── Button.js
│   │   ├── Button.spec.js
│   │   └── index.js
│   ├── login
│   │   ├── Login.js
│   │   ├── Login.spec.js
│   │   └── index.js
│   └── logo
│       ├── Logo.js
│       ├── Logo.spec.js
│       └── index.js
├── favicon.ico
└── index.js

4 directories, 13 files

To isolate and track these directories as reusable components, lets use the bit add command.

This command also accepts a glob pattern, so you can track multiple components at once.

In this case, we have 3 components in the "components" directory. Let's track all of them. We'll also use the bit tag command to lock component versions and dependencies in place.

bit add components/*
bit tag --all

Now, let's share these components to the Scope we created on the Bit community hub.

bit export {{owner}}.{{scope}}

That's it. Once done, you will see your components individually available here in this Scope. Browse and take a look.

For additional usage examples click here.

As an example, here is a React app repo and a matching Scope, where its different components are shared.

You can also create an empty component

touch empty-component.js
bit add empty-component.js
bit tag --all
bit export {{owner}}.{{scope}}

Import Components

Bit enables you to import individual components for a Scope, and keep them sync between projects. You can install a component as an application-part in any destination on your project’s file system.

Let's import the components we just created to a new project.

1. Create a new directory for the consuming project.
2. Initialize a new scope using the bit init command.
3. Import the component:

bit import <username>.<scopename>/components/button

You can now use the component in your new project:

const component = require('./components/button');

Updating Components

A component can be updated from any project using it.

To update a component, simply change the code from inside your project's context. Then tag it again, and export it back to your Scope as a new version of your component.

1. Open the file you just imported.
2. Make changes.
3. Run the bit status command to check that components/button has been modified.
4. Tag a new version for the component:

bit tag -am "updated component"

5. Export the new version of the component back to the Scope:

bit export <username>.<scopename>

Now you can go back to your browser, and see that there's a new version for components/button with the changes we've made from the consumer project.

• You can find the full getting started guide here.
• You can find a list of command examples here.

Motivation

Every day, more software is being built with smaller, encapsulated and reusable components. From UI and Web components to reusable functionalities, GraphQL APIs an even serverless functions, smaller components are the building blocks of our future software.

The way we share code between projects and people was designed for larger projects. As a result, when working with smaller components we still have to choose between cumbersome shared libraries or an arsenal of micro-packages. Both suffer from the same problems we had while using music CD-Roms before our iTunes playlists: they require great overhead, they are hard to change and maintain at scale and they make it hard to discover and use single components. As a result, we often write more of the same things or duplicate code between projects.

Our vision is to enable any developer to easily share, discover and compose components together in order to build any software application. We believe that through powerful and effective experience for modularity, sharing and collaboration we can speed and improve the way we build technology.

Although it is a work in progress, feel free to get started. Learn more on Hackernoon: "How we started sharing components as a team".*

Contributing

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

See Contributing.

Feedback

Feedbacks and questions are more than welcome via Bit's Gitter channel.

License

Apache License, Version 2.0