摘要:DevUI 是一款面向企業中後臺產品的開源前端解決方案,它倡導沉浸
、靈活
、至簡
的設計價值觀,提倡設計者為真實的需求服務,為多數人的設計,拒絕譁眾取寵、取悅眼球的設計。如果你正在開發 ToB
的工具類產品
,DevUI 將是一個很不錯的選擇!
DevUI是一支兼具設計視角和工程視角的團隊,服務於華為雲DevCloud平臺和華為內部數箇中後臺系統,服務於設計師和前端工程師。
官方網站:devui.design
Ng元件庫:ng-devui(歡迎Star)
官方交流:新增DevUI小助手(devui-official)
DevUIHelper外掛:DevUIHelper-LSP(歡迎Star)
Angular 是一款能夠跨 Web、移動 Web、移動應用、原生應用和桌面原生應用多個平臺的前端框架,經過數十年的發展,已形成了一個龐大的生態,基於Angular的元件庫也是多如牛毛。
2021年如果你想嘗試 Angular 框架,以下 Angular 元件庫或許是不錯的選擇!
首先要推薦的,當然是 Angular 官方的 Material 元件庫,Material Design 是 Google 的一套設計體系。
基於這套設計體系,官方和社群都提供了各種元件庫,有Web端(Angular/React/Vue)的,也有行動端(Android/iOS/Flutter)的。
其中 Angular 版本的 Material 元件庫,現在已經是Angular官方指定的元件庫,所以受眾特別多,不管是在Github的Star/Fork數,還是在NPM的周下載量都是TOP 1的。
以下是2021年4月19日的資料:
指標 | 數值 |
---|---|
Star | 21.4k |
Fork | 5.7k |
NPM周下載 | 891,480 |
Material Design for Angular早在2016年3月份就釋出了第一個基於Angular 2的Alpha版本:2.0.0-alpha.0
,中間演進了一年多,遲遲沒有釋出2.0的正式版本,直到第二年12月才釋出基於Angular 5的5.0.0
正式版本。
不過 Material Design for Angular 卻不是最早的 Angular 元件庫,後面我們將要介紹的 PrimeNG 比它更早誕生,但 Material 毫無疑問是最流行和最受歡迎的。
Bootstrap 是Twitter推出的一個用於前端開發的開源工具包,也是非常受歡迎的HTML/CSS/JS框架,用於開發響應式佈局、移動裝置優先的Web應用。
它有多受歡迎呢?我們看一組資料就知道了。
框架/庫 | Star數 |
---|---|
Vue | 182k |
React | 167k |
Bootstrap | 149k |
Angular | 72.5k |
從以上資料可以看到,Bootstrap甚至比Angular框架的Star數還多,可見Bootstrap的受歡迎程度,因此基於Bootstrap的Angular元件庫也很受歡迎就不難想象了。
基於Bootstrap的Angular元件庫主要有兩款:
NG Bootstrap 和 NGX Bootstrap 是兩個不同的專案團隊的兩個不同的專案,它們都可以只使用Bootstrap無需使用jQuery就可以在Angular中使用。主要區別在於它們所支援的Bootstrap版本:
從Github Star/Fork和NPM周下載量來看,它們也是相當的,NG Bootstrap似乎略佔上風:
指標 | NG Bootstrap | NGX Bootstrap |
---|---|---|
Star | 7.7k | 5.3k |
Fork | 1.4k | 1.7k |
NPM周下載 | 386,485 | 235,662 |
從版本釋出時間來看,NGX Bootstrap則要早一些:
指標 | NG Bootstrap | NGX Bootstrap |
---|---|---|
首次釋出版本 | 1.0.0-alpha.0 2016年7月 | 1.0.1-beta.2 2016年1月 |
第一個正式版本 | 1.0.0 2018年1月 | 1.0.4 2016年2月 |
從以上資料可以看出,不管是首次釋出版本還是第一個正式版本,NGX Bootstrap都比NG Bootstrap早些,特別是第一個正式版本的釋出時間,NGX Bootstrap比NG Bootstrap早了整整兩年。
因此我們可以大致瞭解,NGX Bootstrap是一個比較早的庫,並且能支援Angular 2+和Bootstrap 3+,而NG Bootstrap則比較新,需要Angular 5+和Bootstrap 4+才能使用。
如果你的專案是一個使用Angular 5+和Bootstrap 4+的新專案,建議使用NG Bootstrap,否則就使用NGX Bootstrap。
第三個要重點推薦的Angular元件庫是基於Ant Design設計體系的NG Zorro元件庫。
Ant Design 是螞蟻金服的一門設計語言,經歷過多年的迭代和積累,它對UI的設計思想已經成為一套事實標準,受到眾多前端開發者及企業的追捧和喜愛,也是React開發者手中的神兵利器。
作為Ant Design的Angular實現,NG Zorro不僅繼承了Ant Design的獨到思想和極致體驗,同時也結合了Angular框架的優點和特性。元件的風格與Ant Design最新版本保持同步,元件的介面也儘量保持與Ant Design的React版本一致。
說Zorro是國內最受歡迎的Angular元件庫,相信沒有人會反對。
2017年8月,Zorro正式開源並行布第一個版本:0.5.0-rc.0
,經過一年的演進,於第二年6月釋出1.0版本。
從知乎來看,Zorro的社群反響非常好:https://www.zhihu.com/question/63992236
以下是2021年4月19日的資料:
指標 | 數值 |
---|---|
Star | 7.4k |
Fork | 2.6k |
NPM周下載 | 35,941 |
Nebular 是一個可客製化的Angular UI庫,基於Eva Design設計規範,包含40多個UI元件,4個可視主題,認證和安全模組。
Nebular包含的元件並不多,只有40+個,不過它包含了很多實用的工具,比如:主題包、登入認證、角色鑑權管理、Admin系統等。
有這方面需求的話,還是可以嘗試的。
Nebular的釋出時間和Zorro的很接近,都是17年8月份釋出第一個版本,第二年釋出第一個正式版本,不過從Github Star/Fork和NPM周下載量來看,Nebular稍微遜色一些:
指標 | 數值 |
---|---|
Star | 7k |
Fork | 2.6k |
NPM周下載 | 17,037 |
接下來給大家推薦的PrimeNG也是一款國外的Angular元件庫,這是一款老牌 Angular 元件庫,2016年2月就釋出了第一個版本,釋出時間比官方的 Material 還早一些。
PrimeNG 的元件非常豐富,一共有90+個元件,可能是目前市面上最全的Angular元件庫了。
以下是 PrimeNG 的資料:
指標 | 數值 |
---|---|
Star | 6.7k |
Fork | 3.3k |
NPM周下載 | 260,712 |
Clarity也是一款有自己設計體系的Angular元件庫,基於Clarity Design設計語言,這和 Teambition 的Clarity Design名字一樣,但是是不同公司的不同產品,不要搞混。
指標 | 數值 |
---|---|
Star | 6.2k |
Fork | 701 |
NPM周下載 | 18,014 |
最後要推薦的是一款國內的新興 Angular 元件庫,叫 DevUI,基於 DevUI Design 設計語言。
DevUI 是一款面向企業中後臺產品的開源前端解決方案,它倡導沉浸
、靈活
、至簡
的設計價值觀,提倡設計者為真實的需求服務,為多數人的設計,拒絕譁眾取寵、取悅眼球的設計。
DevUI 是從華為雲 DevCloud 研發工具體系孵化出來的,最適合做 ToB 的工具類產品,因為這類產品不追求酷炫的樣式,而更在意工具是否穩定、使用起來是否高效,是否能真正讓使用者忘記工具,在使用工具的過程中達到心流狀態。
由於 DevCloud 是研發工具類的產品,場景豐富,這使得孵化於其中的 DevUI 形成了自己獨特的優勢,DevUI 提供了很多其他 UI 元件庫沒有的特色元件,比如甘特圖、象限圖,以及新出的分類搜尋、精靈導航等。
DevUI 在 2017年初的時候就已經在 DevCloud 眾多業務中使用,經過這許多年,DevUI 已經經受了 DevCloud 大量線上使用者的考驗,成為穩定、高效、體驗流暢的 Angular 元件庫。
如果你正在開發 ToB
的工具類產品
,DevUI 將是一個很不錯的選擇!
指標 | 數值 |
---|---|
Star | 638 |
Fork | 106 |
我們是DevUI團隊,歡迎來這裡和我們一起打造優雅高效的人機設計/研發體系。招聘郵箱:[email protected]。
文/DevUI Kagol
往期文章推薦