Why UI-Libraries Are Almost Mandatory In 2020

Piero Borrelli
Apr 1 · 4 min read

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.

I love you, component’s 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 to work consistently and faster.

In our environment, we decided to base our library on . 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.

Building a UI feels like a scientist now

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.

See how it's done y’all?

Consistency

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.

Man I really love this UI guidelines

Maintenance

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.

Hand me that primary button, please

Extendibility

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.

Now you are a factory producing components

Conclusion

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!

— Piero

A note from JavaScript In Plain English:

We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at with your Medium username and we will get you added as a writer.

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store