others- Top 9 trending open source UI components libraries or UI frameworks in 2022

Nov 21, 2021

1. Purpose

In this post, I would try to list open source UI component libraries or UI frameworks that would be trending in 2022, I would try to make an ordered list of them by using quantitive method. Yes, 2022 is coming, are you ready for 2022?

2.1 What is UI componet library?

UI component is just like a block in LEGO games, you can use it to build any type of User interfaces in any type of applications, including web/mobile/big screen etc. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around; think buttons, scrollbars, menu items and checkboxes.

Nowadays, frontend programmers are using javascript frameworks to build UI, including jQuery/Angular.js/Vue.js/React.js. jQuery is an oldstyled (or freestyle) javascript library, and the other three(react/angular/vue) is trending in frontend development. They are all modular and easy to use. We can use them to bulid UI components that can be reused across applications, which is the most important part in current enterprises, because the resuage would decrease costs and increase quality / stability / velocity for enterprises.

Regarding to vue/angular/react, we should talk more about the MVVM pattern, which is the de facto standard in frontend development.The Model-View-ViewModel (MVVM) pattern helps to cleanly separate the business and presentation logic of an application from its user interface (UI). React.js is just a view layer , it can used in MVC or MVVM projects, and vue.js/angular.js is mostly a MVVM pattern library.

Comparing to MVC patern, MVVM focus on the relationship of Model and View, Js libaries like vue.js/angular.js just act as the ViewModel layer, they maintains the virtual DOM and keep everything on sync by reacting the change of Model or View.

2.2 Why is the UI component library important for state-of-art UI designer and programmers?

There are some reasons for programming with UI components instead of using HTML/CSS directly.

Keep your website/app UI modern and fantasic

Because UI libraries are built with state-of-the-art technologies ,and they are designed by mature and advanced designers.
Reduce the work and speed up your development

Instead of build everything(Buttons/Menus/Forms) from ground up, you should build it with components, it would speed up your development
Synchronize the styles in your different applications/websites

If you build more than one website/application , you should sync the styles of them, you can do this job by using the same UI component library.

I choose libraries by the following factors:

Factor #1: The frequency of the code commitment.

For example, the AcroDesign libary has a frequent development in October, but little commits in November:
Factor #2/3/4: The activity of the community(issues/problems/PRs)

How long would the issue be fixed? How many issues posted in a period? What are they talking about in the discussion boards? How many questions posted ? How many PR(pull requests) submited? The following picture shows the activity of the Flutter communit, it’s an active and responsive project.

And flutter is active in stackoverflow.com:
Factor #5: The documentation of the libaray should be complete and full of examples

We can find good examples,tutorials and advanced development documents from the official website of the library. It should look like this:
Factor #6: The popularity in developers

The UI library should be popular in frontend developers, most of them are learning it and trying to use it in their projects. This can be reflected by the Stars of the project:

GitHub stars

The GitHub Stars program offers impactful developers an opportunity to showcase their work, reach more people, and shape the future of GitHub. If you know an inspiring community leader, we want to hear about it.
Factor #7: The maintainability(or SLA) of the library

We know there exists an SLA(Service Level Agreement) in software operations domain, it requires the vendor of the software to keep the software running to meet the user’s requirements. The same rule applies to the UI library choice, the vendors or the community should keep the library active, we can rely on it if it’s developed by big companies like Google, Microsoft or Byte Dance etc, because they have more resources and impacts/responsibilities to realize this target.
Factor #8: The scalability of the library

Sometimes, we want to scale the library to meet the custom requirements from users. There should be some extension points in the library, so we can use it create plugins or customizations for the library.

To conclude, there are 8 factors to be considered when choosing a UI library(or other types library):

	Factor Name	Priority
1	Code commit frequency	15%
2	Activity of the community(issues)	10%
3	Activity of the community(questions)	20%
4	Activity of the community(pull requests)	5%
5	Integrity of the document	10%
6	popularity in developers	30%
7	maintainability of the library	5%
8	scalability of the library	5%

I give priority to each of the factors, which would be calculated in the result score, The priority is defined by my expertise, maybe it’s not very scientific, if you have any new ideas, please let me know.

The following UI libraries/SDK/frameworks are listed by their scores, from high to low. You can pick any library you like to try in 2022.

2.4.1 Bootstrap

Bootstrap(Originated from twitter) is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Main features of bootstrap:

Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of informative web pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap’s choices of color, size, font and layout to that project. As such, the primary factor is whether the developers in charge find those choices to their liking. Once added to a project, Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to further customize the appearance of their contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more prominent pull quotes, and text with a highlight.

Basic information:

Officical site: https://getbootstrap.com
Github: https://github.com/twbs/bootstrap
Dependency: No special dependency

Score of Bootstrap:

2.4.2 Ant Design(antd)

Ant Design(antd) is a React UI library that has a plethora of easy-to-use components that are useful for building elegant user interfaces. Created by Chinese conglomerate Alibaba, Ant Design is used by several big names: Alibaba (of course), Tencent, Baidu, and more.

It’s main features:

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization in every detail.

Basic information:

Officical site: https://ant.design
Github: https://github.com/ant-design/ant-design
Dependency: React

Score of ant design:

2.4.3 MUI(Material-UI)

