Quick Front-End Integrations Through Components

Use “low-touch” component-driven integrations to help your team buildfasterandbettertogether.

Jonathan Saring

Follow

Mar 19 ·12min read

The recent Coronoavirus outbreak stresses the need for effective remote teamwork for front-end teams, while everyone is working from home.

Integrations between people and projects are a challenge for every organization. For teams that work remotely, it’s twice as challenging. Integrations should be made as simple and “low-touch” as possible.

Luckily enough, modern frontend is built with components. And, we can leverage Bit to achieve quick and simple component-driven integrations between teammates working on different projects.

Bit lets front-end teams expose components from each other’s projects and quickly use their APIs wherever they’re needed. It makes the process much simpler and more effective than before through a set of unique features and capabilities throughout the component’s lifecycle.

In this post, we’ll explain and demonstrate:

• How to quickly expose components from your project and let other teammates use their APIs in their own projects (no repo splitting).
• How these components can be quickly integrated into new projects using Bit’s ability to “source” components for local code editing.
• How your team can share all your components for reuse and expose their APIs through the bit.dev component cloud .
• And finally, how you can connect Bit.dev to GitHub and Slack to create one super-workflow for building with components together.

Feel free to try the hands-on demo tutorial below. And, you can check out this full 5 minutes demo video to see how a component can be fast exposed from one project and integrated into another with quick customizations.

Quick intro — why use Bit for component integrations?

Bit is the end-to-end toolset for building with modern components. It lets you build and share independent components across teams and projects.

Bit automatically places every component in a “Capsule” which is a bit like a Container for source-code components. Every Capsule automatically contains the component’s files, dependencies and build configurations. Each Capsuled component is independently versioned and exported to the component cloud .

Once shared to bit.dev , the component can be used right in any new project by installing it from the bit.dev package registry (npm/yarn clients) or sourced as source-code into a new project for quick local modifications.

Since Bit lets you build, share and integrate independent components, you can later suggest and get updates for the components you use. And, you can connect it to GitHub and Slack for a well-harmonized workflow.

Put together, these capabilities let your team quickly expose APIs from a given codebase and adopt them in other projects in a collaborative workflow. Bit also helps in documenting the components and making them discoverable.

Let’s see a real hands-on example together.

1. Step 1:Expose components from your project

So let’s say you have a React project where you’ve written a useful “ product-list ” component. Here is your application on GitHub:

Clone it from GitHub and head over the this app:

$ git clone https://github.com/teambit/remote-teams
$ cd remote-teams 
$ yarn

And here is what the component looks like :

Now, let’s say your teammate is working on another codebase or building another application.

They don’t even know you built this component, so when you learn they plan on writing it, you suggest they use your component instead. This not only saves time, but also helps in keeping your UI/UX consistent for users.

Right now, this component is internal to your own project. Let’s use Bit to quickly expose it as an API that your teammates can use in their work.

First, install Bit-CLI :

$ npm install bit-bin -g

Then, initialize a Bit workspace for your project (I’ve chosen Yarn as my package manager but you can just use bit init ).

$ bit init --package-manager yarn

Now Bit created a workspace for your project where it will track and manage components you develop or import into the project.

Next, let’s tell Bit that you want to isolate the product-list component located at src/components/product-list . We’ll use the bit add command to tell Bit it should isolate and track this component in the workspace.

$ bit add src/components/product-list # tracking component product-
list: added src/components/product-list/index.js added src/components/product-list/product-list.css added src/components/product-list/products.js

Now you can run a quick bit status and see if the component was successfully isolated and tracked in the workspace.

$ bit status # new components (use "bit tag --all [version]" to lock a version with all your changes)       > product-list ... ok

So far, we have provided Bit with the source file of the component. But in order to consume the files in other projects, the component needs to be built.

Bit is storing the source code of the component, but the code should still remain in your version control system (VCS) such as your Git repository.

Bit has a large collection of compilers that are open source and maintained by the Bit team. In addition, the community has created compilers that you can use by searching Bit collections .

