Photo by Helena Lopes on Unsplash

Using a component library instead of coding your own is a great time saver for any project really. It allows you to focus on building what you want, using a pre-set list of basic building blocks.

It’s the equivalent of getting a LEGO set and starting to play with it immediately versus having to 3D print all pieces AND THEN, start playing with them.

While the second option might give you a sense of accomplishment because you did it all yourself, it’ll take you A LOT more time and effort. And most likely halfway through your build you’ll realize you still need more pieces, so you’ll have to go back and print more.

So yes, definitely going with a pre-defined component library is the way to go 9.9 times out of 10.

But how do you pick the right one for your project? Are they all the same? Let’s take a look at what are the properties and characteristics of a component library that you’ll want to pay attention to, while shopping for the perfect one for you.

Who’s behind it?

This is to say, are we talking about a library that was built by and is mainly being maintained by a single company? Or are we talking about a community effort?

This is important if you care about the future and evolution of this library. If you’re thinking you want to adopt it as a standard for your company for years to come, then you’ll want something capable of evolving with the industry’s trends. And that to me, sounds like it should be something community-driven, or at least, that has a big community and a big company behind it.

It’s not the same to start using Base Web, for example, which is Uber’s component library with almost 8k stars on Github and a pretty sizable company behind it than to start with a small library built by a single developer without a real use case in mind.

Don’t get me wrong, this is but one criterion and you’ll be better off using multiple ones to make the final decision, but if support and reliability are a thing that matter to you, then you’ll want to go with popular libraries.

How can you tell if there is a big community behind the library? There are a few options:

• If it’s open-source, you’ll quickly find their Github repo, check it out, review their issues, and see how many stars they have. Those are good indicators of people liking it and people actively using it.
• If it’s not open-source, then you’ll have to review their page. See how much documentation they provide. Look for a Discord server or a Slack channel and join them if you find them. That way you can directly assess how active their community is.
• Do a Google search for the library. Are people writing about it? Or do you barely find any results? That’s also a good indicator of its popularity, if no one is writing about it, then it’s likely not yet widely used, so you might want to skip it for the time being.

Ease of use

In the end, once you have them installed into your project, most libraries are used in very similar ways. But getting started with the library might require some extra effort.

This is what you’ll want to look at:

• What are the installation steps?
• Do I need to install extra dependencies to make it work? (Bootstrap, I’m looking at you!).
• Does the “Getting Started” section of their documentation work for you? While this might sound silly, you’d be surprised how many times this section gets outdated for projects, and then the simple task of installing the library into your project takes 4 times longer. That’s not a good indicator, especially because if that team wasn’t able to keep up that part of the documentation updated, who’s to say the rest of it is? And outdated documentation is just like no documentation.

Essentially anything that requires more than a single line of code to install would seem suspicious. And if they do need more steps, make sure that these steps are properly documented and if they don’t work, just skip the library.

Extensibility + Licensing

What happens if after a year of using this library you realize you need some components that they don’t provide? There are two potential paths you could take:

1. On one side, you could send a PR with the new components. That way the whole community benefits from the new components and they’re able to evolve them as the rest of the library moves forward without you having to maintain that piece of code.
2. On the other side, you can create your own library that uses the first one as a basis, and add as many new components on top of it as you want. You could even make it available to the public as an add-on library.

Either of these options would work only if the library is open to being extended (both by being open-source and having the right type of licensing) or if they’re closed-source but their licensing allows for other products to build on top of them.

Remember, this is under the scenario that you’re choosing a component’s library for your job. Meaning there are legal implications to take into account and just because their code is in Github doesn’t mean it’s a free-for-all type of situation. You need to carefully study their licensing to make sure that you’re not tying both your hands behind your back by picking a library that won’t allow you to extend them if that’s what you’d like to do.

Popularity

By itself, I would advise against using this metric to choose the component library that will act as the backbone for your entire project. But if you use it in combination with the other criteria mentioned here, then it might come in handy.

Popularity simply means understanding how much people like this library. And just like when I talked about making sure you pick one that has either a big company behind or a big community, you’ll want to:

• Check their Github stars if that’s a possibility.
• If they’re in Github, check their issue pages. Are they actively working on it and are there many issues being reported? The fact that the issue count is high is not a bad sign, in fact, it means it’s popular enough for many developers to want it working properly.
• Google for their name to see what people are saying about it.

A good indicator of a library being popular is when there are lots of tutorials available by developers from around the world. Careful though, make sure that these results are recent, because you might also stumble into a library that hasn’t been used in years. You can easily see that by looking at the date of the search results. If most of the tutorials you find on the first few pages of Google are from 2 or 3 years ago, then maybe consider looking for another library.

If all tutorials you find are outdated, then the minute you find a problem with the library — because chances are that if it’s outdated, it won’t work with the latest development environments — you won’t find much help around.

Keep an eye open for that detail and don’t be afraid to dismiss the library if it’s old, our industry evolves quite fast and what is popular right now, most likely won’t be in 2 or 3 years.

Conclusion

Component libraries are useful and can save you a lot of development time and headaches. But picking the right one can turn into a problem if you don’t do it following a certain set of criteria.

So make sure you know exactly what you want to get out of it before you start looking for one, and don’t pick the first one that comes your way. Weigh in several options and be critical when it comes to analyzing their popularity, extensibility, documentation, and ease of use.

With that said, what’s your favorite/go-to component library when starting a new project?

Bit: Build Better UI Component Libraries

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

• Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
• Easily share, and reuse components as a team.
• Quickly update components across projects.
• Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→