And how they will truly help you
At the beginning of this year, I switched company. And as you can imagine that means changing your daily duties, practices and roles.
My new role involves working in React 80% of the time. So now, more than ever, I find myself having to deal with certain aspects strictly related to building the front-end of an application. Here are a few:
- Building reusable components.
- Keeping the front-end highly maintainable.
- Responsibility for a homogeneous user experience.
And, let me tell you something, my best ally in doing this has been our custom React components UI library.
What Is A Component Library
A component library is simply a project or folder, consisting of all the designed part of a website. It helps designers and developers to work consistently and faster.
In our environment, we decided to base our library on atomic design principles. Which I find extremely relatable and appropriate to design systems for web applications.
Atomic design gets its principles from the beautiful complex systems that are our bodies. Everything is made of atoms, that build molecules and then organisms.
And that’s it, our UI components library exists as an ecosystem of these entities, and we pick them to build complex pages.
Advantages of Using A Component Library
Let’s now see how a UI component’s library helped me and how it can help you:
Collaboration and Communication
I love communication, especially good and respectful one. But I love even more when teams are able to automatize it between developers and designers.
Because you know, that tends to be quite a harsh talk sometimes…
With a library of components, if you as a developer receive a new page to implement, the designer will have already adopted the pre-existing library components to build the prototype. You just need to use them.
And, if there is a new component, that’s no problem. You have an extendible library of components to use as inspiration, or maybe, as building blocks of a bigger library component.
This is a major issue for so many web applications. Where you find yourself navigating through an app made of 100 different colours for the same thing. A series of fonts randomly used and compromised user experience overall.
By using a library of components, you are basically reinforcing a very strict direction for the project. Think about it, the designers initially write guidelines to follow for your components. You create them and now you and they both have the building blocks for everything that comes next in your app. A library will itself be a consistency tool to help both you and designers make a better job.
How many times have you found yourself drowning in design change requests? Spending hours aligning colour palettes, mastering buttons borders and font sizes.
A component library provides you with a single source of truth for what you see on screen. Every visual update will only have to be done in a single place, saving you time and a lot of effort.
Just think about the effort in changing the colour of a button. If you don’t have a consistent front-end with a single source of truth, you will have to update every reference of it. UI library? No thanks, just one update and you’re done.
There is also one last point that is incredibly good when using a UI library. Once you kickstart it, you will have a full set of building blocks to further extend it.
Just imagine, you want to create a default popup for your app using a text field and a confirm button. Easy right? Just use your ready-made button and text input components.
In my journey for a better front-end, I found the best ally in a UI library of components. Hopefully, this article revealed the great advantages you can get from using one, or simply convinced you to try it next time!