The Story of how we share and sync our components and modules between projects as a team using a tool built for the job called Bit. The Story of how we share and sync our components and modules between projects as a team using a tool built for the job called Bit. Bit How we started sharing code as a team Sharing code is hard. Even for teams working with reusbale UI components such as React components, achieving true reusability is a challenging. is hard React achieving true reusability During the past 2 years, our team grew to include more than 15 developers working on multiple projects. Among other things, we are building a web app using Node.js micro-services and React UI components. web app With every new feature and every new member joining our team, we found it harder to share code and keep it synced between our projects. Determined to avoid duplications, we considered all solutions from Submodules to Lerna. However, issues such as publish overhead, discoverability, and maintainability difficulties prevented us from successfully sharing code at scale. Finally, we decided to build our own solution; an open-source project named Bit which turns components into building blocks which our team can organize, share and sync between our project. Here is what we learned. open-source named Bit Bit - Share and build with code components_Bit makes it fun and simple to build software with smaller components, share them with your team and sync them in your…_bitsrc.io Bit - Share and build with code components Bit - Share and build with code components _Bit makes it fun and simple to build software with smaller components, share them with your team and sync them in your…_bitsrc.io Looking for a solution At first, we considered releasing our different components and modules as an arsenal of micro-packages to NPM. However, the overhead of publishing and maintaining changes across dozens of repos made us quickly drop this option. We also considered Lerna which is great for publishing multiple packages from a single repository. This solution had two major problems for us. Lerna The first was the fact that we would have to refactor our codebase into several monorepos just to share code. While monorepo can be great for some usecases, we needed a better way to share code without forcing a restructure. The second problem was that we would still have to manually maintain dozens of packages within that repo, including their configurations and complicated dependency trees. Every change would still mean making changes across different packages in the original repo (and it’s owners). Since shared libraries wasn’t much of a solution either, we came to realize that we needed a better way to share our code between our project. We thought of this solution as an “iTunes playlist” for our components, which will make it easy to discover, share and develop them from different projects while keeping changes synced across our codebase. So, we decided to build Bit. Here is how it works. Bit Sharing components directly between projects Bit’s concept is rather simple. Before Bit, we had to create a new repository and publish a new package for every piece of code we wanted to share. Making changes to the package will also have to go through that repo. Bit’s Splitting repos just to share code With Bit, you don’t have to split repos to share code. You also don’t have to restructure out existing project’s codebase (example). example Instead, you can point Bit to parts of any repo we would like to share, use it to automatically isolate them (Bit will define their file/package dependency tree) and share them to a remote location called a Scope (example). example This will not change the existing repo’s structure at all, and it takes literally seconds as Bit will define the dependency graph and all build / test environments can be simply added to the components before sharing. build / test environments Sharing components with Bit From there, these shared components can be easily discovered and installed in other repos using NPM (and Yarn). When a change to a component is needed, you can simply use Bit to import it’s actual source code into any project you’re working on, make the required changes, and share the new version (to the same Scope or a new one). import When you share changed code back to your Scope, you can even eject it to become a package dependency for your project again. eject When a component is changed, Bit keeps it in sync across projects with an event-driven customizable update strategy (still under work). I can suggest and receive modifications from my team members, see if the tests still pass and easily handle dependencies to make vast changes across my codebase. Example with React components For example, here is an app with React movie-app components. Using Bit (and without creating new repos) we shared its components into this Scope. here is an app this Scope As you can see, it contains a hero component which some of the guys on our team might want to use for different projects. hero component Discoverability is enhanced with a built-in search engine and visual UI features for the components, from rendering to test results (which Bit runs in isolation) and auto-parsed docs & examples. Any team member can easily find this component, use in their projects, make necessary changes right from within that project and sync them between their repos. We’ve been using it ourselves with over 500 components and modules. Conclusion A demo of Bit (without the NPM workflow) Bit was born from our own experience of years aspiring to build software with better modularity. It’s being used by our team for over 10 months, and by additional teams and libraries every day. Bit Using Bit, we were able to effectively kill the overhead of sharing code between our repos and projects. We made our shared code organized and discoverable for our team, cut down the number of repos to maintain and easily collaborate on the development of shared code from multiple ends. After being put to work for a few months, Bit helped us to create a unified and organized knowledge base of our components and share them across projects. It’s a community collaborative project, built to make code-sharing both simple and effective. You are welcome to try it out, suggest feedback and help out! try it out help out Bit - Share and build with code components_Bit makes it fun and simple to build software with smaller components, share them with your team and sync them in your…_bitsrc.io Bit - Share and build with code components Bit - Share and build with code components _Bit makes it fun and simple to build software with smaller components, share them with your team and sync them in your…_bitsrc.io Learn More Monorepos Made Easier with Bit and NPM_How to leverage Bit + NPM to go monorepo without the overhead._blog.bitsrc.io Monorepos Made Easier with Bit and NPM Monorepos Made Easier with Bit and NPM _How to leverage Bit + NPM to go monorepo without the overhead._blog.bitsrc.io How To Share React UI Components Between Projects And Apps_How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io How To Share React UI Components Between Projects And Apps How To Share React UI Components Between Projects And Apps _How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io 5 Tools For Faster Development In React_5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io 5 Tools For Faster Development In React 5 Tools For Faster Development In React _5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io

5 Practical Ways To Share Code: From NPM To Lerna, Git Submodules and Bit

I write code and words. Learn about Bit: github.com/teambit/bit

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How We Started Sharing Code Between Projects as a Team

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Manage Reusable UI Components

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

How to Manage Reusable UI Components

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps