作者:地谦(王威)
引子
“低代码”一词似乎是最近几年才流行起来的词汇,2015年前后AWS、Google、Oracle等厂商开始入局低代码领域时,国内氛围还没有很高。2018年5月,快速应用开发的低代码平台OutSystems获得3.6亿美金投资;同年8月,西门子宣布以6亿欧元收购低代码应用开发厂商Mendix;此后,越来越多的企业开始尝试以低代码/零代码技术重构数字化业务,低代码平台市场逐步火爆起来。
其实低代码开发并非新生事物,据可考的资料,低代码概念最早诞生于上世纪80年代IBM的快速应用程序开发工具(RAD);后来微软的VB、C#可视化开发工具Visual Studio,谷歌的Android集成开发工具Android Studio等都是对其概念的工程实践。低代码本质上还是一种软件开发方式:即不写代码或少写代码的方式来完成软件开发。
于前端而言,低代码开发其实也并不陌生,把“低代码”描述为“页面可视化编辑”,这一概念就变得熟悉了起来,我们曾经使用过的Dreamweaver、Frontpage等其实都可以归属到低代码的范畴。随着Angular、React、Vue等前端框架的普及以及gulp,webpack等构建工具的完善,前端进入工程化协作开发时代,逐步开始承载越来越多的业务逻辑。
当前云原生开发火热,在容器化微服务化技术加持下,传统意义的后端开发瘦身,又催生出了前端服务化的理念。在适配行业领域,业务场景,用户群体等不同条件下,前端低代码的设计落地和工程实践相应会呈现出不同的特征与特色。
一、 项目背景
SREWorks是一套面向企业级复杂业务的开源云原生运维解决方案,是大数据SRE团队多年工程实践的锤炼及沉淀。
解决前端开发的前端统一托管工程(sw-frontend)是运维解决方案的重要一环,提供了一套serverless体验的配置化前端低代码解决方案,该方案以运维人员为主要用户群体,集成了一套前端设计器/渲染器,提供前端页面部署,代码回滚,编译打包等方案。同时赋予运维人员根据自身业务需求,快速创建定制应用的能力,有效提升诸如支撑故障处理、监控分析、变更保障及值班/客服/大促等运维场景的运维效率。
二、 技术架构
低代码作为一种软件开发方式,特点在于少写代码或不写代码,只通过界面的托拉拽配置即可完成满足需求场景的软件,提高了软件的开发效率。效率提升的关键在于“复用”——对于前端页面而言,就是对页面进行解构抽象,映射为json等格式的配置文件,进而对各个粒度的组件进行编排复用;通过模板引擎进行组件映射,加载,渲染,路由组装编排,数据流传递注入等完成页面挂载。
作为一款着力于提升运维开发效率的前端低代码产品,sw-frontend工程采用React+antd为主的技术框架,设计了一套组件映射、编排、解析、渲染的工程体系:以antd组件为自由编辑粒度,用户在前端设计器通过可视化交互或者json编辑的方式,依据运维工作的实际使用场景,对组件进行属性配置/组件嵌套拼装;同时根据运维场景目标需求对页面组件进行布局的编排、数据源的绑定以及在合适点位插入Dynamic Logic,完成页面节点的设计工作,形成节点模型nodeModel,经模板解析引擎进行解析渲染。
sw-frontend整体架构图如下:
三、 核心设计
低代码产品由于适配的需求场景和面向的用户群体不同,所呈现的产品形态和交互方式也各具特点:类似汽车自动驾驶,区分L1、L2、L3...,低代码产品在使用复杂度上也大体呈现几种形态:
• 给普通用户使用的低代码产品:用户只需关心自身业务,无需代码配置,只用修改页面组件的Data就能快速地生成页面,通常营销活动页面都是通过此类方式快速构建。
• 面向中台开发的低代码产品:进行界面拖拽设计并进行json编辑配置即可。
• 着力于提高前端人员日常产出效率的可复用组件/插件:如json-shcema动态表等,具有一定封装粒度,旨在提升代码段复用率,提升开发效率。
sw-frontend就是这样一款面向运维中台开发的低代码产品。运维是个特定的业务需求场景,搭建一个UI界面只是运维场景的需求之一;sw-fontend提供了一套满足强交互页面类型设计,serverless体验,灵活的数据流处理能力和丰富的组件扩展能力的低代码解决方案。它不单是一个低代码框架,而且还内置了或者塑造了一整套的运维工作流模式,以适配运维业务场景的使用。