Do you really need a custom component library?

What is a component library?

Simply put, it's a collection of what I like to call building blocks. They are visual elements that come together to create a user interface.

There are so many open-source component libraries today that it sometimes feels like a new library, framework, or super JavaScript thing to solve your development problems is being released daily. That's the time we live in; there's an infinite amount of resources available to anyone who wants to bring their ideas to fruition. But what good are these tools if we don't know how to harness them properly? If you're a business owner, startup, freelancer or an inquisitive mind tinkering away with code to your heart's content, the bottom line remains the same. Cost vs reward.

What are some of the costs vs rewards?

Time and money come to mind; let's explore this further.

Costs

Time

There will be a bit of time spent developing your component library, thinking about the components you want to build and the components your new shiny design system needs, and time spent in endless meetings between product, design, and engineering teams to align on requirements. If you're a one-person shop, there's the time you'll put aside to commit to this. Less time for Netflix, coffee, gaming or whatever you do in your spare time.

Money

For businesses, the money part is a bit more obvious. In most cases, you must pay someone to build this for you, and you will also need to weigh the opportunity cost of working on this library vs working on projects that generate revenue. For the inquisitive mind, the financial cost of this undertaking may present itself in other ways, which we won't dig into in this article; off the top of my head, some of these costs could be leveraging paid services to build and test your library, hosting, etc.

Rewards

Levelling up your technical offering

Building your component library will give you a deeper understanding of executing and building an ecosystem. If you work within a broader team, there will be cross-team collaboration, and insight gained into the concerns and needs of key stakeholders, all of which will be extremely valuable experiences. Additionally, the experience gained from understanding and communicating ideas to non-technical folks, the business needs, and executing on discussed ideas is a much-needed skill set.

There are various moving parts needed to build, launch and distribute the building blocks that will be used by yourself, team or company that you will be managing. If you are working on this alone, an undertaking such as this, allows you to wear various hats in different streams, such as being a product owner, designer and frontend engineer.

Reusable tools

The immediate benefits will be different for some, but one thing that will be common for all, is that having a well planned and built component library, will become a go to tool in your arsenal with regards to executing on your ideas.

Quick to launch

Having access to a component library, will allow you to build out your application/platform, marketing website, mobile app or other interactive medium in a shorter time period. It will allow you to focus on implementaton of the business logic and core features required for your project.

For businesses that are project based, the effects will be immediate, as project based businesses generally have fast turnaround times, and having an already built toolset allows one to get things out the door faster.

For product based businesses, it unlocks the ability of their engineers to focus on the implementation of business logic and critical features. It streamlines the look and feel of your product as all UI elements and UX interactions become more unified.

Why did I do it?

In short, to level up my expertise in frontend engineering.

The company where I am currently employed has an existing component library, which has been and will continue to be instrumental in speeding up the turnaround time of new features and functionality. The library is well documented and mature, allowing new frontend-focused engineers to quickly transform designs from the product team into real-world functional components and applications.

I have observed a couple of key takeaways in popular component libraries and my company's component library. In all examples, documentation and branding are key in ensuring the masses successfully adopt your component library. A component library must be well documented; the users of your library should be able to get started with it reasonably quickly and understand its core features to use it effectively. It must be well branded, give it a name, and give it a personality. This will go a long way in spreading the word and evangelizing the use of the library.

As part of my responsibilities at my previous job, I led a working group of frontend engineers to build a company-wide component library. Unfortunately, I left the job before I could see it become fully complete. However, I was still able to oversee the completion of some components which were used in production environments.

Being inspired by what was built in my current job and the experience from my past job, as well as my challenges with personal projects. I decided to build a component library to make it publicly available for others to use and leverage it to launch my projects faster.

Join me on my journey. This is the start of a series of articles in which I will explore the technical aspects of this undertaking and revisit the costs and rewards of doing so.