Announcing Bit’s Component Discovery Experience 2.0 ✨
We are excited to introduce a new experience for discovering and sharing your components. Take a look…
Since Bit’s first release in 2018, it helped tens of thousands of teams and developers discover, share and compose components to build their apps.
During the past months, we’ve worked hard to improve this experience. We’ve learned from many (many) amazing feedbacks and ideas from people in the community, and from teams sharing their components with Bit.
Today, we’re excited to introduce Bit’s new experience for discovering and sharing reusable components, with your own eyes. Read below to learn more, or jump right in and take a look. Don’t hesitate to share your thoughts!
So what’s new? TL:DR
- New home at the bit.dev domain
- New design and visual experience for your components
- New features: component search, playground, labels and much more
- Performance and stability improved by up to 700%
Let’s jump in :)
What’s new in Bit’s hub?
Bit’s Component Hub was redesigned for discovering and experiencing components. The rule of thumb is “choose, play, use”. Let’s see how.
Meet bit.dev
Bit’s component hub now has a new home at the bit.dev domain.
Apart from being an awesome domain name 😻, this new domain reflects Bit’s values of developers-first, community, and open source. Learn more:
Explore components with your eyes
We added new features to make components more visual to our own eyes. When browsing components Bit presents preview examples for the components, powered with video-based animations.
This helps you get a quick and intuitive understanding of the components and make the best choice for your needs. To make it look shiny all examples go through prettify. Examples are available for server-side code too.
The new component lobby helps you search and discover components by your teammates and the community, in a visual way.
The new collections lobby helps you discover collections shared by your team and the community, making it easy to collaborate and share code.
Labels and filters were added to help navigate your way through components so that you can quickly find code relevant to your specific context.
Live component playground
We built a new and quite ground-breaking technology for isolating and running components anywhere. It’s called the “component capsule”.
Based on the component capsule we are building new features, including a brand new component playground. Playing with a component helps you learn how it works and decide if you want to use it.
The new playground supports React, Vanilla JS and Serverside modules (Vue and Angular support coming up). It supports features such as external package installations, example snapshots, side-by-side view and more.
We’ll keep on improving the performance of the playground and add new features (feel free to suggest ideas).
A search built for code components
A big part of discovering components is searching for them.
Bit’s new search was built to make components discoverable not only by text, but also by context and functionality. For example, you can search for “React loaders” and get loader component relevant to React based on the environment and context of the component.
Bit leverages semantic analysis of natural language and semantic representation of source code functionality for an accurate algorithm.
The new search itself was built almost entirely out of Bit components, which means it can now be extended and rapidly improved over time.
Labels and filters help screen the results when needed, balancing the search algorithms with hands-on control, so that you can find what you need.
Automatic component labels
When components are shared to Bit’s Component Hub, they are automatically labeled according to their functionality and context.
For example, a React button component might be labeled under “React”, “UI”, “Button”, “Form” and more. A “toBase64” component will be labeled “convert”, “utility” and so on.
While labels are automatic, the component owner can curate them and change/add new labels as needed.
Apart from quick-filtering, component labels are used in many other Bit discovery features such as collections, search results, your lobby and more, to improve the accuracy and experience around component discovery.
Automatic component API docs
Bit now provides automatic extraction of information from React components, to generate out-of-the-box component documentation with props, types, APIs and everything else. Support for more component types is coming soon.
Component dependencies view
Dependencies are an important factor when choosing components.
The new “dependencies” tab in the component page helps you quickly learn what are the dependencies, peer dependencies and dev dependencies for every component. This includes both package and Bit component dependencies, which can now be quickly viewed and evaluated.
Bit v14: Performance, stability & compatibility :
The short answer is a lot.
Bit v14.0 is focused on performance, stability, and compatibility with over 75 new features and upgrades.
Let’s have a quick look, and you can find the official release note here.
Performance upgraded by 700%
Tracking files and managing dependencies require Bit to traverse code, parse dependencies and create complicated objects to construct reusable component from various files in a project.
We’ve added more layers of internal caching and refactored some of Bit’s internal infrastructure and code to do the same actions 7X faster.
Performance in bitsrc.io was upgraded as well, with super-fast loading times which should be initially kept under 1 second, and often go down to less than 500 milliseconds after that. Naturally, different actions mean different times.
Better stability and compatibility
V14 fixed over 70% of open issues on GitHub and added support for popular more tools, technologies, and workflows. This turns Bit into a more useful and powerful tool that works in more use cases, for your team and the community.
For a complete list of all changes and fixes, visit Bit’s changelog on GitHub.
Adding dynamic component namespaces
A namespace extends the component name by adding a context, to provide better organization and discoverability for components. For example, you can have all your utility functions in a namespace called utils.
Namespaces can be nested as well. For example, in utils you can nest arrays, thus creating utils/arrays- a namespace to hold all utility functions that relate to managing arrays.
In addition, Bit now supports a global namespace for components by simply not setting a namespace for it.
New commands: “watch” and “eject”
Up until now, if you made any change to a component, Bit required that you re-run thebuild command. Enter a new command: bit watch.
With bit watch you can keep on working, and Bit will watch all the implementation files of the components. Each modification triggers a build process, creating a smoother and faster dev experience.
To add some sugar, if you’ve imported a component using Bit and then decide to replace it with its node-module implementation, you can now do it with a single eject command. This creates a faster workflow for modifying the source code of packages than ever before possible by any package manager.
Supporting binary files
You can now track binary files as part of the components. So, if a React component contains an image or a font file, it can be a part of the component. Like many other features, this feature helps support common use-cases.
It’s only the beginning
Bit’s new version is packed with new features and upgrades. But, this isn’t the best part of it. We took the time to build more than just features: we built the technological infrastructure to enable a very innovative roadmap.
In the short term, we will soon introduce Bit’s extension system which makes it easy for any developer to build and integrate more tools and workflows.
In the next months, we will introduce new features and technological capabilities to help teams share, reuse and collaborate on their components.
In the (bit) longer team, we will push forward new possibilities for components in the fast-evolving web and serverless ecosystems.
As always, we’ll work with the community to think, learn and solve problems. We thank everyone for the great feedback and ideas, so please continue to share them. Thanks to everyone who’s taking this journey with us.
Cheers, Team Bit 🌹
