Bit

Community • Docs • Video • Examples • Gitter • Blog

Bit is a Git extension for isolation and synchronization of reusable source-code components among Git repositories.

Isolate and define any subset of files in your repository as a reusable component. Tag cross-component versions, track changes and gain absolute control over your component dependency graph.
Sync components between repositories. Instantly get notified and merge component changes made in other repositories by leveraging integrations to Git's comparison and merge utilities.
Extend Bit to execute, parse, compile, distribute and test reusable components individually on top of an isolated component environment. Bit extensions can be used for packing a component, publishing it to package registries, parsing useful information and testing to make sure each component executes individually.

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

Use Cases

Share and sync UI components (React, Angular etc) between projects.

Tutorial: Bit with React.

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

Tutorial: Bit with Node.js.

Share individual components from a shared library to Bit's community hub and to the NPM registry (soon).

A React component Library shared as individually available components to the community hub. Soon, they could also be installed with the native NPM/Yarn client.

Tutorial: Bit with Shared Libraries.

Supported Languages

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

bit-javascript

Quick Start

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

Install Bit

See different install methods for different operation systems.

Initialize Bit

To start tracking even the most simple of components, we will need to create a workspace (local Scope) for your project. Use the local scope to organize and track the code components within your project.

To create a local Bit Scope for your project, run this command:

bit init

Create a Simple Component

A Bit component can be a React or Angular component or any other Javascript component. The simplest Bit component is a single file, with zero dependencies. Let's create a simple JavaScript module. Create a file called index.js and paste the following code in the file:

/**
 * Vaildates if input is string- throws exception if not
 * @param {string} name
 * @returns bool
 * @example
 * ```js
 * isString(str)
 * ```
 */
module.exports = function isString(input) {
  if (typeof input !== 'string') {
    throw new TypeError('Not a valid string');
  }
};

Let's track our component, and name it 'utils/is-string'.

bit add index.js -i utils/is-string

You can also use glob patterns to track a group of components together.

Now run a quick bit status command to validate that utils/is-string is being tracked.

Tag a Component

Now, let's Tag the newly tracked component. Tagging a component will lock all of its dependencies (in this case we have none), and create a version for the component.

bit tag -am 'initial version'

Another quick bit status command will show that the component is now staged, and ready to be exported.

Create a Scope

Components are shared into playlist-like collections called Scopes. A scope is a collection of shared components with a common theme or ownership. Scopes allow you to organize and maintain components in a single location, while individually installing and updating them. They also act as a registry for the components it hosts.

Scopes are super lightweight and can be set up on any server, in any location.

You can also freely host your Scopes on the Bit community hub, bitsrc.

For this quick-start guide, let's connect to to bitsrc and create a Scope.

Export Components

After creating a Scope, run the export command. This will publish your components and make them available to share in other projects:

bit export <username>.<scopename>

And you're done!
Browse your Scope and your different components which are now available for import.

You can check out an example or React movie-app components exported to bitsrc here.

Import Components

Bit enables you to import individual components to use in your different 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.

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

bit import <username>.<scopename>/utils/is-string

You can now use the component in your new project:

const component = require('./components/utils/is-string');
# 'components' is the default location for imported components

Updating Components

Components can be updated from any project which is using them.

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

Open the file you just imported.
Make any change in it.
Run the bit status command to check that utils/is-string has been modified.
Tag a new version for the component:

bit tag -am "updated component"

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 utils/is-string with the changes we've made from the consumer project.

Why Bit

Over the past 2 years, our team grew to include more developers working on more projects.

Over time, we found it increasingly hard to share our code and keep it synced between projects. Determined to avoid duplications, we considered many solutions from an arsenal of small repos and packages to shared static libraries.

However, issues such as publish overhead, discoverability, and maintainability prevented us from truly sharing and syncing our components as a team between our projects.

The idea of Bit is that we can keep our components as an integral part of our repository and still natively integrate them into other repositories, without forcing any source code changes.

You can think of Bit as a “virtual monorepo” for sharing and syncing components across repositories.

Using Bit, we were able to create node.js micro-services composed entirely of shared components and share our arsenal of React components across apps.

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

odedre/bit

Bit