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.
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.
- 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?
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.
$ 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
Now, let’s use Bit to track a set of files in our project as components using the
bit add command. This will “tell” Bit to start tracking components in your workspace. It will also “tell” Bit to analyze each component’s dependencies and automatically create a
package.json for every component. Cool, right?
Let’s assume the following app structure with a single
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:
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
> 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 apply a compiler to the component so that it can build as a standalone unit outside of the context of our authoring project. Bit provides pre-made compilers with best-practices implemented for reusable UI components.
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
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
Next let’s tag a version for the component. Bit tracks the relationships between all components in th workspace, and lets you version (semver) and update individual components and their impacted dependants together.
In this case, let’s set a 0.0.1 version for the
$ bit tag hello/world
1 components tagged | 1 added, 0 changed, 0 auto-tagged
added components: email@example.com
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.
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 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
Through this workflow, you don’t just make it easier to isolate, pack and reuse components. You can also gradually build your own modular UI library without having to lose focus on delivery and make a big fuss about it :)
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! 🍻