从零实现低代码平台 -- 前言

1,291 阅读4分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」。

概要

低代码平台是近年来一个很火的话题

  • 相比起代码开发,低代码平台可以节约50%以上的开发人力,并且对于测试的要求较低,非常适合中小应用的开发。
  • 相比起无代码平台,低代码平台更灵活,通过配置可以实现简单的用户交互,适用的业务范围会更广

最重要的是,低代码平台一旦成熟和普及,很多外包公司的开发都要丢饭碗了,因为开发一个Web的成本会大大降低

因此可以预见这很可能是下一个风口,因此尽早的了解和学习,并且投入实践,是增加自身竞争力的大好机会。因此我也打算自己设计和实现一个低代码平台,从需求设计到技术设计再到产品实现,借此锻炼自己的设计能力、分析能力、复杂需求的实现能力。

低代码平台的原理

低代码平台是基于配置的,一般而言会先根据需要配置一份页面模板。在实际使用页面的时候,去拉取模板,并解析,得到真正的页面。

image.png

特别说明一下,生成的这份页面模版,一般称之为DSL

在我的设计中,低代码平台大概会包含以下几个模块

image.png

前端

  • 组件列表 组件就是低代码平台的物料,但是为了达到减少代码量的目标,相对antD、elementUI等代码库而言,低代码平台的组件粒度会更大,比如一个列表页的搜索框就是一个组件
  • 预览 就是把页面上的配置,根据用户操作实时生成DSL,并且实时解析DSL,保证用户所见则所得
  • 组件配置 用户添加的每个组件,都要允许其编辑,以实现个性化的需要,比如列表页的搜索框,不同场景下搜索的字段可能不太相同,这就需要用户来配置了
  • 接口配置 设计中会把接口视为一个组件,供其他组件调用,但具体设计需要后续落实
  • 拖拽系统 一个好的拖拽系统是可以大大优化用户体验的
  • 表达式系统 初步的设计,会利用表达式实现计算属性的功能,比如组件的条件渲染、字段联动
  • 渲染系统 需要根据DSL渲染成UI,并解析其中的表达式实现字段联动。和预览最大的不同是,预览中的组件点击后,是进入该组件的编辑。而实际渲染出来以后,则是该组件真正的点击行为

后端

低代码平台对于后端的要求非常高,要求后端接口行为完全一致。什么是接口行为呢?最常见的一个场景就是,用户填写表单时,对于非必填字段,是可以不填的,那么怎么表达这个不填的状态呢?对于不怎么将就的后端而言,可能字段1的不填,是传null,但是对于字段2的不填,是不传这个字段。

这种字段行为不一致,是低代码平台的大忌(实际上是开发的大忌)。因为低代码平台的逻辑粒度很粗,不合适做到对每个字段的精细化处理,因此接口行为一致性是我目前想到对后端的要求

测试

除此以外,代码的健壮性还需要测试来保证,因此自动化测试也是不可或缺的一环。逻辑自动化测试、UI自动化测试都需要设计,特别是渲染系统和表达式系统,这两块是核心功能,需要重点测试以保证其健壮性

相对于传统的开发,低代码平台使用组件封装实现代码的复用,提供组件配置以适应个性化需求,再加入了表达式来实现简单的业务逻辑。由于低代码平台较大的组件粒度,导致了逻辑上的粒度也较大,因此只适用于中小型的应用。

项目源码