How to Avoid Duplicate Code with Git+Bit

Leveraging a Git+Bit to scale code sharing, speed development and improve maintainability for your codebase.

Jonathan Saring
Bits and Pieces

--

Duplicate code is one of those phenomenons we tend to underestimate until it’s too late. Given the overhead around package managers and cross-project code sharing, we often choose the path of less resistance in the short-term and pay the price ten-fold in the long run.

In this post I’ll show you how using tools like Bit you can share more code and reduce around 80–90% of the code duplicated across your codebase.

By reducing code duplications you can save precious development time, increase dev velocity, make your codebase easier to maintain and develop, reduce the weight and complexity of your apps, and give a better experience to your users. Let’s get started.

“ For some 20 members dev-team, which asked for our help, we found that sharing 32 components eliminated over 100K duplicated code lines in their codebase…”

The overhead of managing shared code

The main reason for duplicating code is probably the overhead around publishing and working with many packages, even at small scale

We simply can’t stop and bother to split our repository + boilerplate + publish a new package for every small function, component or module we need to reuse. If we did, we’d never get the job done on time.

As a result, we often end-up writing (or copy-pasting) the same code that already exists in other projects, or was already written by our teammates. This, in turn, makes our lives harder in the long-run as we end up having to maintain and make changes to multiple instances of the same code.

Over time, as our codebase grows and new team members get onboard, this becomes a very painful problem and scaling issue. Over time, less code sharing means slower innovation and less delivery to production.

Using new tools like Bit we can eliminate nearly all the overhead around codesharing, and make it easier to control and sync changes. Here’s how.

Changing the equation

The key to solving this problem is this: make it easier to share code so that people can actually do it every day. Otherwise, “getting the job done” will usually prevail over what’s healthy for your codebase.

In cognitive psychology it’s called the “Time Preference Bias”.

In programming it’s called “let’s copy-paste now and worry about it later”.

The fact is, code reuse can’t be enforced unless it’s practical.

For most teams, the overhead around packages (repo-splitting, boilerplating, publishing, making changes…) is simply too much to be practical at scale.

To break this equation and allow massive code-sharing in a managed and scalable way, Bit was released to GitHub in 2018.

Enter the age of shared components

Bit is an open source project and web platform, built to turn software development into a composition of shared components and modules.

Bit makes it super easy to isolate components from any project in your codebase, turn them into an API and use them to build new projects and apps (effectively turning any repo into a virtual “monorepo” without changing it).

When talking about “components” we refer to pieces of source-code which are basically files in the project. They can be UI components, Node modules, Utility functions, Serverless functions and more.

Bit gives different team members the option to develop and make changes to components from different projects, extending Git’s workflow and creating a faster and more collaborative workflow for maintaining shared code.

To eliminate the short term overhead around code-sharing, Bit doesn’t require that you create new repositories, configure new environments, define dependencies or work hard. Instead, you can seamlessly isolate parts of any existing repository as components, and let Bit do the heavy lifting.

Then, your components can be shared to the cloud, where they are organized in a visual collection for your team to discover and choose from. Each component is presented with a live playground, test results and more.

a React “hero” banner component with Bit

Components can then be installed in other projects using your favorite package managers, which effectively means you can create hundreds or thousands of packages in a matter of minutes if not seconds.

Bit also lets your team make changes to the shared code right from any end project it’s used in. This is done by importing the component into the project, and continuing to develop it from that project.

Watch a short tutorial for Bit with React components

When a team uses Bit to share code, it effectively creates a “Lego Box” of the reusbale code components they own . Then, they can share them and collaborate to build applications and projects faster.

Here are a couple of examples.

As a result, more code is shared and less code is duplicated. Existing duplicate code can be gradually turned into shared components instead of un-managed duplications. New modular components and modules can be shared immediately as they’re created, and won’t be duplicated in the first place.

Into the future

The age of code components it just beginning.

With an explosive progress in the way we build software, modularity takes center stage. Technologies like React, Docker, GraphQL and more are ground breakers that lead the way into more modular composition of software.

Modularity can and should be taken advantage of to also breed reuse and collaboration, instead of writing the same code over and over again.

Given the right tools for the job, and with the right API-first culture and state of mind, we can write more reusbale code and at the same time share it across projects, teams and even members of the community across the world.

Feel free to give it a try and get started.

--

--

I write code and words · Component-driven Software · Micro Frontends · Design Systems · Pizza 🍕 Building open source @ bit.dev