开发一款低代码组件库的思考

炫尘
2,049 阅读15分钟

Super Table 低代码框架

原文在语雀，掘金的这个编辑器复制过来有点奇怪

一、项目背景

  • 后台需求较多，且大多数交互流程比较单一，大多数时间都是代码拷贝修改，关注点较多，有时会改错而且也比较耗时，所以希望有更简单效率更高的的方式来开发后台模块

  • 产品分散在各个部门，交互样式都不统一，借机完成整合和统一

  • 前期做过一些 Demo，有一些技术积累，想要印证一下自己的思考

  • 大多数常规的希望可以用更简单的方式来实现，预估有 50% 的后台需求可以通过该组件实现

二、方案设计

功能模块

  • 规范

  • 设计、交互（UI 统一）

  • 接口（数据结构统一）

  • 框架

  • 预置组件及模块（覆盖基本功能）

  • 行为模块

  • 接口请求

  • 数据源

  • ...

  • 可扩展（覆盖更多场景）

  • 自定义组件

  • 自定义行为

  • 周边设施

  • 模板管理平台

  • 组件仓库

  • 脚手架

  • VS Code 插件

架构图

三、建设过程

核心依赖（仅列举 Super Table）

  • view-design: 开源 UI 组件库，Super Table 底层都是依赖该组件

其它功能性依赖不一一列举了

实现思路

  • UI 及接口规范先行

  • 由于这两块内容和研发工作关联性不是特别强，所以可以单独进行

  • 功能拆解实现

  • 组件注册

  • 使用 Vue Plugin 的方式，注册组件，同时定义一些基础配置项以便初始化时可以调整组件默认交互流程

  • 组件关系映射

  • 使用 Vue 组件，可以直接用 v-bind 将配置项绑定到 view-design 组件上

  • JSON Schema 到 View Design 组件的映射关系需要做好，部分特殊组件需要额外处理

  • 自定义组件

  • 由于内置组件仅覆盖常见的交互流程，如有特殊需求，仍需开发自定义组件，同时框架需要能够将组件嵌入到框架的渲染及交互流程中

  • 行为系统

  • 用于响应用户操作，维护组件关系，传递、调用接口等

这里要搞清楚要解决的是什么问题，上面的背景里基本都说了，所以为了降低开发成本，提高开发和测试效率，所以选择了低代码的方向，通过标准化的低代码框架来实现需求，提升开发效率，减少测试 bug~（页面是配置生成的，流程是标准化的，自然交互上的 bug 就会非常少）

目录结构

sz-super-table
├─ packages/ 框架主体
|  ├─ components/ 组件
|  ├─ libs/ 独立的依赖包
|  ├─ tools/ 自定义工具类
|  └─ index.js 主入口文件
├─ src/ 文档站点
└─ README.md

四、常见问题

  • 数据更新问题：由于很多操作都是在一个物理页面完成的，如果不能精细化管理数据流转，可能会导致数据展示异常、更新不及时等问题

五、项目总结

  • 整个项目陆陆续续迭代了 1 年，但项目主体完成大概在 20 人天，包含前期的设计、开发、流程验证

  • 初期已经能后覆盖 60% 的业务需求，但对于整体的效率提升却不够明显，因为配合的后端生产方式并没有变化，所以大多数的时间都耗在了等后端上。

  • 开发一个常规的 CRUD 页面，配置通常在 200~300行（包含独占一行的括号），时间大约 20 分钟，且流程交互都由组件规定，基本上很少有交互上的 Bug

  • 截至 2021 年底，已经能够覆盖 90% 的需求，10% 的场景并不是不能覆盖，只是开发对应的自定义组件成本相对较高，且流程复杂多变，通常不使用 SuperTable

六、未来展望

  • 组件联动能力扩展为跨页面组件联动

  • 降低业务定制化成本（时间成本 - 开发、维护、使用）

  • 性能提升，减少体积、按需加载

  • 生成源码、覆盖更多场景

答疑环节

  • 远程组件加载怎么做？

  • 由于我们时做 JSON 配置生成页面，因此我们远程组件不适用打包到项目里的方式，仅使用在线加载的方案

  • 需要考虑的问题

  • 重复加载：远程组件在同一页可能会有 v-for 导致需要渲染多次，此时要想办法规避重复加载的问题

  • 组件挂载：原有的自定义组件我们是在项目重挂载的，所以在页面渲染前组件已经准备完毕，但远程加载时，为了保证页面响应的速度，这里需要并行，所以需要考虑当页面已经完成了渲染，远程组件如何在加载完毕后渲染到指定位置，同时渲染后能够正常访问全局的方法与局部的数据

  • 组件开发：提供脚手架仓库，构建成 UMD 包，组件内添加自动绑定逻辑（判断全局 Vue 自动 Vue.component 当然还要判断组件名称是否已被占用）和手动挂载逻辑

  • 有没有考虑过使用 ESModule 作为远程组件方案？

  • 考虑过，单纯说远程加载这里来说 ESModule 一定时更简单的，只需要加上 CORS 即可，但是整体来看周边设施都没有用 ESModule 加载，改造成本太大了，可能在后期一些实验性的设计大多数定性之后，重构时再来采用 ESModule 方案

  • 性能如何，如何优化组件库性能？

  • 可以从多个方面来看

  • 首先是体积：体积越小，网络加载耗时越少

  • 其次时异步加载和按需加载：加载仅加载使用的组件，同时做好缓存单页内存缓存及跳页协商缓存

  • 最后是基础组件的代码质量

  • 基础组件可以做到按需加载吗？

  • 当然可以，但目前还没有特别考虑这一块，因为目前来说精力更多的还是放在如何覆盖更多场景和效率提升上，毕竟是内部 PC 端系统，网络及机器性能的影响相对较小，在其它方向有一定的沉淀和积累之后，回头再来做这里

  • 看起来是一个大而全的组件库，那除了基础组件外，一些特殊的不常用的组件是否可以拆出来？拆出来之后怎么按需加载？

  • 可以用远程自定义组件的方式来做，没太大区别

avatar
文章
阅读
粉丝