How to Share Code Between Projects and Apps in 2018
Get a taste of how to share code across repositories with Bit, an open-source technology for sharing components between repos.
Join the DZone community and get the full member experience.Join For Free
Sharing code sounds simple, but it can be much trickier than it sounds.
Common components of code such as utility functions (e.g. user authentication) or common UI components (such as React and Vue components) are often needed in more than one repository.
However, the overhead of sharing this code in a managed workflow can be overwhelming, as you would have to create new repos for these packages, manually make changes to small components across repos, and quickly lose control over their maintenance.
Using new technologies like Bit, components can be easily shared directly between repos and projects while easily developed and updated from any of them.
Share Components Directly Between Projects
Common use cases can be sharing code between back-end and web or mobile front-end projects. Another use case can be sharing UI components between a few different applications.
Let's see an example for the later, which works just as well for any other use case.
With NPM alone, you'd have to create and maintain a new repo and package for each of them, or group them into a shared library which will couple all other projects to its development.
As you can see, the "with-bit" branch contains the same project, only Bit was added to the repo. Once Bit was added, it was used to seamlessly isolate these components from the project, while isolating their dependency graph and tagging a version for the components - all without changing a single code line in the repo or creating a new one.
Then, the components were shared to a remote source of truth on Bit's free hub - called a Scope. Here is the movie-app scope created for these components:
As you can see, they are all organized in the Scope and presented with visual information such as live rendering, test results, examples and more to provide better discoverability for team collaboration. Here is the React Hero component as an example:
Now comes the really awesome part.
Any component shared to the hub instantly becomes available to install with NPM and Yarn in any other project, but also becomes available to import with Bit so you can continue to develop it from different projects at the same time!
How is that possible?
Since Bit decouples the representation of components from your projects' file systems, it can track the components between projects even if they are actually sourced in their repos.
In order to modify a component all you have to do is import it into a new project, make changes, and share the new version back out (which can take seconds) - and choose to update and sync the changes across your projects.
This means that code sharing doesn't require setting up new repos, and also doesn't force you to make changes from the original repo itself. Instead, you can share multiple components from any project in a few minutes without refactoring anything, and evolve them from any other project while keeping changes synced.
Use Cases in the Wild
Other teams use it in many interesting ways, from breaking down shared-libs into component "playlists" to syncing common back-end code between web and mobile apps and more.
Its abstraction leaves it up to you to find where fast and simple code sharing can become most helpful, and can always discover new ways to use it.
One Last Thing
We believe that much like how organisms evolve, code should be written once, evolved over time and used to build new things. In that spirit, Bit itself is also open source so feel free to get started, contribute or suggest feedback.
Opinions expressed by DZone contributors are their own.