Story of a Component and a Developer’s Adventure using Bit

Ada works as a React developer in a tech firm where they provide solutions for travelers, they have an app where travelers, hikers can look up their places of interest and it shows them high tour points from the position to the tour point relative to their current location.

It happens that Ada built a component that that marks the direction of a point on the Map to another point. She shows it to her fellow workmates in her team and they were like

“Wow!! That’s lovely. Can you share it with me?”

“Of, course” she responds

Now, she tries sharing the component, but she is faced wih a serious problem.

“How do I go about this?”

She has different options:

Copy and Send the component

Ada can copy the components and send them over to her teammates. But that’s not so efficient. If she makes a modification to the components, she will have to re-send the files over again. And her teammates would have to delete the previous files and paste the newly modified ones.

Share with Git and NPM

Copying and pasting are time-consuming and very tedious. She may try to share the files with NPM. So her teammates can simply use Git to install the components from NPM.

She will have to create another project for the component, a React library project.

She will initialize another Git repository, install the necessary tools like Rollup, to enable her to compile the component. Build the component and publish the library.

The overhead here is that she is forced to create another repo for the component and add it to her list of repos to maintain. If she comes up with another component her teammates like she will have to create another repo and share the component to NPM.

Share with Bit

Somehow, she hears about Bit, a cloud platform that enables one to share components out from their project without an extra Git repo(s).

Ada smiles because this is what she has been looking for. She looks up the Bit docs and finds out that it is super easy to use it.

She fires up her dev environment, installs the Bit CLI, and initializes a Bit environment in her project.

npm i bit-bin -g
bit init

Then she adds the component’s entry point using Bit’s add command. Let’s say the project looks like this:

trv-react-prj
    src/
        - /utils/
            ...
        - /map/
            ...
        - ...
        -index.js
        -App.js
    - package.json
    - bit.json
    - .bitmap

Bit forces us to use the Single Responsibility Principle, that a component must have only one reason to change and must be responsible for only one thing.

Components are divided into container and presentational components. Containers hold the business logic of the project and are not shareable, while the Presentationals hold the UI view of the project. These are shareable meaning they can be used in other projects without touching them or having any reason to change them — that’s what SRP says. So you see, Presentationals are components that obey SRP and are shareable to the Bit cloud platform.

This will force Ada and her teammates to refactor their code to make it suitable for Bit launch.

trv-react-prj
    src/
        - /utils/
            ...
            -index.js
        - components
            - /map/
                ...
            - clients/
                ...
            - index.js
        - ...
        -index.js
        -App.js
    - package.json
    - bit.json
    - .bitmap

See, they have changed their codebase, so every component is in the component folder and inside the folder, the components have a separate folder, an index.js file at the component folder exports them all.

Ada can now pick out her component, map folder and add it to Bit's tracked files:

$ bit add src/components/map
tracking 5 new components

Then she imports a React compiler:

bit import  bit.envs/compilers/react --compiler
the following component environments were installed
- bit.envs/compilers/react@0.0.14

This compiler is a tool required by Bit to help it build components in isolation.

Ada will go to bit.dev to create a collection. She names the collection travellers-prj.

Now, she will tag her tracked component with a version:

$ bit tag --version 0.01

Then, she will export the map component to the collection:

$ bit export @travellers-prj.map

She tells her teammates it and gives them a link to the map’s Bit link. They are perplexed by how simple the stuff looks, the Bit playground and how they could import the component to their project using NPM and any other project.

yarn add @travellers-prj.map
npm i @travellers-prj.map

She tells them all about Bit and how it was able to save her:

• Copying and sending components to them
• Creating extra Git repos just to share a component.

Her project lead is happy and announces they will use Bit from now on. And also they refactor all their project to Bit’s best practices.

Teams that scale code-sharing and code reuse enjoy faster development cycles and simpler maintenance.

Ada was able to easily share her code with her teammates using Bit. Her teammates can reuse her code in their projects. There will be no need to rewrite codes from scratch, code in a project can used in another.

Bit is designed to help teams scale the sharing and management of components to hundreds and even thousands of components. From that philosophy, it takes care of the components’ entire lifecycle from development to deployment so that your team can share and manage any number of components for any number of developers. This includes:

• Managing and publishing any number of components from any number of repositories/libraries at any scale with 0 overhead.

Ada can create more components and share them without creating repositories for them. Bit is left for the task, it will isolate, build and track the components for her.

• Creating discoverability for shared components so that every developer can easily find and choose components

Ada after moving her components to the Bit.dev, she was able to give her teammates the link. And they were awwed by how they were able to play around the component in Bit’s playground before using them. The Bit’s playground provides enhanced discoverability for the components you share. It’s designed to help developers quickly find and choose the components they need through a universal hub with a rich, visual and interactive experience.

• Increasing the adoption of shared components by removing the main barriers and encouraging collaboration.

The components shared on Bit aren’t for the maintainers, Bit enables it to be for the consumers of the components.

All this above means you can do more than install a package; you can actually develop components from any project and sync changes between projects.

Just like Ada did, she move her map component her teammates liked to Bit. This map component can be developed by her teammates and the changes synced to other projects.

This becomes possible because, unlike package managers, Bit manages source code for shared code across different repos. So you can export a component from one repo, import it into another, make changes and sync them.

When Ada built her map component using Bit’s bit build, Bi actually built an isolated React library project for her and extra Git repo. In this case, she has nothing to do with it, Bit does everything for her while she continues working on her project.

Conclusion

Bit is an awesome tool you can’t just pass by. Ada was finally saved from the stress of sharing her component with her teammates when she stumbled upon Bit.

Bit is fast, user-friendly, and powerful. Try it out today, whether working on a team or working solo.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Thanks !!!