前端技术一直在飞速的演进,从jQuery面向Dom和事件的开发,到Angular的MVC框架,React、Vue的数据流状态管理,再到Web Component的面向组件开发。使用的框架和工具一直在变化,开发理念也不断地在更新,我们一直都在探索更高效、更符合前端的开发姿势。
在底层技术趋于完善的今天,我们有了一个新的探索:低代码。
低代码(Low-Code[1])在2014年被Forrester Research研究机构正式提出,它的定义是:利用很少或几乎不需要写代码就可以快速开发应用,并可以快速配置和部署的一种技术和工具。
前端低代码致力于使用非编程、高效的方式开发页面,解放前端生产力。
它的优势:
前端工程师在长久以来的开发工作中,遇到了一些痛点:
于是我们在收钱吧运营管理平台中搭建了低代码平台:鬼斧神工,它通过拖拽等可视化配置的方式来进行前端页面开发。与从前业务驱动的低代码系统不同,这一次是工程师自发的一个探索。
我们希望通过低代码这种方式来提高工程师的效率,一方面,通过配置而不是写代码的形式开发页面,极大减少开发和维护的时间,实现快速增量与迭代;另一方面,通过这种非编码的方式,避免快速迭代而产生的技术债。
鬼斧神工是自研的低代码平台,它搭建在内部的运营管理平台中,我们对它的期待是通过它能在日常的工作中切实的提高工作效率。我们首先的目标是将它运用在搭建运营管理平台中的页面,平台的特点:
我们对低代码系统的要求除了低代码本身具有的配置渲染页面外,还需要:
针对这些,相比使用第三方低代码平台,自研的自由度至关重要。我们积累了适合收钱吧自身的组件和组件功能,当然也设计了数据对接、数据域、组件通信等方案,让收钱吧工程师们能切实的通过鬼斧神工搭建大部分页面。
系统架构主要分为:
前端低代码系统:用于配置和渲染页面,包含页面配置工具、渲染引擎、预览系统等。
api层:提供配置数据管理;用户认证;页面授权管理等。
APISIX[2]网关:低代码页面接入APISIX网关,业务数据或操作通过APISIX接口运行;包含了插件工具,可进行鉴权等操作。
JSON RPC[3]服务层:提供业务数据或业务操作,通过APISIX与低代码页面对接。
数据层:数据存储。
系统通过可视化拖拽方式生成前端页面配置,布局设计成开放的横纵流式布局,支持组件间的嵌套。
配置系统包括以下几部分:
结构如下图:
渲染引擎接收配置工具生成的JSON数据,进行页面结构及组件样式的渲染。
页面结构及配置以JSON[4]数据格式生成,分为三个数据块:
configData:存放组件配置,所有组件都在同一级。
pageConfig:页面配置,例如缓存等。
renderData:页面结构配置,以树级结构存储。
渲染是“运行时”的,也就是说它会实时渲染配置。我们给出了查看页面实例的功能,可追溯历史发布的实例配置;同时开放了“最新永久链接”的功能,这是一个GET的api接口,它会返回模板对应的最新实例,适用于经常更新的页面。
”数据获取“可用于配置组件的数据,比如下拉框下拉项、表格数据、文字内容填充等;它分为几个域级:
全局域
在全局域中的数据,页面上的每个组件都可获取。它来源于url参数和按钮的“透传参数”;“透传参数”可以将指定的数据上传到全局域中,进行模块间的通信。
服务域
服务域指的是服务组件所包含的区域,服务组件可配置一个或多个接口,服务组件可以嵌套,顶层的优先级高于相对底层的。
组件域
组件域只能在当前组件中使用,直接配置在组件的配置中,比如表格中表头对应的数据就是从表格配置的接口中获取。
优先级:全局域 < 服务域 < 组件域。
平台对接了APISIX,工程师先在APISIX注册JSON RPC接口,然后拿到对应APISIX http接口后,到低代码平台配置,在域名上选择api-six-api即可。
APISIX有方便的插件系统,鉴权等功能可通过定义插件统一处理。
新建低代码配置类型有“页面”和“模块”,“页面”即渲染正常的页面;“模块”是一个页面的模块,无法单独展示,需要依赖于页面才可展示,多个页面可引用一个模块。
”模块“多用于一个页面包含多个业务模块的场景,不同的业务团队可配置自己的模块,然后配置到主页面上,模块可独立配置及发布。
组件分为两部分,组件和模板,模板是一个套件,会提供一些特殊的功能。
一些特殊组件:
对于一些有交互性的组件(例如按钮)系统定义了一些”操作“:
配置“打开链接”操作,点击按钮可以打开另一个窗口,并跳转到配置的链接,多用于表格“详情”、按钮跳转等。
配置“透传参数”,点击按钮可以将配置的参数传到全局,全局参数可应用于全页面上的组件。
例如在form中填写上传userName到全局,则其他组件都可获得userName。
配置“请求接口”,点击按钮可以请求该接口,一般用于表单提交等。
配置“打开弹出框”,点击按钮可以通知打开对应的弹出框。
文案映射可以做数据的序列化,对后端数据进行前端展示的映射和修改。比如组件中的文案可以通过占位来进行数据替换,也可配置规则来进行文案映射。
具体规则如下:
规则 | 格式 | 案例 |
---|---|---|
占位,替换数据 | ${keyName} | 商户名:${merchantSn} |
对象映射 | {"key1":"value1","key2":"value2"} | {"status": {"0": "失败", "1": "成功"}} |
日期映射 遵循moment.js规则来进行日期的格式化 | YYYY-MM-DD HH:mm:ss 更多详细规则请参考: mement.js | {"submitTime": "YYYY-MM-DD HH:mm:ss"} |
计算映射 可进行两个数的加减乘除运算 | {keyName}-number {keyName}/number | {"amountPer": "${amount}/100"} |
收钱吧低代码平台鬼斧神工于去年下半年上线,我们使用它服务了运营管理平台、客服平台等,搭建了例如人员信息管理系统、客服作业平台等,其中也包括拥有十数个不同业务模块的大型页面。
在应用和开发中,我们也遇到了一些问题,比如:
我们通过优化代码以及添加组件配置等方式,解决了大部分的问题。但有一些场景显然是不适合使用低代码的:
我们在使用低代码平台开发页面的过程中得到了很不同的开发体验,比如:和产品经理的合作更加方便,因为可以直接看到页面,有问题在开发前期可以非常直观的提出来,对低代码平台熟练的产品经理甚至能自己搭建或修改页面;页面开发过程中极大减少了前端工程师的工作,尤其在页面维护、迭代效率极为高。
当然我们也会持续地建设与优化,比如提供图表、接入数据源等,做一些尝试以低代码为基础自动化更多业务流程的工作。
希望以此方案与大家共勉,谢谢。
赵志毅,来自增值业务开发部
Low-Code: https://www.ibm.com/cloud/learn/low-code#:~:text=Low-code%20is%20a%20visual%20approach%20to%20software%20development,process%2C%20eliminating%20dependencies%20on%20traditional%20computer%20programming%20approaches.
[2]APISIX: https://mp.weixin.qq.com/s/iZGBX18Vfgg38nAzW5Tfew
[3]JSON RPC: https://www.wallarm.com/what/what-is-json-rpc
[4]JSON: https://www.json.org/json-en.html