Managing Code Components with Bit

By Jonathan Saring
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Managing code components with Bit

As the world moves to software architecture based on microservices and multiple repositories, the ecosystem struggles to keep code bases maintainable. From monoliths to publishing hundreds of micro-packages, solutions try to battle growing code duplications across repositories. Bit is a new OSS distributed code component manager built to make components reusable across repositories, and much more.

In this article, Bit team member Jonathan explains the idea behind this new approach to managing code, which has hit the ground running as one of the most popular repositories on GitHub.

The Problem with Code Duplications

Most developers are all too familiar with code duplications. Usually, these are the direct result of copy-pasting small code components and snippets across repositories. Sometimes, duplications are the result of stopping to reinvent small components time after time. As the use of microservices and multiple repositories increases, managing reusable components across repositories becomes a painful issue. Maintaining duplicated code snippets in multiple places becomes a growing headache, and breaking changes become an everyday trouble. This phenomenon touches everyone, including some of the leading JS open-source projects on GitHub. For example, here are 4 of the over 100 different implementations of a simple isString functionality in GitHub’s top 10K repositories:

implementations of a simple isString functionality in GitHub's top 10K repositories

The time invested in reinventing the wheel would probably have been better invested in breeding creation. The duplications across repositories (which are not a part of the same code base in this particular example) makes maintenance an odyssey.

To battle this problem, the ecosystem developed different solutions from gigantic monolith applications used in huge enterprises such as Google, Facebook and others and to community leaders publishing hundreds of components to package managers such as npm. Both solutions are not optimal for most people.

While the first has its pros and cons, it simply isn’t practical for most of us. Building and maintaining a giant monorepo application simply isn’t practical for most developers and teams. Using npm as a duplication free snippet base takes an incredible amount of time and effort, while having multiple shortcomings created simply because traditional package managers were not built to benefit from managing small components: runtime dependency resolution is slow, versioning is complicated, packages are hard to find, they don’t take care of CI, they require the creation and maintenance of multiple tools (Git, Packages, CI etc.) and add unnecessary weight and complexity. Practically speaking, most of us simply don’t have hundreds of components used as micro-packages.

Addressing the problem of making small components reusable requires a tool built specifically for this job; a tool allowing components to be make without overhead or initial configuration; a way to make sure these components are easy to find, and are maintained and taken care of throughout their entire lifecycle including simpler versioning, faster dependency management and even build and test execution. To achieve this, a new, open-source code component manager named Bit was designed from scratch, custom built to make small component reusable.

Bit: Distributed Code Component Management

Bit is an open-source code component manager written in JavaScript, yet designed to be language agnostic.

It makes code components such as functions, classes or even serverless functions reusable without the overhead of packages and with zero initial configuration. Creating a Bit component and using it across repositories saves the need to duplicate or re-invent components over and over again.

Bit uses a distributed Scoping system to store, organize and manage your components. Scopes benefit from managing small components by using simplified versioning, faster on-export dependency management, a semantic search engine and more. Scopes also take care of your component’s CI by building and testing components in an isolated environment. You can create a scope anywhere or connect scopes together to create a distributed network.

Bit in action

Bit in action

Reusable Bit Components

Bit components are the core entity handled by Bit. Design wise, they are the smallest functional implementation that handles a single responsibility. Much has been written about designing reusable components, like this great post by Addy Osmani.

The anatomy of a Bit component makes a big difference compared to a small package. The only mandatory file in a Bit component is the implementation file named impl.js. The implementation file consists the component implementation itself and its docs which are parsed to form the entire component documentation.

Example for a Bit component implementation:


/**
 * determines whether `val` is a reference
 * @name isString
 * @param {*} val value to be tested.
 * @returns {boolean}
 * @example
 *  isString('') // => true
**/
module.exports = function isString(val) {
  return typeof val === 'undefined';
}

Two additional files are optional and can be added to a Bit component:

  1. spec.js – contains the component’s unit tests, designated to be executed by the configured by Bit’s testing environment.
  2. bit.json – Configuration file for handling of dependencies, environment, naming conventions and more.

This design of a component makes sure that the bare minimum is required in order to create a Bit component. This helps break the barrier of extracting components from your code and making them reusable. Extracting a Bit component can take less than 30 seconds, which helps to achieve practical reusability.

Scopes Organize, manage, build and test your components

Unlike a Git repository, Bit Scopes do much more than storing and versioning components. They are a dynamic codebase responsible to end-to-end management of code components. Scopes are where components are stored, tested, built and integrate with each other.

A local scope can be created for a project with a simple bit init command. Components can be committed to your project’s local scope from your inline_components directory and then exported to a remote scopes. A remote scope can be quickly set up anywhere allowing the components it stores to be used across repositories and used to collaborate between team members.

Scopes use simplified incremental versioning to handle modification and updating of code components. An on-export dependency resolution improves performance while making sure your component contains the Bit dependencies it needs. These design choices were made to benefit from handling small components rather than larger multi-filed packages.

Scopes also take care of component build and test execution with a unique Bit component environment. As small components are building blocks, making sure they are working and tested can dramatically improve both reusability and maintainability for the entire application.

Scopes can also be connected together to create a distributed network. This is a practical advantage as much a philosophical one.

Conclusion

Bit introduces a new paradigm, one which could eventually help create a dynamic code base built using remotely managed building blocks. In its design, Bit was built to improve our current ecosystem today, but also to set a first step towards opening new possibilities. This is one of the reasons that, although written in Javascript, Bit is language agnostic by design. It is also why it was released under the Apache 2 License. The best way to learn more is simply to get started. Feedback and contributions are always welcome.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now