15 Reasons to Build Your Component Library in Bit.dev
If a traditional component library is like a CD music album, bit.dev is like component iTunes or Spotify.
UI Component libraries have taken a huge leap in popularity in 2019. This is no surprise, as great companies like Uber, Airbnb, Booking and more all leverage shared UI components to keep their visual experience consistent.
Reusing UI components lets you keep your UI consistent to reduce user confusion and improve on all key product KPIs. It also speeds UI development as you don’t have to write the same code over and over again from scratch. As you grow, shared components help to standardize your stack across teams.
If a component library is like a music CD-Album, then bit.dev is like iTunes or Spotify for UI components.
Bit.dev is a fast, dynamic and collaborative way to build your team’s component library. It lets you gradually extract, collect and reuse existing UI components written in your apps. It helps your team reduce overhead, get rid of extra tools in your toolchain, and leverage shared components to greatly improve the speed and quality of your frontend development.
Let’s quickly review the advantages of creating your reusable UI collection on bit.dev, to help your team gain an enhanced modular UI library in no time.
Some more tools to consider:
1. Gradually build your lib without losing focus.
A great advantage of the bit.dev ecosystem is that it lets you gradually refactor your UI and collect reusable components to bit.dev.
Instead of stopping delivery to focus on a time-sucking project, you can keep building your apps and just extract components for reuse as you go. It’s also a great way to gradually introduce new features and versions into your project.
This becomes possible thanks to open-source project Bit, which bit.dev leverages to help you build your reusable UI component collection. Using Bit you can quickly and seamlessly isolate, pack and export reusable components to your team’s growing UI collection- on the fly. This means you can have a UI library in minutes, and just expand it as you grow. Here’s how to get started:
2. No boilerplate setup; No configurations overhead.
With bit.dev you don’t need to suffer and work hard just to set up your library. Instead, you can leverage Bit (GitHub) to do all the heavy lifting for you.
For example, you don’t need to define the package.json for your components, as Bit will automatically generate a pakcage.json file for every component. Instead of having to define the build and test configurations for the components in your library, Bit lets you enjoy reusable dev-environments to define these steps for every component you add to your bit.dev collection, so it can be reused across projects as a standalone living unit. These features, and more, let you spend less time on overhead and more on creation.
4. SemVer components: Meaningful updates and mix UI compositions.
Monolithic libraries are consumed as a single-versioned package. Bit lets you version and update each component individually, using SemVer rules.
This means different components on different versions can be mixed together. Different teams can keep their autonomy by updating specific components on per-need basis, without being tied to the monolithic releases of the library.
Teams don’t have to introduce redundant updates into their applications. If using slider but not button, they won’t have to update their application when there's an update to button. They won’t need to add the dependencies of button into their app either, reducing the chance for conflicts.
By working with SemVer’ed components teams can suddenly control updates, hotfixes and rollbacks to specific parts of their UI. They can adopt shared components, add their own components, and retain product control.
3. Efficiently organize and segment components.
Bit.dev takes care of organizing and segmenting your components so it’s super easy to find the components you need in any relevant context. Here are some of the key features that make this happen out-of-the-box for you:
- Powerful semantic component search.
- Automatically-generated component labels (`button`, `react` etc).
- Smart filters for component size, depndancies, context etc.
- Components are grouped by project, team or anything else.
Learn more:
5. Write code, generate stunning docs.
With bit.dev you don’t have to build and maintain an additional set of tools and static docs sites just to document and render your components.
Every component shared to bit.dev is analyzed and its API reference is automatically extracted, parsed and presented right in the component page. Every component can be given examples that render in bit.dev, so everyone can easily try it out before choosing to use it.
This means you have a single portal where your components are hosted, shared, documented, rendered and installed- all out of the box.
6. A component registry built-in your library. 📦
Bit.dev cuts down your toolchain for managing reusable components. Instead of publishing a library to NPM you can directly install components from your bit.dev library using your NPM and Yarn clients. The result? More code reuse, less overhead. Just config bit.dev as a scoped registry and you’re good to go.
7. Reuse UI components; keeps teams independent.
Apart from installing components via the bit.dev registry, you can use Bit to introduce a brand new,-and very powerful, workflow.
Bit lets you bit import any component right into any git repository (e.g. a new app) and modify the actual source code of the component. Once done modifying, you can simply tag a new version and share it.
This means you can reuse components while still maintaining your autonomy in the development of your applications. This is much easier than diving into a library’s code to make a pull-request and makes it much simpler to adopt shared components. Take a look at this 5 min video.
8. Keep Git repos in perfect sync. At any scale.
Unlike traditional static libraries, your bit.dev is built to infinitely scale.
When you change or update a component, you can instantly issue a pull-request to every single repository using this component. You can learn which repositories adopted the update and which did not, so you can better control changes and sync them across your entire codebase.
Furthermore, you can update a component and all it’s depending components together in a single action. This provides you with unprecedented control over changes to your UI application, to stay synced and in control at any scale.
→ Start building your library today!
9. Greatly increase UI/UX consistency.
When you share and reuse components through bit.dev you ensure that your users will get a consistent experience across screens, apps, and products.
A consistent UI/UX experience means your users can navigate their way through your products more easily, successfully engage with your apps and take to desired actions while feeling happy, safe and familiar in your brand. As you scale, this challenge will become greater. Bit.dev is a powerful way to increase and ensure a consistent UI through limitless reuse of UI components.
10. Speed development of new UI applications.
When you can easily find and use existing components you save time twice:
A) By not repeatedly rewriting the same code.
B) By helping future-you and others to maintain components through simple updates across repositories.
Through bit.dev, this becomes much easier as you can simply search, use and adapt any component right from any consuming project. No need to dwell in long docs sites, dig through a library's code or worry about compatibility. As more components are shard, more time is saved for you and your team.
11. Lower entry to code contribution and feedback.
No context switching!
Diving into an entire GitHub library to PR a single component is hard. The context-switch alone can easily take a good day’s work.
But, when your components are in bit.dev, you can simply bit improt a discrete component into any GitHub project, make changes, and share a new version. This means anyone can now contribute in just a few minutes.
Discussions can be created on top of specific components, to collaborate over specific changes and how they impact your UI in different places. And, this isn’t just for developers; as components are visualized you can bring in designers, product managers, and everyone else to talk over code.
→ Start building your library today!
12. Get greater adoption for shared components.
As you scale, it’s hard to achieve adoption for shared UI libraries. The main reason is that frontend developers don’t want to couple the development of their apps to that of the library. They also don’t want to install a whole library and get updates (running CI), for the whole library.
Through bit.dev teams can easily adopt the specific components they need, without losing their independence. They can modify and update shared components as needed without compromising UI consistency and get quick feedback from designers and infrastructure teams. They will also get updates only the components they actually use, and won’t be bothered otherwise.
Making components easier to find and adopt means more teams (and apps) will begin using the same components, and your design system gets adoption.
13. Easily onboard more team members.
When your UI is modularized into a reusable collection, it’s much easier for new team members to join in, learn what you have, and start building!
When working on a certain app, for example, you can introduce a new person to your team’s own bit.dev collection as well as to your organization’s. There they will be able to easily learn which UI building blocks are used by your specific team or by the entire company. Zero to hands-on in very little time!
14. Let designers collaborate with developers; Directly over code.
Ha! The holy grail.
The truth is, so far most UI-oriented tools focused on UI design and not code. This is wrong since code is the source of truth for your UI. It’s what your users really see at the end of the day: your code. So, your team should communicate and collaborate over your code components, not just design elements.
Your bit.dev collection is where your actual UI code is hosted- it’s your source of truth. And, it’s where this code is also visualized. So, for the first time, designers and developers (and product, marketers etc) can collaborate over real code in a visual way. It’s exciting to think of what will happen when bit.dev will be integrated with tools like Invision DMS or Figma… 🙏
15. Reduce apps bundle-size and weight; Increase performance.
Another useful advantage of bit.dev is that it lets you install individual components. You can even filter components by bundle-size before using them in your app. That can be very useful.
When you only add the components you need to your app’s bundle-size you reduce the total size and weight of your app. Your users will get a faster, smoother experience which will result in better results for your product.
You can search for components playing and check out these filters here.
Bonus: Join a large open-source community✨
Many people choose to make some of their components open-source on bit.dev, so that others in the world can find and use them in their code.
Explore the bit.dev opens-source community, explore tens of thousands of components in the world’s largest library, enrich your team with components from popular open-source libs and share your own work with the world!
