What Is a Component Library?

Recently while going through neog.camp level zero curriculum. I got introduced to the component library, and I realized how amazing it is. In this article, I will share what I learnt about the component library and the benefits of using it.

In this article, I will not ask you to make your own component library, however, it is a great exercise and you can check neog.camp lecture where we made a portfolio website after making our own component library.

Before taking our discussion to the component library, let's recall what we mean when we talk about a component. By the word component, we are referring to an entity on a web page. To be more accurate component refers to an element on a web page, that a user can see or interact with in some way.

What is a component?

A component is a single element or a group of elements that combines together to form an entity. A component can be created using HTML elements or by combining existing components. A component is not dependent on any framework in general. However, most components include logic or characteristics that allow them to change their style and behaviour. A component produced within a framework gives HTML, CSS, and JavaScript as its output.

Since components can be made up of other components. The maintenance of larger components like this is more difficult. It quickly grows more difficult when one component is dependent on multiple other components. Atomic Design is a popular method for organising components.

What is a component library?

When you think of component libraries, you might imagine a massive project with a lot of developers and designers working on it. Where the goal is to establish design principles and standards for a project or firm. The concept of a component library, on the other hand, is independent of the size of the application or project. A component library can benefit a tiny project just as much as a larger project.

In short, "a component library is a collection of components that can be reused." It could be a folder within your project that contains common components that are utilised across the programme. It might be an npm-based distributed package. It's also possible that it's part of a larger design scheme.

It is possible for a component library to be tiny or vast. There are no official definitions for what constitutes a component library. It all depends on the scope of your project and your requirements. It could be self-created components or a public library from a large corporation.

When to use a component library

If you're going to use a similar component in two or more places in your program. It makes sense to make a generic component and putting it in a library folder. Then, use that component in both places. You can set this up with attributes or other logic to determine its output if they need to differ in any way.

A normal button is the most common example. If you have a button that appears in multiple places across your application, it's a good idea to utilize the same component for it. Your app will have a consistent look and feel, and you'll only have to make updates once. This is referred regarded as the "one source of truth" by many people.

Advantages of using a component library

  1. Single source of truth: It is the one most important benefit of using a component library. There are no variations implemented in different places. All the HTML, styling, and logic can be found in one place. This makes it easier to share.

  2. Easier and time-saving adaptation on your components: You can very quickly get up and running with a new project and have access to the components straight away. Changes to a component will be reflected in all of your projects.

  3. Maintenance: It is easier to manage when all of your components are in one location. Components are updated or new features are added once and are mirrored in all implementations of that component.

  4. Working with tests: When the library's components are grouped and implemented in one place, it's easier to develop a well-thought-out test suite. As the project grows, the tests increase and become more relevant and necessary. It's also simple to employ Test-Driven Development when adding new features by creating new tests before implementing the functionality.