交付前端技术规划之提升效率和质量

一、我们遇到的问题（前端开发的痛点）

实际工作中我们会遇到很多问题，这些问题阻碍了我们的开发效率，比如以下问题：

重复的工作需要重复的做，开发人员也很无聊和枯燥，能否通过工具来替代？
老项目可能没有多级流转、池保理、ABS等模块，当客户需要这些模块时，比如多级流转对熟人一般都需要4周左右的开发和测试时间，新人更很难做；
交付团队的前端同事积累了很多项目经验、模板、组件，但由于缺乏交流平台和渠道，这些经验由于缺乏交流和共享平台，无法与异地、其他组甚至是自己组内同事共享，导致很多人闭门造车，重复造轮子，无法发挥团队的力量；
一些无聊的页面开发工作能否通过类似于低代码的拖拽来实现并能生成源码并一键应用到项目中；
优秀的代码段如何共享并能够快速使用到实际项目中；
中台提供的基础库和物料库很难满足赋能的业务需求，比如上传组件还需要做大量封装，做成组件，这些资源如何共享？
...

对于以上问题，我们在中台基础架构的基础上规划了更符合交付团队的以交付-cli、交付物料库、交付页面生成器为核心的工具，并将三者打通，实现资源共享，最终通过交付-cli提升存量与新项目的开发效率，通过交付物料库作为交流平台，来提高代码的标准化与规范化，交付技术规划架构图如下所示，

交付前端团队的规划以中台的规范层、工具层、基础层、业务层和应用层为基础，实现更适应交付团队背景的cli、物料平台、页面设计器，详细架构如下：

二、解决痛点的探索（交付前端技术规划）

1、交付-cli

交付-cli的目标是解决如何把重复的工作内容自动化和工具化、约束代码的规范等问题，以提效和规范化团队代码为主要目标，架构图如下：

（1）已完成

目前已完成技术选型，工具的搭建并实现了以下基本功能：

支持业务项目初始化
支持在业务项目中使用物料，快速生成页面及组件

（2）待规划

梳理并抽离多级流转、池保理、ABS、建档小程序等子功能模块，在init命令提供模板和系统子功能选择入口，拉取模板一键生成代码部署到本地工程；
开发维护物料并同步到赋能物料库等；
...

2、交付物料库

交付物料库是物料的管理平台，包括页面生成器同步过来的组件、通过交付-cli开发同步过来的组件以及后续赋能业务通用的npm工具包等，也是交付前端团队的交流和资源积累平台。

（1）已完成

服务端技术选型为Nestjs、Mysql、Redis
支持物料文件上传、下载、查询物料列表、版本物料动态和物料贡献统计
基本的登录权限控制
首页支持展示最新的前端资讯
支持展示前端开发中会使用的部分工具及其链接

（2）待规划

代码片段管理
集成公司的单点登录或者企业微信扫码登录
支持物料预览
支持自定义物料预览与文档
支持上传物料模板
物料vscode插件

3、交付页面设计器

交付页面生成器是一种类低代码工具，帮助开发人员快速生成前端页面的代码结构和布局。比如当我们开发新的页面的时候，会配置大量的form、table等，这些重复的工作会浪费我们很多精力，页面生成器的设计目的是通过拖拽组件的功能配置页面&生成源码，页面源码可以会作为物料同步到物料平台，通过cli一键应用到实际项目中。