盤點(diǎn)2023年國內(nèi)大廠的前端組件庫，opentiny好用嗎，能否一戰(zhàn)

前言

一轉(zhuǎn)眼已經(jīng)是2023年了，作為前端開發(fā)工程師，我們一起盤點(diǎn)一下各個大廠使用的前端UI組件庫吧。

華為云

OpenTiny

• 官網(wǎng)：https://opentiny.design/

• 技術(shù)棧：Vue、Angular

• 平臺：PC中后臺

OpenTiny是華為云云嶺團(tuán)隊(duì)最新開源的前端品牌，提供跨端、跨框架、跨版本的UI組件庫、開箱即用的管理系統(tǒng)模板和覆蓋前端開發(fā)全流程的CLI工具，幫助開發(fā)者高效搭建Web應(yīng)用。

可以看到 opentiny 提供了 TinyVue 和 TinyNG 兩套UI組件庫，分別對應(yīng)了 Vue 和 Angular 兩套技術(shù)棧，屬于華為云出品的企業(yè)級設(shè)計(jì)體系，如果有用過華為云的小伙伴應(yīng)該會比較熟悉，它的控制臺頁面就是使用的這套設(shè)計(jì)體系的組件庫搭建的。

Vue 想必大家都很熟悉，不過國內(nèi)的 Angular 技術(shù)棧的組件庫確實(shí)很少見。

DevUI

• 官網(wǎng)：https://devui.design/home

• 技術(shù)棧：Angular（同時提供 Vue、React 對應(yīng)版本）

• 平臺：PC中后臺

DevUI是華為云DevUI團(tuán)隊(duì)出品的一套組件庫系列，屬于比較早開源的一批組件庫，主打Angular技術(shù)棧的UI組件庫，通過開源建設(shè)也形成了Vue和React技術(shù)棧的組件庫。

DevUI適用于企業(yè)級中后臺項(xiàng)目，設(shè)計(jì)風(fēng)格和OpenTiny比較相似，應(yīng)該都是出自同一套規(guī)范。

騰訊

TDesign

• 官網(wǎng)：https://tdesign.tencent.com/

• 技術(shù)棧：Vue、React

• 平臺：PC、Mobile、小程序

TDesign是騰訊出品的企業(yè)級設(shè)計(jì)體系，支持Vue和React技術(shù)棧，同時還支持微信小程序和QQ小程序，也算是騰訊系的一大特色。

阿里

Ant Design

• 官網(wǎng)：https://ant.design/index-cn

• 技術(shù)棧：React（同時提供 Vue、Angular 對應(yīng)版本）

• 平臺：PC中后臺

螞蟻大名鼎鼎的Antd，應(yīng)該是很多React初學(xué)者和開發(fā)者一定用過的一套組件庫，有著豐富的組件、完善的文檔和演示，可以通過其組件的設(shè)計(jì)學(xué)到很多React編碼思想。

通過社區(qū)合作，Antd也推出了Vue版本和Angular版本，也是國內(nèi)除了華為外少有的Angular組件庫。

Antd的設(shè)計(jì)風(fēng)格保持了簡潔、清新的風(fēng)格，在5.0版本之后更是獲得更加靈活地定制能力，API設(shè)計(jì)也更加簡潔，總之是一款非常值得使用的組件庫。

Element UI

• 官網(wǎng)：https://element-plus.gitee.io/zh-CN/

• 技術(shù)棧：Vue

• 平臺：PC中后臺

來自餓了么團(tuán)隊(duì)提供的一套 Vue 組件庫，屬于我學(xué)Vue的啟蒙 UI 組件庫了，在餓了么被阿里收購后，也算作阿里的一套組件庫了，在Vue領(lǐng)域內(nèi)也是一個影響力十分深遠(yuǎn)的UI組件庫，仔細(xì)閱讀其API，發(fā)現(xiàn)竟然和Antd有異曲同工之妙。

如果你的項(xiàng)目是基于Vue，不妨考慮一下Element UI。

字節(jié)

Arco

• 官網(wǎng)：https://arco.design/

• 技術(shù)棧：React、Vue

• 平臺：PC企業(yè)級中后臺

字節(jié)的中后臺UI組件庫，基本是字節(jié)自己的業(yè)務(wù)投在用，設(shè)計(jì)風(fēng)格很現(xiàn)代，API很友好。整體體驗(yàn)下來React技術(shù)棧的組件庫更完善一點(diǎn)，Vue次之。也是款很不錯的前端UI組件庫，有興趣可以嘗試一下。

semi design

• 官網(wǎng)：https://semi.design/zh-CN/

• 技術(shù)棧：React

• 平臺：PC

抖音前端團(tuán)隊(duì)推出的基于React技術(shù)棧的組件庫，非常年輕化的設(shè)計(jì)，整個組件庫顯得生動活潑。組件文檔豐富且細(xì)致，提供了設(shè)計(jì)文檔和用法的說明，組件的demo還提供了可實(shí)時編輯代碼的能力。該組件庫在抖音和字節(jié)內(nèi)部也被用在了很多項(xiàng)目上。

總結(jié)

目前各大廠的組件庫都趨于完善，常用的組件、國際化、圖標(biāo)、主題配置等能力都基本具備，更多的差異點(diǎn)在于各自組件庫與自身業(yè)務(wù)的結(jié)合，例如華為云的組件庫更多側(cè)重于Angular技術(shù)棧，因?yàn)槠鋬?nèi)部眾多云服務(wù)的頁面使用了Angular技術(shù)棧開發(fā)，而騰訊的組件庫提供了微信小程序和QQ小程序的版本，阿里和字節(jié)更是在技術(shù)上不斷地深入探索，并且有著自己鮮明的特點(diǎn)。了解和使用大廠的組件庫，一方面可以簡化我們的開發(fā)工作，另一方面也能學(xué)到組件的API設(shè)計(jì)思想，從而在未來的業(yè)務(wù)代碼開放中培養(yǎng)一個更好的設(shè)計(jì)思維。

PS: 本文只是簡單盤點(diǎn)了一下當(dāng)前各大廠的前端組件庫，如果有遺漏歡迎在評論區(qū)補(bǔ)充。

聯(lián)系我們

如果有對?OpenTiny?的開源項(xiàng)目感興趣，歡迎添加小助手微信：opentiny-official，拉你進(jìn)群，一起交流前端技術(shù)，一起玩開源。

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉庫：https://github.com/opentiny/

Vue 組件庫：https://github.com/opentiny/tiny-vue（歡迎 Star ??）

Angular 組件庫：https://github.com/opentiny/ng（歡迎 Star ??）