For building the React component, you’ll need the React compiler .

Install the compiler and run this command inside the React tutorial repository:

$ bit import bit.envs/compilers/react --compiler# the following component environments were installed
- bit.envs/react@0.1.3

Now Bit “knows” about component’s files, its dependencies, and how to compile it. You can run bit build to verify it compiles.

Next, let’s tag a version for the component.

Versioning indepndent components is a very powerful feature of Bit, as it gives you modular control over developing, reusing and updating components. Learn more here: The case for indepndent component versioning

To version the component use bit tag as follows:

$ bit tag --all 0.0.1 # 1 component(s) tagged (use "bit export [collection]" to push these components to a remote") (use "bit untag" to unstage versions)  new components (first version for components)      
    > product-list@0.0.1

Now the component, which up to 2 minutes ago was completely internal to your project, is ready to be shipped out for instant usage anywhere else!

2. Share components in your team’s hub

So now our product-list component is all setup for sharing so that our teammates can integrate it into their own projects.

It’s very useful to have all your team’s components in one central hub, where everyone can easily add, find and use components. It’s also useful for controlling updates to independent components in one workflow.

Front-end teams face a unique challange: they need to collaborate on visual UIs! In Bit.dev, every component’s code is visualized and rendered for everyone to see.

Share your component into your team’s hub:

1. Quickly head over to bit.dev and create a free account .
2. Create a new collection and place it under your organization (create the org right from the “new collection” screen). Make it public for now.

Then return to your terminal and authenticate your local workspace to your bit.dev account:

$ bit login

Now, export the product-lis component to bit.dev:

$ bit export <organization-name>.<collection-name># exported 1 components to <organization.name>.<collection-name>

Now head over to your collection. It should look something like this :

Click on the component and head over to its page:

As you can see the page has a few main features:

• Component playground — quickly play with the code, see if it’s a good fit for your project and save examples.
• Install with npm/yarn- from the bit.dev package registry.
• Import with Bit — so you can source the component and edit the code right from a new project. It will still be managed and you can get updates.
• Bit extracts the API docs from the component and shows them.

With an organization account on Bit.dev your team can scale component-sharing while keeping components organized and discoverable.

It also provides useful features like:

• Semantic component search with visual preview examples.
• Automatic component labels.
• Search filters for component size, dependencies and more.

3.Integrate through components

So now let’s say your teammate is working on a different project, and they could really use the product-list component you just shard.

To simulate this, create a new React application:

$ 
 npx create-react-app my-new-app

Now view the installation pane on the component’s page :

You can use your npm/yarn client to install this component and use it right away in your new application just like any other package-based build-time integration. This gives you the power to quickly share components so others can use their APIs. When there’s an update, you can get the new version for that component — and nothing else.

But, Bit also provides one more feature which is a game-changer in making component-driven integrations a whole lot faster and smoother.

The bit import command brings in the actual source code of the component, with all it’s files and configs, into the new project. And, it will still be managed by Bit so you can save and export new versions, or get new updates on top.

First, init a Bit workspace for the new project:

$ bit init

You can use it like this:

$ bit import <organization.name>.<collection-name>/product-list # successfully imported one component 
- added <organization.name>.<collection-name>/product-list new versions: 0.0.1, currently used version 0.0.1

You get a message that the @react/core and @react/common are peer dependencies. This is ok, as your my-new-app project already contains them.

Here is what happened:

.bitmap
package.json

"@bit/
 <organization.name>.<collection-name>
 .product-list": "file:./components/product-list"

Start your application to make sure it still works. As you’ll see, no changes are required: Bit takes care of everything.

Modify the code to fit your new project — easy peasy!

Let’s modify the product-list component. Change the components/product-list/index.js to include the following method:

view() {
    window.alert('The product has been viewed!');
 }

Change the getProduct function in components/product-list/index.js to include the new button:

getProduct(product, index) {
        return (
            <div key={index}>
                <h3>
                    <a title={product.name + ' details'} href="/">{product.name}</a>
                </h3>
                <p>Description: {product.description} </p>
                <button className="btn" onClick={this.share}>Share</button>
                <button className="btn" onClick={this.view}>View</button>            </div>
        )
    }

