随着前端发展的越来越工程化,越来越繁琐复杂,前端能做的事情越来越多,最近几年 前端基建 也是越来越火热。但是实际上很多公司并不注重前端,更别谈能会有人来做基建。对于没有基建的前端,我们能做些什么呢?
我个人推荐可以从工具、CLI 入手,因为这些往往是独立,不会像推规范、搞数据埋点、日志上报、整 BFF 那样对团队或者现有代码有入侵性。即便在自己空闲时间也能弄一弄,弄得好可以在团队推广使用,弄得不好也无所谓,可以当作练手提升自己能力。
什么是前端基建?
前端基建 指的是业务团队内的前端工程师执行的一些基础建设,包括了 前端规范文档、前端脚手架、前端模板、前端组件库、前端工具库、前端 BFF、前端 CI/CD 的构建部署、前端数据埋点 等等;
前端基建的好处
- 业务复用;
- 提升研发效率;
- 规范研发流程;
- 团队技术提升;
- 开源建设;
善用工具解放双手
举例:最近接到一个需求,一张简单报表包含增删改查,相信每个公司都有自己封装好的增删改查组件或者 hooks,等接口定义好,直接写 api,配好表单,表格配置完事。但后来接口发生变动,或者查询变动,这个时候就需要手动去调整原来代码。又或者做完这个后又来了个十几个报表需求,又得需要将上面来个十几遍。有些公司甚至连封装都没有,项目里全是 CTRL V + C,重复工作量更是陡增。
这些重复性操作完全可以通过工具自动生成,提交代码准确性,也能解放自己双手(摸点 🐟 不香吗),提高团队效率。
工具能做事情,做的东西有很多,不仅仅只是代码生成这些,一切你觉得重复性工作,都可以尝试通过工具来提高自己效率。
- 代码生成
- 代码格式检测
- 智能提示
- 测试自动化
- 文档集成
- 代码调试
- ...
工具实现方式有很多种,这取决在团队需求
- cli
- web (比如通过拖拉拽生成代码)
- 编辑器插件 (比如 vscode 插件)
- ...
重复代码生成
就以上面例子为例,就可以使用工具去生成 接口的定义、表格配置、表单配置以及组件使用代码,不同需求表单、表格那些都是高度相似的,可以通过代码生成方式来提升自己编码效率。
从接口文档到可用代码,生成的方式大概流程如下:
接口文档 =》 JSON Schema =》 UI 交互(可省略)=》 根据模板生成 || 根据 AST 生成 =》 插入到代码位置
生成 JSON Schema
为了方便后续代码生成,我们需要首先接口文档转换成一个标准通用格式,这样不管后端提供什么样格式 api 文档或者不管后端使用什么框架去生成 api 文档时,只需要将对应格式转换成我们 JSON Schema 格式即可。
UI 交互
UI 交互并不是必须的,比如生成 接口定义、类型定义 并不需要交互,直接生成就可以了。但是像表格生成、表单生成这些是需要的,因为接口返回字段并不一定全是需要生成的,可以通过添加适当交互完成这一步骤。
代码片段生成
代码生成方式分两种 模板、AST 去生成。使用 模板 比较简单,也会比较直观,但是缺乏灵活性,使用 AST 会更为灵活,但也会复杂的多。
模板
对于一些固定代码片段格式,可以选择通过模板去生成,而不必使用 AST 增加代码生成复杂度。
比如你项目中请求方法格式如下,可以直接使用模板去生成,类似这样 const {0} = (par) => http("{1}", par, "{2}");
const apiFn = (par) => http("/api/demo", par, "post");
AST
AST 是抽象语法树 (Abstract Syntax Tree) 的简称,它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。
当你生成代码需要根据不同条件生成不同节点,修改不固定时候,可以选择使用 AST 去生成。
AST 生成原理,简单来说说就是将代码生成一个树状结构,其中树中每个节点描述的应就是你实际代码,我们只需要根据需求去操作对应节点,然后再将 AST 转为代码。
不同工具生成 AST 是不一致的,可根据实际需求选择。在线查看 AST 结构工具,可以说很直观方便 ast explorerts ast
插入代码位置
将生成代码插入到现有代码中,实现方式也有多种不同方式,通过对于简单的结构可以通过正则匹配去替换,对于复杂的结构可以通过 AST 方式去修改插入,如果你是基于编辑器插件去做的,还可以通过获取编辑器光标位置、选中等等操作将代码插入到对于位置。
更方便的文档查阅方式
很多公司使用的都是像 yapi、swagger 等那些开源文档管理平台,很多都是 web 在线的,当接口文档字段很多时,需要平凡的来回切换查阅,这样也是比较浪费时间的。可以通过编辑器插件形式集成到我们插件中,这样可以更方便自己开发,也有很多时以及有现成插件可以使用的,但是功能上并不丰富,有些仅仅只能查看,连常见代码都无法生成。
将接口文档集成到编辑器里能做的事情有很多,以 vscode 来说,可以通过文档快速生成接口定义,还可以通过注册语言服务,来识别检测接口定义正确性,也可以做的接口文档发生变更,做到智能提示然后快速自动修改,也可以通过接口文档快速起个 mock 服务,而不需要手动在项目中添加 mock 定义等等。
其他
很多繁琐的事情,其实可以尝试通过工具简化这些操作,没有合适的可以尝试自己造个,既可以提升自己能力,又能给团队做一点贡献。
- 本文链接:
- 版权声明:本博客所有文章除特别声明外,均默认采用 CC BY-NC-SA 4.0 许可协议。