Rainbow Pro: 基于Vue 3和Naive UI的高级场景化组件库
Saturday, February 19, 2022
背景
组件是现代化前端开发最基础的抽象。组件库则是一系列组件的集合，现代化组件库通常来讲会基于一个设计系统（Design System）来构建，这样能够最大程度保证用户使用体验的一致性，同时从开发者角度来讲，学习成本和定制成本也会随之降低。从零开始实现一个通用型基础组件库，通常需要实现大约60-80个组件，至少需要1到2年的持续投入才能达到一个相对比较可用的状态。在大部分业务为导向的公司是不会有资源和意愿做这样的投入的。选择一个市场上成熟的开源基础组件库，在此基础之上进行微调无疑是一个最稳妥的选择，我十分不建议从零开始搭建一个基础组件库，以我的经验来讲很多时候最后都会演变为团队的一个沉重的负担。
那么如何选择基础组件库呢？先说结论，桌面端优先的项目，我会选择Naive UI。移动端优先的项目我会选择Vant。Naive UI作为去年开始崭露头角的选手，让我最为眼前一亮就是极端完整的功能集合（组件覆盖度，高性能虚拟滚动，风趣幽默的文档）、灵动大气设计系统以及业内首创的类型安全的主题定制功能。通过与作者在钉钉上面直接的交流，让我感受到作者对于这个项目的热情以及非常过硬的代码和前端技术功底。Naive UI的上手难度相对于Element Plus略微高一点，这个略高一点主要体现有些场景需要你能够熟练运用Render Function这个能力，我们知道大部分情况下Vue的用户习惯使用template，而Render Function大部分场景是为写底层组件库的人准备的，因为有些场景你不得不需要直接操作vnode。如果不排斥偶尔写一点Render Function，那么Naive UI几乎是完美的。顺便说一句，通过Vue官方提供的JSX插件，实际上你可以用JSX来写Render Function，开发体验上和React是十分接近的（一个小问题：目前Vite的热更新HMR对于某些Render Function的场景支持还有点问题）。
基础组件库是业务独立的，它不会与任何一个具体的业务绑定，一个成熟的业务项目随着时间的演变也会积累下来一个在业务项目内通用的组件库，我们通常称之为业务组件库。业务组件没有明显的界定标准，我观察下来大部分公司的做法就是建立一个components目录，然后往里面扔东西。这样其实和把所有代码都写在一个Vue文件里面相比也好不到哪里去，只是看上去它被分开了。一个良好设计实现的业务组件库应该有明确的使用场景，能够独立开发测试且交互逻辑和业务逻辑清晰的隔离以便两者可以独立演化。
什么是Rainbow Pro？
Rainbow Pro试图探索一种场景化组件库的开发模式，针对中后台应用开发过程中的以下几个典型场景进行抽象
- 表单逻辑复杂，大量的状态需要手动管理和计算，动不动一个表单Vue文件就写了几千行，后面人接手完全改不动
- 系统内页面有上百个，用户迫切需要一个搜索入口快速查找想要的页面及页面中的锚点
- 列表字段和过滤项超级多，一刷新就得重新选，费时费力，用户上手成本高，产品运营希望提供预定义的数据视图来减少用户使用的成本
API经过了几次迭代，已经相对稳定，基于Vue 3/TypeScript/Vite现代化前端技术栈，整体的开发体验相比较之前（Vue 2/JavaScript/Webpack）来说上了一个层次。随着2月7号Vue 3 正式成为Latest版本，我强烈推荐新的项目采用上述的技术栈来开发，而老项目可以采用微前端的方式进行逐步的替代。
Rainbow Pro是Rainbow.js家族成员。Rainbow.js是一个现代化大型Web应用解决方案，旨在解决要求多人开发，长期维护的大型Web应用的整体架构设计以及相关工具与研发流程的问题。在后续的文章中，我会陆续介绍Rainbow Builder和Rainbow Architecture的内容。
如何使用
最低要求
Vue.js: 3.2.30+，Vue-Router 4+
浏览器：Chrome 70+, Edge 79+, Safari 12+, QQ浏览器 10+, 360浏览器 12+
Naive UI：2.25.2+
立刻开始
安装
npm install @ferainbow/ui --save
配置RainbowPlugin
import { RainbowPlugin } from '@ferainbow/ui';
import '@ferainbow/ui/dist/style.css';
const app = <create a Vue 3 app object>
app.use(RainbowPlugin);
恭喜你🎉！所有准备工作都已经完成了！
未来规划
Rainbow Pro在功能上相对比较完善了，后续会在类型定义、主题定制、国际化和文档等方面继续完善。
Rainbow Builder在低代码页面搭建方向进行探索，目标是实现一个轻量级嵌入式页面编辑器，应用场景包括H5营销落地页，自助式数据仪表盘等等。
Rainbow Architecture目标在于解决多人参与的大型前端项目整体架构设计问题，涵盖设计模式，工具及相关研发流程。