Change the css file components/product-list/product-list.css to include a margin on the .btn :

margin: 4px;

Run the React application:

yarn start

The app is not yet changed. That’s because the Bit components are compiled by the bit compiler. In a separate terminal, run the bit build command to compile the changes. You should see that the compiler is installed:

successfully installed the bit.envs/compilers/react@0.1.3 compiler

That will be followed by a successful compilation of all of the files.

Run the my-new-app again and you'll now see the changed component with the view button.

In a real project, it is recommended to commit those changes to your GitHub repository.

Export the Changes

Next, export the changes done to the component back to bit.dev .

bit status

The product-list component was modified:

modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)     > product-list ... ok

Tag and export the component as a new version. By default this is a semver patch version:

$ bit tag product-list
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)changed components
(components that got a version bump)
     > <username>.
 <organization.name>.<collection-name>
 /product-list@0.0.2

Export it back to the collection:

$ bit export 
 <organization.name>.<collection-name>
exported 1 components to collection 
 <organization.name>.<collection-name>

Head to the component page on bit.dev . Here you can see that the component has a new version. The changes are also visible on the component playground.

4. Get Component Updates

In this last stage, you’ll import the changes to the original project. Switch back to remote-teams .

Import Changes

Run bit import to see if any components were changed (similar to doing git pull to check git changes).

We will see that the product-list component was changed and a new version exists:

$ bit import
successfully imported one component
- updated 
 <organization.name>.<collection-name>
 /product-list new versions: 0.0.2

The component is downloaded but is not yet changed. Check the workspace status, you will get the following:

$ bit status
pending updates
(use "bit checkout [version] [component_id]" to merge changes)
(use "bit diff [component_id] [new_version]" to compare changes)
(use "bit log [component_id]" to list all available versions)> 
 <organization.name>.<collection-name>
 /product-list current: 0.0.1 latest: 0.0.2

Checkout

Merge the changes done to the component to your project. The structure of the command is bit checkout <version> <component> . So you run:

$ bit checkout 0.0.2 product-list
successfully switched 
 <organization.name>.<collection-name>
 /product-list to version 0.0.2
updated src/app/product-list/product-list.component.css
updated src/app/product-list/product-list.component.html
updated src/app/product-list/product-list.component.ts
updated src/app/product-list/product-list.module.ts
updated src/app/product-list/products.ts

Bit performs a git merge. The code from the updated component is now merged into your code.

Run the application again to see it is working properly with the updated component:

yarn start

That’s it. A change was moved between the two projects. Your application is running with an updated component.

6.Connect Bit with Slack and GitHub for a super-workflow.

Bit.dev provides integrations to both GitHub and Slack. When you connect these three tools, you create a fluent and harmonized workflow

Bit.dev + GitHub Integration

When creating an organization on Bit.dev you can connect it to your GitHub organization. When you do, the all-mighty BitdebBot kicks in to make sure every single repository always gets the latest component versions.

When you bump a component version on bit.dev, the bot will create a PR in every GitHub repository that consumes this component!

And, you can view and learn exactly which PR was accepted in which repository, to easily make sure they are all always up-to-date.

Learn more here:

Bit.dev + Slack integration

You can integrate your Bit.dev org to your team’s slack workspace.

when a component gets exported, your team receives a notification that includes the user’s name, the type of action (export), the number of components related to that specific action and the target collection.

When importing, the same notification shows but with the origin collection.

Simple, and very helpful to make sure everyone stays synced.

We’re here to help!

At this time the Bit team is helping out many teams transition to fully distributed work through components. Each team has its own unique challenges, from human habits to different stacks and toolsets.

Bit’s dedicated architect team is here to listen and help build the optimal workflow for your own team’s needs, so please don’t hesitate to get in touch.

• Join Slack channel
• Contact support
• Learn more

Fee free to check it out and see if it can be useful for your work. Happy coding!