Sharing Components with Angular and Bit

An Introduction to Bit: how to easily share and collaborate on individual Angular components.

This post was originally published on "Bits and Pieces" by Giancarlo Buomprisco

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.

Creating a Collection with Bit

Once you created the workspace, you’ll be redirected to the collection’s page. Make sure you add license and copyright information so that the consumers of your library will be aware of the limitations they have to use and customize your code.

In order to demonstrate the process, I will be adding to Bit one of my side projects that I started long ago while learning Angular, ngx-chips.

Installing Bit

The first thing to do is to install Bit’s CLI. In order to install Bit globally, we use the following NPM command:

$ npm i bit-bin — global

Initialize Bit in your project

Navigate to your project in your terminal and run the following commands:

$ bit init
-- reply command line prompts

$ bit login

Adding the Angular Compiler

In order to build the components, we need to the compilers by running the following command:

$ bit import bit.envs/compilers/angular --compiler

Under the hood, just like the CLI, Bit is using the library ng-packagr.

Tracking components

In order to tell Bit what components to import, we need to explicitly add certain paths that Bit will start tracking.

Given the structure of my component, I used the following command:

$ bit add modules/* --main modules/tag-input.module.ts --id tag-input

Which means, we track every file within the folder modules and the entry point, which for Angular components will normally be an Angular module (at least until Ivy comes?).

Also, we provide an id which I named tag-input.

If you have a more standard project structure with the CLI, you probably want to run something like:

$ bit add projects/<lib-name>/* --main projects/<lib-name>/src/lib/<lib-name>.module.ts --id <lib-name>

Creating a component and syncing it with Bit

Once you’re happy with the component to be exported, it is time to sync it with Bit. The first thing to do is to create a new version, which we need to provide to the command. As a result, Bit will tag every component in the collection with the version number provided:

$ bit tag --all 0.0.1

And after that, you can sync your local work with Bit, which will also publish the component to the Bit’s registry where it can be imported by Bit or installed using NPM.

$ bit export gc_psk.ngx-chips

The component is now exported and ready to use. Before it was published, Bit also ran a remote CI that built the component and ran the tests to make sure that everything is OK.

Installing the exported component in your project

Once the component is exported, we can start using it in other projects by installing it from Bit’s registry.

For users who do not wish to signup to Bit and log in (as shown above) a configuration of Bit as a scoped registry is needed:

$ npm config set '@bit:registry' https://node.bit.dev

Bit’s interface will show us the available options we can use in order to install the package. In fact, we can install it via NPM, Yarn or Bit’s command.

For example, here are the commands I can use to install the component I just exported (of course, you only need to run either of them):

// NPM
$ npm i @bit/gc_psk.ngx-chips.tag-input

// or Yarn
$ yarn add @bit/gc_psk.ngx-chips.tag-input

// or Bit
$ bit import gc_psk.ngx-chips/tag-input

We can now navigate to the Bit hub and play with the integrated IDE for providing meaningful examples that can show how the component work and how can be integrated into a project.

Exploring Bit’s Platform

As soon as we land on Bit hub, we can start playing with the IDE and provide meaningful representations and variations of our component.

User Interface

The UI is really clean and usable.

There’s a small overview of the package, instructions on the installation, a description and tags that help with discovering and understanding what the component does.

The main tabs allow us to:

• visualize the first example in the playground

• explore the code related to the component in full

• see what other libraries the components depends on

• the output that the CI will generate when the component was built

Playground

The playground is very powerful and allows to install external dependencies, create multiple files, duplicate a snapshot of an example, and so on.

As you can see in the image above, the IDE shows an error, and that’s fine: we’ll fix that.

Normally, when working with Angular, in order to use a component we import the module in which it has been defined.

In this case, the module is called TagInputModule, so I update the code with the correct module name, and I add the component to the template of the AppComponent.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TagInputModule } from '@bit/gc_psk.ngx-chips.tag-input';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserAnimationsModule,
    CommonModule,
    TagInputModule,
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Similarly to tools such as Storybook, you can create multiple versions of your components so that users and consumers can both see how the component can work.

Final Words

Bit is an extremely useful tool that provides large teams, or even single-person projects, to build and share components in a new way.

I hope this article provided clarifications on what Bit can do for you and the pain points it can help with. The Bit platform uses an open source and has a free-tier you can use, which is ideal for small startups and indie open source creators to get started.

I will be moving more of my open-source libraries to Bit which will give me the possibility to write more about my experiences with it. Stay tuned!

Resources

• Angular Guidelines

• Installing Bit

• Bit Best Practices

If you need any clarifications, or if you think something is unclear or wrong, do please leave a comment! Feedback is always welcome.

I hope you enjoyed this article! If you did, follow me on Medium, Twitter or my website for more articles about Software Development, Front End, RxJS, Typescript and more!