Abstract: DevUI is an open source front-end solution for back-end products in enterprises. It advocates immersive, flexible and simple design values. It advocates designers to serve the real needs and design for the majority of people. If you are developing ToB tools, DevUI is a great choice!
DevUI is a team with both design and engineering perspectives, serving huawei Cloud DevCloud platform and several huawei internal middle and background systems, as well as designers and front-end engineers. Design Ng Component library: ng-Devui (Welcome Star)
Angular is a front-end framework that spans the Web, mobile Web, mobile apps, native apps, and desktop native apps. Over the decades, it has built up a huge ecosystem of Angular component libraries.
If you want to try out the Angular framework in 2021, the following Angular component libraries might be a good choice!
1. Material Design for Angular
The first thing to recommend, of course, is Angular’s official Material Component library. Material Design is Google’s Design framework.
Based on this design, there are a variety of official and community component libraries available, both on the Web (Angular/React/Vue) and on mobile (Android/iOS/Flutter).
The Angular version of the Material component library is now an official Angular component library, so it has a very large audience. It is the TOP one in both Star/Fork numbers on Github and weekly downloads on NPM.
Here are the numbers as of April 19, 2021:
| indicators | The numerical |
|---|---|
| Star | 21.4 k. |
| Fork | 5.7 k. |
| Week of NPM download | 891480 |
The first Angular 2 based Alpha release was released back in March 2016: After more than a year of evolution, there was no official release of 2.0. It was not until The following December that 5.0.0 based on Angular 5 was released.
While Material Design for Angular is not the earliest Angular component library (PrimeNG, as we’ll see later, predates it), Material is undoubtedly the most popular and popular.
2. NG/NGX Bootstrap
Bootstrap is an open source toolkit for front-end development and a popular HTML/CSS/JS framework for developing responsive, mobile-first Web applications.
How popular is it? Let’s look at one set of data.
| Frame/library | Number of Star |
|---|---|
| Vue | 182k |
| React | 167k |
| Bootstrap | 149k |
| Angular | 72.5 k. |
As you can see from the data above, Bootstrap has more stars than even the Angular framework. Given the popularity of Bootstrap, it’s not hard to imagine the popularity of Angular component libraries based on Bootstrap.
There are two Angular component libraries based on Bootstrap:
- NG Bootstrap
- NGX Bootstrap
NG Bootstrap and NGX Bootstrap are two different projects from two different project teams, both of which can be used in Angular without using jQuery using Bootstrap. The main differences are the versions of Bootstrap they support:
- NGX Bootstrap Supports Bootstrap 3 and 4
- NG Bootstrap supports Bootstrap 4 and requires Angular5+
Judging by the weekly downloads of Github Star/Fork and NPM, they’re pretty much the same, and NG Bootstrap seems to have the upper hand:
| indicators | NG Bootstrap | NGX Bootstrap |
|---|---|---|
| Star | 7.7 k. | 5.3 k. |
| Fork | 1.4 k. | 1.7 k. |
| Week of NPM download | 386485 | 235662 |
In terms of release time, NGX Bootstrap is a bit earlier:
| indicators | NG Bootstrap | NGX Bootstrap |
|---|---|---|
| First release | 1.0.0-alpha.0 July 2016 | 1.0.1-beta.2 January 2016 |
| This issue is the first official release | January 2018 | 1.0.4 February 2016 |
As you can see, NGX Bootstrap was released two years earlier than NG Bootstrap, both in the first release and the first official release.
NGX Bootstrap is an older library that supports Angular 2+ and Bootstrap 3+, while NG Bootstrap is newer and requires Angular 5+ and Bootstrap 4+.
If your project is a new one that uses Angular 5+ and Bootstrap 4+, use NG Bootstrap, otherwise use NGX Bootstrap.
3. NG Zorro
The third Angular component library to highlight is the NG Zorro component library based on The Ant Design architecture.
Ant Design is a Design language of Ant Financial. After years of iteration and accumulation, Ant Design has become a set of de facto standards for UI Design, which is sought after and loved by many front-end developers and enterprises. It is also a magic weapon in the hands of React developers.
As an Angular implementation of Ant Design, NG Zorro not only inherits the original thinking and extreme experience of Ant Design, but also combines the benefits and features of the Angular framework. The component’s style is kept in sync with the latest version of Ant Design, and the component’s interface is kept as consistent as possible with the React version of Ant Design.
No one would disagree that Zorro is the most popular Angular component library in the country.
In August 2017, Zorro officially opened source and released the first version: 0.5.0-RC.0. After a year of evolution, version 1.0 was released in June the following year.
From the point of zhihu, Zorro community has very good: www.zhihu.com/question/63…
Here are the numbers as of April 19, 2021:
| indicators | The numerical |
|---|---|
| Star | 7.4 k. |
| Fork | 2.6 k. |
| Week of NPM download | 35941 |
4. Nebular
Nebular is a customizable Angular UI library based on the Eva Design specification, and contains over 40 UI components, four visual themes, authentication, and security modules.
Nebular contains only 40+ components, but it contains useful tools such as theme packages, login authentication, role authentication management, and the Admin system.
If have this respect demand, still can try.
At the same time, The Github Star/Fork and NPM weekly downloads show that Nebular lags behind Zorro, whose first release is in August 2017.
| indicators | The numerical |
|---|---|
| Star | 7k |
| Fork | 2.6 k. |
| Week of NPM download | 17037 |
5. PrimeNG
PrimeNG is an old Angular component library. The first version of the library was released in February 2016, a little earlier than the official Material.
With 90+ components, PrimeNG is probably the most complete Angular component library on the market.
Here is PrimeNG’s data:
| indicators | The numerical |
|---|---|
| Star | 6.7 k. |
| Fork | 3.3 k. |
| Week of NPM download | 260712 |
6. Clarity
Clarity is an Angular component library with its own Design, based on the Clarity Design language. This is the same name as Teambition’s Clarity Design, but it’s a different product from a different company.
| indicators | The numerical |
|---|---|
| Star | 6.2 k. |
| Fork | 701 |
| Week of NPM download | 18014 |
7. DevUI
The final recommendation is an emerging Angular component library called DevUI, based on the DevUI Design language.
DevUI is an open source front-end solution for back-end products in enterprises. It advocates the design values of immersion, flexibility and simplicity. It advocates designers to serve the real needs and design for the majority of people, and rejects the sensationalizing and eye-pleasing design.
DevUI is hatched from huawei Cloud DevCloud research and development tool system. It is most suitable for ToB tool products, because these products do not pursue cool style, but care more about whether the tools are stable, whether they are used efficiently, whether they can really let users forget the tools and achieve flow state in the process of using the tools.
Because DevCloud is a product of development tools and rich scenarios, DevUI, which was incubated in DevCloud, has its own unique advantage. DevUI provides many features that other UI component libraries do not, such as Gantt charts, quadrant charts, and the new category search, Sprite navigation, and so on.
DevUI has been in use in many DevCloud businesses since early 2017. Over the years, DevUI has been tested by DevCloud’s large online audience as a stable, efficient, and streamlined Angular component library.
If you are developing ToB tools, DevUI is a great choice!
| indicators | The numerical |
|---|---|
| Star | 638 |
| Fork | 106 |
Join us
We are DevUI team, welcome to come here and build elegant and efficient man-machine design/R&D system with us. Recruitment email: [email protected].
The text/DevUI Kagol
Previous article recommended
How do WE know if people like our new features?
How to Build Your Own Angular Component Library
How to Use quadrant Components