作者：地谦（王威）
引子
“低代码”一词似乎是最近几年才流行起来的词汇，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体验，灵活的数据流处理能力和丰富的组件扩展能力的低代码解决方案。它不单是一个低代码框架，而且还内置了或者塑造了一整套的运维工作流模式，以适配运维业务场景的使用。
