Keep it Small: Find Components By Bundle-Size and Dependencies
New: filter components by bundle-size and dependencies before installing them in your application.
Imagine having to search booking.com for a hotel without being able to filter the hotel, location… it won’t work. You want to choose the right hotel for your needs and pay as little as possible.
Things are not too different when looking for code to use in your app. You want to make sure you only choose components that are “cheap” in the weight and dependencies they add to your application. Otherwise, things can quickly get out of hand and your application might get slow and heavy.
Bit helps developers share more components, alone or as a team. It is home for over 50k developers sharing and searching components. With so much code being shared, how can you choose the right components for your app?
Today, we are introducing two new search filters in bit.dev that let you search components by bundle-size and by dependencies. These new filters join the already existing filters such as component labels, tests, and examples.
With these new search filters, you can make sure you don’t just find useful components — you find the right components to use in your application.
You can consume components without paying the price of redundant weight added to your application and adding only minimal dependencies.
Your users will get a faster and smoother experience, and hopefully, your life as an application’s developer becomes much easier.
Search components by bundle-size
Every time you share or update components Bit calculates the total bundle-size of every component and all its dependencies, all gzipped and minified. You can then filter and choose the right components for your app.
Why? well, Here’s a fact well-known to every frontEnd developer:
Small bundle => less network traffic => faster app loading time => better numbers across the board.
Small components can be a big problem. When you install a small component from a public or internal package registry, you can’t really tell how much weight it will add and how much it will slow down your application.
Google research shows that roughly every 0.5 seconds added to the page’s loading time will result in 20% of traffic lost. Amazon states that a 1 second lag time will cost $1.6B a year. For your own product, faster loading times may generate better numbers in conversions, retention, traffic and more.
You have to install the component, build your application, and start trying to figure out what’s going on. That can be a time-consuming task, as you’d have to account for all the component’s dependencies as part of the price you pay.
You might even go through this whole process just to eventually find out that the component you installed is too big for your application. But no more. Control is now in now your hands.
When you share your components in bit.dev (or search components in the community) you can now filter the exact bundle-size of components before you install them. You can even filter components by their exact dependencies, to prevent bloating and keep your app as light as possible.
When you share your team’s components in bit.dev, it becomes clear exactly which components are too heavy and which are optimal for your needs. You can standardize your shared components to optimize your app performance.
Search components by their dependencies
Let’s say you’re looking for a button component to add to your React application. But, your project is also using Enzyme for testing and maybe a bunch of other dependencies for different tasks you need to complete.
In bit.dev you can now filter your search according to specific dependencies used by the components you are looking for. This makes sure you can find the right components that match your already existing dependencies and make sure you don’t add stuff you don’t need which might just bloat your app.
Through this experience, you can keep your application’s bundle-size under control, and also simplify the development workflow for your project. For example, you can consolidate the types of data your components work with, the way they are tested, the way the components are styled and so on.
This means faster and more painless development, standardizing your development stack and preventing redundant complexities. It also means lighter applications providing a faster and better experience to your users.
What’s next?
We will keep working towards building an experience that makes all the world’s components discoverable — in a practical way. The complexity of live code components should be an advantage, and not a disadvantage, in the discovery experience of shared reusable code.
Bit’s code search is based on the semantic, structural and contextual properties of components. Based on this knowledge, bit.dev aims to makes it easy to find and choose the best components for your specific project’s needs.
This means taking into account the code’s API functionality, it’s docs, tests, context-labels, bundle-size, dependencies, and other useful parameters. Once you found a component you like, you can try it out in a live playground to learn how it works hands-on, before installing it in your code.
Looking forward, we want to make the experience of finding components as simple as looking for an Airbnb flat or a product on Amazon. Developers shouldn’t have to suffer, after all- they are building all the other stuff too :)
Until next time… Cheers, team Bit 🌹
