盘点2023年国内大厂的前端组件库,opentiny好用吗,能否一战
目录
前言
一转眼已经是2023年了,作为前端开发工程师,我们一起盘点一下各个大厂使用的前端UI组件库吧。
华为云
OpenTiny
- 官网:https://opentiny.design/
- 技术栈:Vue、Angular
- 平台:PC中后台
OpenTiny是华为云云岭团队最新开源的前端品牌,提供跨端、跨框架、跨版本的UI组件库、开箱即用的管理系统模板和覆盖前端开发全流程的CLI工具,帮助开发者高效搭建Web应用。
可以看到 opentiny 提供了 TinyVue 和 TinyNG 两套UI组件库,分别对应了 Vue 和 Angular 两套技术栈,属于华为云出品的企业级设计体系,如果有用过华为云的小伙伴应该会比较熟悉,它的控制台页面就是使用的这套设计体系的组件库搭建的。
Vue 想必大家都很熟悉,不过国内的 Angular 技术栈的组件库确实很少见。
DevUI
- 官网:https://devui.design/home
- 技术栈:Angular(同时提供 Vue、React 对应版本)
- 平台:PC中后台
DevUI是华为云DevUI团队出品的一套组件库系列,属于比较早开源的一批组件库,主打Angular技术栈的UI组件库,通过开源建设也形成了Vue和React技术栈的组件库。
DevUI适用于企业级中后台项目,设计风格和OpenTiny比较相似,应该都是出自同一套规范。
腾讯
TDesign
- 官网:https://tdesign.tencent.com/
- 技术栈:Vue、React
- 平台:PC、Mobile、小程序
TDesign是腾讯出品的企业级设计体系,支持Vue和React技术栈,同时还支持微信小程序和QQ小程序,也算是腾讯系的一大特色。
阿里
Ant Design
- 官网:https://ant.design/index-cn
- 技术栈:React(同时提供 Vue、Angular 对应版本)
- 平台:PC中后台
蚂蚁大名鼎鼎的Antd,应该是很多React初学者和开发者一定用过的一套组件库,有着丰富的组件、完善的文档和演示,可以通过其组件的设计学到很多React编码思想。
通过社区合作,Antd也推出了Vue版本和Angular版本,也是国内除了华为外少有的Angular组件库。
Antd的设计风格保持了简洁、清新的风格,在5.0版本之后更是获得更加灵活地定制能力,API设计也更加简洁,总之是一款非常值得使用的组件库。
Element UI
- 官网:https://element-plus.gitee.io/zh-CN/
- 技术栈:Vue
- 平台:PC中后台
来自饿了么团队提供的一套 Vue 组件库,属于我学Vue的启蒙 UI 组件库了,在饿了么被阿里收购后,也算作阿里的一套组件库了,在Vue领域内也是一个影响力十分深远的UI组件库,仔细阅读其API,发现竟然和Antd有异曲同工之妙。
如果你的项目是基于Vue,不妨考虑一下Element UI。
字节
Arco
- 官网:https://arco.design/
- 技术栈:React、Vue
- 平台:PC企业级中后台
字节的中后台UI组件库,基本是字节自己的业务投在用,设计风格很现代,API很友好。整体体验下来React技术栈的组件库更完善一点,Vue次之。也是款很不错的前端UI组件库,有兴趣可以尝试一下。
semi design
- 官网:https://semi.design/zh-CN/
- 技术栈:React
- 平台:PC
抖音前端团队推出的基于React技术栈的组件库,非常年轻化的设计,整个组件库显得生动活泼。组件文档丰富且细致,提供了设计文档和用法的说明,组件的demo还提供了可实时编辑代码的能力。该组件库在抖音和字节内部也被用在了很多项目上。
总结
目前各大厂的组件库都趋于完善,常用的组件、国际化、图标、主题配置等能力都基本具备,更多的差异点在于各自组件库与自身业务的结合,例如华为云的组件库更多侧重于Angular技术栈,因为其内部众多云服务的页面使用了Angular技术栈开发,而腾讯的组件库提供了微信小程序和QQ小程序的版本,阿里和字节更是在技术上不断地深入探索,并且有着自己鲜明的特点。了解和使用大厂的组件库,一方面可以简化我们的开发工作,另一方面也能学到组件的API设计思想,从而在未来的业务代码开放中培养一个更好的设计思维。
PS: 本文只是简单盘点了一下当前各大厂的前端组件库,如果有遗漏欢迎在评论区补充。
联系我们
如果有对 OpenTiny 的开源项目感兴趣,欢迎添加小助手微信:opentiny-official,拉你进群,一起交流前端技术,一起玩开源。
OpenTiny 官网:https://opentiny.design/
OpenTiny 代码仓库:https://github.com/opentiny/
Vue 组件库:https://github.com/opentiny/tiny-vue(欢迎 Star 🌟)
Angular 组件库:https://github.com/opentiny/ng(欢迎 Star 🌟)