Sharing UI Components to Build Consistent UIs Faster

How to share truly reusable components using bit.dev, to keep your UIs consistent and build faster.

Jonathan Saring
Nov 26 · 7 min read
The Bit workflow: Build, reuse and sync UI components

In today’s app development world UI components (React, Vue, Angular, Stencil etc) are the modular building blocks of our app’s UIs.

As modular units, our components can and should be shared between different projects (and team members) to speed development, reduce bugs, make our code simpler to maintain, and provide a consistent experience to our users across different screens and applications.

But, sharing reusable UI components can be easier said than done, without the right tools and knowledge for the job. So, I’ve gathered a few examples of useful ways to share UI components and reuse them across applications. I hope this helps, and please feel free to comment and ask anything. Cheers.

Contents:

  • Why is it hard to pack and reuse UI components?
  • Checking components for reusability with Bit.
  • Tracking files as components + automatically defining dependencies.
  • Applying a reusable compiler + building in isolation.
  • Versioning + exporting components.
  • Reusing and updating components.
  • Gradually building your UI library, as you go.

Why is it hard to pack and reuse components?

A component collection shared to bit.dev

Up until now, packing components forced developers to go through transpiling, bundling, legacy browser support, size, mappings, type detection and countless other optimizations. This can be enough to block the idea.

Traditionally, packing a component for reuse had to involve the splitting of the component from your app into a different reposiotry. Each component had to be boilerplated as a package, including manually defining dependencies etc. You’d also have to configure build and test steps for every component so it can run outside of the project. Every change required refactoring to the configurations of every component you share. This is a lot of work.

Today, there’s a new take on shared UI components called Bit (GitHub). Bit helps you gradually make your existing components reusable, automating most of the process and helping you learn what else is needed, and share them in a modular collection where your team can share and reuse them.

Then, it helps you distribute reusable components so that people can easily find, try and use your component in their code. Finally, it lets everyone colalborate by suggesting updates to the component right from their own projects, so that adopting the components become a simple choice.

Below I’ll shortly review this workflow and feel free to go ahead and give it a try for yourself. This same workflow works whether you have a UI library or not, as Bit does not “care” from which repo you share your components.

Making your UI components truly reusable

Bit helps you build more reusable components by giving you the tools to:

A) Automate most of the work in packing components, using features like automatic dependency definitions and easily-applied build configurations.

B) Learn the true state of each component’s reusability, by letting you test, build and render each component in true isolation outside of your project.

Short setup

$ npm install bit-bin --global
$ cd project-directory
$ bit init

Then, head over to bit.dev and quickly create a free account. Then, create a collection to host your shared UI components. Finally, run bit login to authenticate your CLI to your bit.dev collection:

$ bit login

Define and track reusable components

Example

. 
├── package.json
└── src
├── hello-world.js
└── index.js

Let’s use bit add to track the hello-world component by telling it which files are a part of this component:

$ bit add src/hello-world.js src/index.js --id hello/world 
tracking component hello/world:
added src/hello-world.js
added src/index.js

Now run a quick bit status to see that the component is tracked and do not require any additional files from the project:

$ bit status 
new components
> hello/world... ok

We now see that the component is packed with all the files it needs in order to execute. But, it doesn’t yet have a build step (compiling/transpiling) configured, which is necessary if we want it to run outside of the project.

Apply a reusable compiler

Let’s use Bit to import the React standard compiler into our workspace and apply it to the component so that it can build and run anywhere. If working with React TypeScript, just choose the matching compiler, and so on.

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

Cool. Now run bit build which makes sure that the component can build in true isolation from the project’s context, hence making it reusable.

$ bit build 

The component builds as a standalone unit and we now know that it can work out of the box in any new project, using its own defined build configurations.

The component is now ready to be versioned and shared! 🎊

Versioning and exporting components

In this case, let’s set a 0.0.1 version for the hello-world component:

$ bit tag hello/world 
1 components tagged | 1 added, 0 changed, 0 auto-tagged
added components: hello/world@0.0.1

Awesome. Now run a quick bit status to see that component is versioned and ready for export.

Note: You can add docuemntation for the component, which Bit will automatically extract and present in your bit.dev collection. Learn more here.

Finally, let’s export (publish) the component to your bit.dev collection!

$ bit export user-name.collection-name 
1 component exported to collection user-name/collection-name

Now head over to your collection and see the component. You can save examples in the component’s rendered sandbox, as explained here.

Reusing Shared UI components

When you share a component to bit.dev, it becomes available to consume in two ways. The first is to install the component like any other package from the bit.dev package registry, using your standard npm/yarn clients.

Example: installing a hero component using npm from the bit.dev registry

Note that you will only install (and get updates) for the specific component, so you can keep your app’s bundle-size lighter and your development fast.

The second way is to bit import the component into a project. This will bring in the component’s source code, while tracked by Bit as a component.

The great advantage of this workflow is that you can now modify the source-code of the component right from the consuming project (!) in order to make it easier to adopt the component. Then, you can tag the changes as a new version, and export them (given permissions) back to your collection- so that other projects can pull in the changes and merge versions of the component.

Gradually build your UI library, as you go

You can just continuously make components from your apps reusable, iterate on a short feedback loop to see if each component can build, test and render in isolation from the project, and share them to your bit.dev collection.

The next time you or your team member need a component, you can just quickly check if it’s there, ready to be reused or updated. If not, just write the component and export it to your shared UI component collection.

Within a short time, you should be able to increase the consistency of your UIs while speeding delivery through reuse. You’ll also find added values like making maintenance simpler through modularity, gaining easier onboarding for new team members and so on. Feel free to try it out.

Thanks for reading, cheers! 🍻

JavaScript in Plain English

Learn the web's most important programming language.

Jonathan Saring

Written by

Open Source @ https://bit.dev

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade