Reusing UI Components: It’s Not That Hard – Hacker Noon

How to leverage Bit+NPM to simplify UI component sharing, reuse and collaboration.

When working with UI components, reusability across projects and teams is often the key to faster development, and React components published from it.

Instead of forcing you to refactor your code or split repositories to publish packages, Bit lets you seamlessly isolatecomponents in any existing project.

This is done using the bit add command to point Bit to the sets of files you want to reuse. When Bit identifies the components, it will automatically detect their dependencies so that you don’t have to configure anything.

Then, you can add pre-made build + test environments (or create your own) and lock a version for the components using bit tag. All that’s left is to publish the components using bit export and that’s it.

All the components from the project are now available to reuse and install with NPM, or to consume via bit import to develop them from any project.

This means 0 refactoring, 0 code or file changes, 0 configurations and no manual dependencies definition. While eliminating the overhead around publishing the components, you can scale component reuse.

2. Discoverability and teamwork

Once exported, all the components are organized in the cloud to be made more discoverable than they would have been with NPM alone.

Here are a few key features to help find and navigate components at scale:

Collections: Component can be organized into collection by theme, team, project or anything you’d like.

Visualization: UI Components (React for now) can be rendered so that you can play with the components and choose with your own eyes.

Test + Build results: Bit builds and runs tests for your components outside of your project, to make sure they’re battle-ready. The results are are presented as a useful indication that it works and in what cases.

Auto-parsed docs: Bit will automatically parse and present docs and examples from the code itself using .md files and jsdocs.

As a result, and combined with Bit’s team managing features, you can more easily find and manage the components you share, their quality and so on.

3. Collaborative workflow: 2-way development

Another useful feature of Bit is that apart from installing the components with NPM/Yarn, you can also use bit import to source the components in any project using them(!).

This means that when a component needs slight improvements or modifications, you can simply import it into the consuming project, make the changes, and share the new version back out to your team’s collection.

Then, if you choose to do so and have the right permissions, you can update the component in any project it’s in, including the original repository from which it was shared.

Changes can be merged between projects using Bit’s extension of Git’s merge utility, which means the sync process across projects is smooth and fluent.

When a team or several teams are working together, this distributed workflow makes development and maintenance much faster over time. So far, ~75% of the thousands of developers using Bit since Jan 2018 prefer importing the components over installing them as packages.

What’s next

Bit + NPM is a useful workflow for effective sharing and collaborating on UI components across projects and teams. Bit isn’t limited to UI components, so the same workflow works for Node.js modules, pure JS functions and more.

Future roadmap includes features to increase discoverability even further, a smart event-driven update mechanism, and support for more languages.

Bit is open source, and is being constantly maintained and developed. Feel free to give it a try, suggest feedback, contribute or extend it yourself.