MUI(Material-UI) provides a robust, customizable, and accessible library of foundational and advanced components, enabling us to build our own design system and develop React applications faster.

MUI(Material-UI) is simply a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since the developers do not need to write everything from scratch.

Basic information of MUI(Material-UI) :

Officical site: https://mui.com
Github: https://github.com/mui-org/material-ui
Dependency: React

Score of MUI(Material-UI) :

2.4.4 Quasar

Quasar is a Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps. With quasar , you can build high-performance & high-quality Vue.js 3 user interfaces in record time.

Main features of Quasar:

It’s based on Vue.js
You get a state-of-the-art UI (that follows Material Guidelines) for your websites and apps out of the box
Best support for desktop and mobile browsers (including iOS Safari!) out of the box
Best-in-class support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app & Browser Extension) and the best developer experience through a tight integration with our own CLI
It’s easily customizable (CSS) and extendable (JS)
It’s the most performance-focused framework
Has a regular release cycle inclusive of new features
Handles the whole development experience (including even creating your app’s icons and splash screens)

Basic information of Quasar :

Officical site: https://quasar.dev/
Github: https://github.com/quasarframework/quasar
Dependency: Vue

Score of Quasar :

2.4.5 jQueryUI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Main features of jQueryUI

jQueryUI facilitates you to make highly interactive web applications.
It is open source and free to use.
It provides a powerful theme mechanism.
It is very stable and maintenance friendly.
It provides an extensive browser support.
Good documentation.

Basic information of jQueryUI :

Officical site: https://jqueryui.com
Github: https://github.com/jquery/jquery-ui
Dependency: jQuery

Score of jQueryUI :

2.4.6 Element Plus

Element Plus is a Vue 3.0 based component library for developers, designers and product managers. It provides a cool design language, many customization options and a detailed documentation

Element Plus is a brand new project based on the latest Vue 3.0 upgrade and adaptation to Element UI, using TypeScript + Composition API to refactor. The official claims to have almost rewritten every line of Element UI code in the most suitable way for Vue 3.0.

Main features of Element Plus:

Consistency
- Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to.
- Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
Feedback
- Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects.
- Visual feedback: reflect current state by updating or rearranging elements of the page.
Efficiency
- Simplify the process: keep operating process simple and intuitive.
- Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions.
- Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Controllability
- Decision making: giving advices about operations is acceptable, but do not make decisions for the users.
- Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

Basic information of Element Plus :

Officical site: https://element-plus.org/en-US/
Github: https://github.com/element-plus/element-plus
Dependency: vue.js

Score of Element Plus :

2.4.7 PrimeNG

It’s an Angular UI Component Library, it’s comprehensive and sophisticated. It provides a rich set of native Angular UI components.

PrimeNG is a collection of rich UI components for Angular. Components are open source and free to use under MIT License. It is developed by PrimeTek Informatics, a vendor developing open source UI solutions.

Main features of PrimeNG:

90+ Components. The most complete set of native widgets featuring 80+ easy to use components for all your UI requirements.
Open Source. Hosted at GitHub, all widgets are open source and free to use under MIT license. …
Community is active

Basic information of PrimeNG:

Officical site:https://www.primefaces.org/primeng/
Github: https://github.com/primefaces/primeng
Dependency: Angular.js, but also provide prime-react and prime-vue to support react and vue

Scores of PrimeNG:

#####

2.4.8 Riot

Riot is an “open stack”. It is mainly for developers who don’t want to be held back by the framework. The generalized tools it provides allow developers to mix and match design patterns. A system like Facebook Flux can be self-made

riot

Riot is a Simple and elegant component-based UI library, it is free, open source and licensed under the MIT License.. It’s called riot because:

Riot is against the current trend of boilerplate and unneeded complexity. We think that a small, powerful API and concise syntax are extremely important things on a client-side library. Riot also provides an unopinionated stack that gives developers the freedom to work with the best technology they like.

Basic information of Riot :

Officical site: https://riot.js.org/
Github: https://github.com/riot/riot
Dependency: nothing

Main features of Riot:

Custom label
Quick start grammar
Virtual DOM
Ultra small

Score of Riot:

2.4.9 Mint UI

Mint UI provides abundant CSS and JS components for building mobile applications. With it, you can create web pages in cohesive style ever faster. To avoid unnecessary repaint and reflows, Mint UI handles animations using CSS3, so that users can enjoy smooth motions even on mobile devices.

According to the library homepage, Mint UI is a library of mobile UI elements for Vue. js.

Basic information of Mint UI :

Officical site: https://mint-ui.github.io/#!/en
Github: https://github.com/ElemeFE/mint-ui
Dependency: Vue.js

Main features of Mint UI:

Mint UI Contains rich CSS and JS components, which can meet the needs of daily mobile development.
Load components on demand in a true sense.
Taking into account the performance threshold of the mobile terminal, Mint UI uses CSS3 to handle various dynamic effects, avoid unnecessary redrawing and rearrangement of the browser, so that users can get a smooth and smooth experience.

Score of Mint UI:

3. Summary

Here is the graph that shows the rank and scores of the UI libraries:

In this post, I tried to make a prediction on the front end UI libraries that would be trending in 2022 or the future, you can see that there are so many libraries , they are all great. I tried to use a quantitive method to give them a score, Hope it helps for you. That’s it, thanks for your reading.