Sharing Components with Angular and Bit

An Introduction to Bit: Building and sharing Angular components

Photo by Alvaro Reyes on Unsplash

Why Bit ?

Bit is a tool that sits on top of tools we use every day such as Git and NPM that helps teams build components, test and render them in isolation, search and visualize them in a neat UI, and share them with other teams with ease.

Bit works well for small teams but excels for cross-team collaboration who work with multiple projects located in different repositories.

In fact, it helps scale projects built by different teams even beyond monorepo architectures; it allows us to build and sync components between multiple repositories, facilitating collaboration and agility across teams and codebases.

Modularity is one of the core concepts behind Bit : the idea is that you can ship many small pieces of code built independently rather than whole libraries, and focus on the single responsibility of each component rather than the global framework they’re part of.

Easily pack, publish and collaborate on individual components

Bit for Developers

Big companies have large numbers of teams and developers, and it is quite common that they end up working (and rewriting) similar components or utilities; products such as GitHub and NPM are the obvious choice for pushing and publishing code — but when it comes to visualization, discoverability, and deployment, they still lack the tools that can help teams share components and utilities with ease.

Whether you work in a large enterprise, or you are an indie developer building open-source code, you’re faced with some common challenges such as:

• Providing an easy way to install it
• Marketing it by making it easily searchable and discoverable
• Adding visual examples that help consumers understand use-cases
• Adding API snippets that help consumers implement the library easily
• Automate CI and CD

And that’s where Bit fits in: it can, in fact, help with all the points above.

… and non-developers

Bit not only helps developers build and share components — but also designers, product owners, and stakeholders by providing them with a user-friendly interface to search, explore and visualize the components stored in a collection.

The playground and live examples that can be added for each component are helpful for a number of reasons: they can be edited on the fly by designers, showcased during a presentation, cherry-picked during meetings, and so on.

The fact that components are presented visually and semantically, rather than as a list of folders and files, helps greatly non-technical teammates with searching and discovering them.

Creating an Angular UI components collection

Bit has recently added support for the Angular compiler. Let’s take a look at how we can integrate Bit with any Angular project.

Creating a Workspace

The first thing to do is to create a Collection , which is where you can publish and organize your collection of components and utilities.