概述
背景：企业数字化转型加大了对低代码的需求，传统业务开发周期较长，且成本较高，需要专业的程序员开发及维护，成本过高。
总览
低代码平台围绕以下流程让开发、产品、设计等角色围绕同一个产物工作在一个空间中。
- 产品需要完成原型设计，基本跳转，对话框等有些简单接口调用也可以一并完成了
- 设计直接改产品的原型的样式、动画和多分辨率适配
- 低码工程师主要解决复杂业务的调试和对接
graph TD
业务方提出需求 --> 产品设计原型和基本逻辑
业务方提出需求 --> 设计美化产品原型
业务方提出需求 --> 低码工程师完善产品逻辑
产品设计原型和基本逻辑 --> 发布测试上线
设计美化产品原型 --> 发布测试上线
低码工程师完善产品逻辑 --> 发布测试上线
渐进式的交付方式
- 有自己开发团队的客户，甚至有二次开发需求的，我们直接交付源码
- 有自己运维需求的，我们可以交付镜像和包
- 无部署能力的客户我们会直接通过部署平台部署线上可访问的地址
graph TD
低代码编辑 --> 源码
源码 --> 代码仓库 --> 交付客户
源码 --> 镜像或包 --> 交付客户
源码 --> 部署平台 --> 交付客户
平台架构
低代码在整个平台体系起到承前启后的作用
- 向下粘合不同微服务，可以对微服务原来逻辑进行二次封装，或定义一套新的前端实例。
- 向上形成各个端和行业的解决方案
flowchart TD
subgraph 行业数字化解决方案
政务
教育
金融
工业
电商
新零售
end
subgraph 多端发布
Web
IOS
Android
小程序
H5
end
subgraph 可视化搭建
组件库
交互
发布预览
本地调试
云端构建
end
subgraph 微服务生态
电子商务
在线教育
账号
内容管理
营销
end
subgraph 云原生
容器云
服务网格
信息安全
大数据
日志告警
end
行业数字化解决方案 --> 多端发布
多端发布 --> 可视化搭建
可视化搭建 --> 微服务生态
微服务生态 --> 云原生
编辑器架构
低码编辑器依托资源数据作为内容，本身低码平台也需要能够产出资源代码及资源数据，这样才能完成整个链路的闭环和生态的建设。
以抽象的数据模型描述业务，为向不同端翻译做准备。
源码翻译则要在基础数据模型上能够扩展出不同语言不同框架的翻译器。
flowchart TD
subgraph 资源数据
模板库 --> 组件库 & 方法库
组件库 --> 定义 & 交互 & 依赖
方法库 --> 定义 & 依赖 & 代码片段
end
subgraph 可视化搭建
资源列表
舞台
交互面板
逻辑编辑
历史记录
预览
end
subgraph 模型数据
组件树
方法XML
end
subgraph 源码翻译
Vue
微信小程序
App
end
资源数据 --> 可视化搭建
可视化搭建 --> 模型数据
模型数据 --> 源码翻译
可视化搭建 --> 资源数据
H5端实现
架构要支撑不同端的继承功能，目前以Web PC为Base继承出多个端的实现
以下以H5端为例子
1. 资源
-
组件库方面H5有其单独组件库和PC差异比较大，但基础的组件是可复用的，比如布局，图片等
-
方法方面因为都是js函数大多数都能复用
2. 可视化搭建
舞台和预览会有比较明显的差异
- 分辨率一般以375为标准
- 就是要模拟移动端touch事件
3. 源码翻译
都是翻译成Vue大多数是一样的，也有一些差别比如：
- H5适配不同机型分辨率要考虑px和rem的转换，PC端更多是处理响应式代码的生成
flowchart TD
subgraph 资源数据
H5组件
H5方法
end
subgraph 可视化搭建
H5舞台
H5预览
end
subgraph 模型数据
end
subgraph 源码翻译
H5Vue
end
资源数据 --> 可视化搭建
可视化搭建 --> 模型数据
模型数据 --> 源码翻译
可视化搭建 --> 资源数据
