Why look into Bit
Bit has been showcased a number of times on the HackerNews & Reddit communities as a solution to enable teams to easily share and reuse components, with opinionated ideas already implemented and battle-tested (e.g. reduce team members having to debate and try Storybook vs Styleguidist, Mono-repo (Lerna or Bolt) vs Multi-repo's. Or having to learn many different technologies, if 1 framework with easy to read documentation can help on-boarding and ease-of-use.
Installation & Setup
The website is easy to navigate, with all the expected areas (Features List, Documentation containing both guides and an CLI reference, Links to Github to search previous & common issues, a fair amount of articles (both pages & blog-posts detailing how to go about certain actions)
There were a number of incidences where paragraphs wouldn't match code-blocks or screenshots, however this isn't a major blocker.
The documentation could do with a run-through & update to help people better understand Bit's features, or highlight areas people may get stuck (such as when exporting(publishing) You must have created the collection on the website, and must include the remote repo (e.g. <username>.<collection>) and this must be done on every future export (not quite the same as git push)
The setup guide presumes you will be pushing up components for an existing project (if not, you can quickly setup a npx create-react-app testing-bit and just add a few components to follow along with Bit's Guide.
Environments & Building/compiling/transpiling
I recommend selecting (bit call it importing) a compiler before Adding & Publishing, as otherwise your components will not work on the website initially.
Bit provide out of the box support for common builds/compiles, including: React, Babel, Webpack, Flow, Typescript, Jest, Mocha, Vue, and a few others (https://bit.dev/bit/envs), For my prototype I simply used the React-env (bit import bit.envs/compilers/react -c)
Once this is done, calling bit build should compile your components similar to a typical babel/webpack build, outputting your components into a /dist folder containing your es5 components (The same compiled components as what you would receive if importing these components into another app e.g. import Button from '@bit/slpixe.bitsrc.button';)
Adding & publishing(exporting)
Adding and checking the status of components/changes to get published is nice and similar to git:
Add: bit add src/components/* (There is a good support for different file/folder structures)
Status: bit status
Once you are ready to publish your components, you need to tag them with a version, by default tag looks to bump the SemVer patch version (so starting with 0.0.1, by default this will bump all components, see the api for tagging specific components (https://docs.bit.dev/docs/cli-tag.html)
bit tag --all
Now publishing(bit export <user>.<collection>) will send up your components to the Bit repo, and allow you to see your components on the Bit.dev website
Component previewing & Documentation
The website allows users to be able to preview, interact and write their own implementation of the component, allowing users to quickly get an idea if its the component they require, and examples on how to use it. As well as support for additional information such as properties the component expects.
This does allow people to developers to quickly provide implementation examples, however it doesn't provide the flexibility to tailor the experience to the level alternative Component libraries Such as Storybook or Styleguidist provide in terms of easy displaying and manipulation of states/props.
Your options are setting up a few examples within the built in code editor/preview, and some written documentation
Working with a team
Now that your component is hosted in the Bit registry, team members can easily access the library for viewing all the components, along with the package path.
If just making use of the component It's recommended to just use the npm i @bit/<user>.<collection>.<component> make sure @bit is scoped to the Bit registry
If team members which to make any updates/changes, they simply need to bit import <user>.<collection>/<component> (note the slash between collection & component) to download the component(s) into their app, make any changes, then tag & export the updates back up to the repo
Conclusion
Bit do provide a easy way getting started with sharing components, with some good documentation and built-in-features. I never came across any pain points with their implementation, and they do appear to be constantly improving the product.
There are a number of limitations which could be deal-breakers for certain teams such as:
- Cannot currently self-host/on-prem
- Could be difficult to debug issues as constantly updating codebase, and not very big user-base (compared to Git & Lerna)
- Not much control of the interface for the library (compared to Storybooketc)
If none of these are issues for you, and you want a platform which is very quick and easy to setup, and be able to use across your team, Bit offer a very complete package, and the community appear very willing & available to help
Latest comments (1)
You just make me go and try Bit Dev.