阿里低代码引擎架构分析

16,849 阅读3分钟

阿里低代码引擎是今年三月份开源的一套通用的低代码设施,被阿里内部 70% 的低代码平台依赖。它提供了标准化、可拓展的全套前端低代码解决方案,在业界产生了巨大的影响,Github Star 数在半年时间攀升到8k,追平了发展了数年的表单引擎 Formily。我们团队今年上半年就用这它搭建了符合自己业务的低代码平台并参与到了引擎的完善工作中,本文将从现代前端要素的角度分析阿里低代码引擎的设计思路和架构,为大家提供一个认识它的思路。

整体架构

首先我们对前端低代码进行一个定位,它是一种可视化的编程方式,通过可视化操作的方式产出符合低代码搭建协议的JSON形式代码,再通过解释器用React等现代前端框架代码进行执行。我们看一下这个架构分层,与同样流行的跨端框架进行对比,可以发现他们同属基于JS的编程方式,而在分层上低代码架构默认没有编译过程,因而更简单,不过可选的出码能力是一个编译过程。

代码.png

核心原理

阿里低代码引擎的核心是协议,这份协议是经过打磨的,它是现代前端编程思想的一个语义化表达,现代前端编程思想的核心是组件,因此协议的主体内容是组件树;有状态的容器组件内部有 State 到 UI 视图再通过 Actions 更新 State 这样一个 MVVM 的循环,其中 UI 部分是视图层面的组件,可以通过可视化的画布和属性设置器进行编辑,这是可视化搭建的核心。除此之外,Actions 可以以代码片段的形式来编辑和存储,数据源可以拆解为域名、路径、请求头、参数、前置后置函数来编辑和存储。通过编辑器编辑产出具备现代前端开发要素的协议,基于解释器通过React/Vue等进行执行。这部分就是阿里低代码引擎的核心原理。

截屏2022-09-24 上午12.49.59.png

阿里低代码搭建产物页面的前端数据流示意如下:

截屏2022-09-24 上午12.54.29.png

基础设施

低代码平台的基础设施是物料平台,物料平台需要能够与低代码平台进行适配,为运行时提供物料代码,为编辑态提供物料属性描述以便生成设置表单,这个过程需要两个协议,资产包协议和物料描述协议,下图中心的 assets.json 就是符合这两个协议的一个物料资产数据,下图体现了物料资产在整个低代码研发过程中的核心位置。

截屏2022-04-15下午9.34.40.png

难点

整个低代码引擎是比较复杂的一个体系,有这样几个难点,首先是画布,涉及到基于鼠标原生事件组织出拖拽识别、边缘探测等能力,其次是渲染过程对schema的运行时适配以及性能优化,此外还有出码模块和入料模块根据组件属性自动生成描述文件等辅助功能,涉及到语法分析和转化。

阿里低代码引擎的整个能力丰富、拓展性强,描绘出了一个成熟的低代码生态系统,这也是为什么我在前一篇文章说它的出现代表了前端低代码进入了标准化时代。希望本文能够帮助大家更好地理解阿里低代码引擎。