How to Share Code Between Projects and Apps in 2018

DZone 's Guide to

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.

· DevOps Zone ·
Free Resource

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.

Sharing code between projects and appsShare 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.

Here is a React application on GitHub. As you can see, it contains 8 reusable UI components and 1 global css component which is used by the other components.

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:

React components collection with Bit

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:

React component with Bit

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

We use Bit ourselves for a verity of use cases: React components, Node modules, Utility functions, and even GraphQL APIs.

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

coding ,devops ,github ,open source ,programming ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}