In my career as a developer, I have been using component libraries since the very beginning. These packages full of useful elements were helping me build applications for both open-source and enterprise applications.

But using them comes with advantages and disadvantages (like with anything in web development) so I decided to summarize my experiences with them in this article to share the knowledge that might be useful for you 😉

If you have other experiences with component libraries, please do not hesitate to add comments and share your thoughts. This is rather a big topic that I think everyone can contribute with their opinions.

What is a Component Library?

Component Library is a collection of reusable and generic components that you can add to your project for several different reasons like:

1. Acceleration of Development
2. Standarized patterns across the project
3. Useful integrations

And probably many more.

These components are usually packed inside an NPM package that you can easily install and use across your application. Thanks to the reusability and customizability these elements can be used in many different scenarios.

For easier development, testing, and automatic documentation, tools such as Storybook were invented that are a must have for any modern component library.

Storybook allows to also integrate with popular Design tools such as Figma so that you can have a direct sync between the design and development teams.

Examples of Component Libraries

There are many component libraries available on the market that you can easily setup and start using in minutes. To be honest, I would say that there are actually too many generic and agnostic component libraries available and because of that, it is rather difficult to choose one of them. The generic library is the one that includes components such as buttons, labels, fields, forms, etc. Basically the elements that you may need in any type of project.

For that, you could use library like Vuetify for example:

It delivers several out of the box components that you can use to build your next app. And there are many many more examples of such libraries.

However, there are also examples of libraries that are focused on certain area of business like e-commerce, healthcare, travel, etc. And if you ask for my honest opinion, I would say that these are actually a game changers. Why? Because they contain components for the elements on the page that can be really difficult or time consuming to implement from scratch or even by using component library such as Vuetify.

Let's take a look at the example of Storefront UI:

It comes with useful components such as ProductCard, ProductReview, ProductSlider or OrderSummary that can help you easily that normally would take days to implement. And by using SFUI, you can utilize the power of these components by simply importing them in your project.

My experience with Component Libraries

I might be extremely unlucky but in my current company this is actually the 3rd time for me to join a project where a component library was used from the beginning and after some development time, I needed to spend several days to remove this component library.

In my particular case, it was about Vuetify component library. Don't get me wrong, Vuetify is a great collection of elements that are based on Material Design and I can totally see multiple use cases for it like MVP projects or small applications.

However, for huge enterprise applications that I was building while working for the past three companies, using a component library such as Vuetify is actually more troublesome than it is worth. Why? Because these libraries are aimed to be as generic as it is possible and because of that if you need certain component to behave differently than it was initially planned, the amount of workarounds that you would need to do to make it work is basically not worth it.

And believe me, removing a component library (that is basically used anywhere in the application) while still developing new features for the existing and production application is a really difficult task.

To give you a better example, let's imagine that you are running a tattoo shop and one of your customers who has his whole body covered tattoos decides that he does not want them anymore. So he asks you to remove them, you start the procedure, and then he decides to start moving all the time, talking through the phone, eating, and stuff like that.

So yeah, I had quite a struggle with these component libraries. But this doesn't mean that I think they are not usable. Take a look at the next section where I am trying to answer when you should use them.

Should you use them?

Interestingly, this is not a correct question. The better one would be to ask: When should you use Component Libraries?. Why? Because as with any tool/service/package they were invented to solve certain problems and for other situations they might not be a perfect fit.

I would say that you should use Component Libraries at the very early stage of the development of your next project. Let's imagine that you are building a Proof of Concept that is aiming to validate some idea. Then, using library such as Vuetify would allow you to very quickly have something that works and looks decent. You validate your idea, then you decide to start from scratch with other technology stack. And I can completely recommend that. Just make sure to not do what was done in one of my projects where Vuetify was selected for the PoC stage, and later on there was no time to refactor it and we ended up developing with it for more than a year. If you would ask what we replaced it with, we have decided to go with pure Vue 3 and TailwindCSS. It gave us the most flexibility and customizability we wanted while building our product.

Let me know in the comments what are your thoughts on that 🙂