Front-end development is getting confusing day by day and in this article, I will try to simplify it for you.
Photo by Alvaro Reyes on Unsplash
The UI designing was extremely simple back then, you just need to know the HTML and CSS. You just need to be able to convert the PSD/Figma designs to HTML and you are done, but now the UI has become extremely complex. There are various UI libraries, there are libraries with UI components, and there are libraries with headless UI, everything is just so confusing.
A simple front-end project in the past
Front-end project nowadays
In this article, we will focus only on the UI part of the front-end Development.
This article is inspired by this video by Theo — ping․gg.
The UI libraries and the near-static front-end development is divided into the following categories.
Screenshot from the video
Let’s deep-dive into the individual categories.
CSS Extensions
These are some simple-to-use UI libraries, think of these as CSS on Steroids. These libraries provide helper classes or additional functionality over our classic CSS.
These libraries are unopinionated and provide complete customization of UI elements. Let’s take the example of Tailwind, tailwind provides a bunch of CSS helper classes that allow you to add CSS properties without wiring the CSS.
Behavior libraries
These are special UI libraries specific to your front-end framework/library i.e. ReactJS, VueJS, or AngularJS. These libraries define behavior and not the UI.
By behavior I mean, imagine you have a simple button, that opens a modal, then a behavior library will simply give you the functionality of opening the modal on the button click but it will not define the UI of the Button or the UI of the modal. For the UI, you may use CSS Extension libraries.
You can check out Headless UI which provides behavior support for ReactJs as well as VueJS.
Style System
Almost everyone who’s reading this article must be aware of at least one Style System library (bootstrap is the most common one).
A Style system library is opinionated and gives you a combination of UI components along with behavior for those UI elements. The components in a style system are difficult to customize but a Style System will allow you to do rapid development where you don’t have to think at all about how each and every component looks or behaves, you simply accept the behavior provided by the Style System.
I hope this was useful for you to understand UI a little better, but you might be thinking what about React Mui or React AntD?
These fall into the hybrid categories, let’s take the example of React MUi. React Mui is a hybrid of the Style System and Behavior library. Style System since it’s opinionated and defines the UI for the components that are difficult to customize and Behavior library because it defines behavior for each and every component defined in the library, for example, ReactMui has a modal component that defines UI for the Modal as well as the behavior of how the modal should transition and open.
The same goes for React Bootstrap or React AntD and most of these Hybrid UI libraries provide support for all the popular UI libraries/frameworks i.e. ReactJS, VueJS, or AngularJS.
So next time when you are starting a new project ask yourself what is the need of this project and what category of UI library should be selected.
Summary
- The UI libraries fall into the categories of CSS Extension, Behavior Libraries, and Style Systems.
- A CSS Extension library is simply CSS on Steroids, unopinionated, and completely customizable.
- A Behavior Library is a UI library that defines behavior for your UI components but not the styling, these are again unopinionated and completely customizable.
- A Style System is a UI library that defines both the Design/styling of the UI components and the behavior of those UI components. These are opinionated and extremely difficult to customize.
- Most of the time you may use a Hybrid UI Library that is a combination of any of the two UI library categories.
You may follow me on Twitter, LinkedIn, or right here on Medium where I am active and share similar content.
