低代码(零代码)平台整体架构设计点？

Question

背景：目前公司想做一个低代码平台，大致功能包含表单设计、流程设计、报表设计、根据拖拽的形式生成PC端、App端、小程序端的页面。基于这个大致的背景需求点。我自己有以下几个问题想了解下：

1. 基于低代码平台根据拖拽生成前端页面，比如生成PC端页面，整体的页面数据结构大致是怎么样的？怎么样根据这样的数据结构渲染成整个对应的页面?；
2. 基于低代码平台根据拖拽的形式怎么能够生成整个APP、H5应用？(公司前端技术栈VueJs+UniAPP)

还望做过低代码平台研发的各位大佬能够给解答一下，谢谢。

Answer 1

可以参考下 这篇文章

Answer 2

1. 拖拽构建页面，可以参考开源项目GoView；
   
   

2. 代码生成一般是服务端通过 模板引擎 完成，例如 NodeJS 的 plop、Java 的 FreeMaker 等。

   大致流程：编写代码基座 -> 编写代码模板 -> 模板引擎根据数据渲染模板生成代码 -> 将代码注入基座

Answer 3

1. 拖拽产物

拖拽生成的 json 是用来描述整个页面结构和对应取数逻辑，大概如下：

const schema = {
    componentName: "Page",
    id: "xxx",
    props: {},
    children: [
        {
            componentName: "xxx",
            id: "xxx",
            props: {},
            children: null
        }
    ]
}

2. 渲染页面

1. 运行时渲染

遍历页面 scheme 动态渲染页面

2. 编译渲染

搭建完页面后，有个出码逻辑，将 scheme 生成开发代码，然后编译发布

可以参考 https://lowcode-engine.cn/demo/demo-general/index.html

Answer 4

1. 你这个低码平台包含后端吗，如果包含后端，那就有建模。建模方式可以是通过表单建模，也可以是先建模再生成表单。前者更适合往无代码方向走但扩展能力弱，后者就是元数据驱动，扩展能力强，更适合专业人员。
2. 如果是元数据驱动类型的低代码平台，视图的json schema，核心是描述对象字段和对象关系，其次是表格、表单配置
3. 如果是纯前端的低代码平台，直接用阿里的低代码引擎就好了
4. 多端页面，首先得保证组件能支持多端，运行时的schema解析和渲染都是同一套
5. 流程设计比较宽泛，简单的是审批流，复杂的是可视化逻辑编排。
   可视化逻辑编排，也就是流，实现上也有两种途径：前后端分离的无状态流和前后端不分离的有状态流。
   前者对应到前端就是自定义按钮逻辑，点击按钮后的逻辑是可以枚举出来的，比如打开弹窗、发送请求、下载、提示、逻辑网关等等（弹窗内容的配置可以复用可视化视图配置能力）。当然这个逻辑编排不仅是用在自定义按钮上，也可以放到任意组件的事件上。无状态流，没有流程实例，前后端的交互就是通过api，api可以调任意接口，包括启动一个后端流。有状态的流，每次启动都会创建一条流程实例，重要操作（比如提交）会该更流程状态，记录当前节点，修改流程context，并返回下一节点执行的操作，说白了就是点击按钮后执行什么操作，包括弹窗弹什么内容都是后端告诉你。这两种方式，有状态流配置体验会好很多，比如审批流就可以用这套流程引擎很快配出来。无状态流更灵活，但配置体验差一些。
6. 报表比较简单，前端只要提供一个网格拖拽工具和图表组件就行，阿里的那套引擎也有，改改就好了，这一项核心在BI部门
7. 页面的发布部署，这里比较吃公司的基建能力。当然低代码平台的建设者首先得明确做的是页面的配置还是应用的配置，这两个决策，对前端来说页面配置，只要提供一个页面容器；应用配置就复杂很多
8. 低代码平台建设是一个渐进的过程，早期可能只有基础页面配置，此时就需要设计二开机制，二开机制的设计，又涉及到一个基础问题：你们低代码平台的目标是啥？二开机制比如阿里的出码的能力，不过使用了这个功能后就完全失去了再接收配置的能力，当然也能起到提高开发效率的作用，但是后期维护效率就比较低