图解低代码“四搭建”：（上篇）怎样理解低代码

背景：最近要在团队内部做一次关于低代码的技术分享，所以最近打算把之前2~3年的低代码平台开发经验，以及对其他大厂和开源的低代码产品的研究和学习做个系统梳理，希望能相对清晰完整地给各位同事介绍低代码的概念和原理、方法和实践、优势和不足，方便各位同事在学习和使用低代码时做个参考。

现在分享低代码相关概念已经非常简单了——因为有各个大厂以及大量开源的低代码产品、白皮书、教程、技术分享和真实系统可以参考——所以文章中对于推荐阅读的内容我会注明出处，方便大家可以进一步地去了解。

《图解低代码“四搭建”》会以系列文章的形式，有步骤、有重点地分享我对低代码“四搭建”的研究学习和开发经验，目前该系列文章有如下3篇：

1. 图解低代码“四搭建”：（上篇）怎样理解“低代码”
2. 图解低代码“四搭建”：（中篇）图解低代码“四搭建”
3. 图解低代码“四搭建”：（下篇）低代码怎样才能用好

以下是《图解低代码“四搭建”：（上篇）怎样理解“低代码”》的文章正文。

1、怎样理解“低代码”

每一个领域都是一个知识体系，每一个知识体系都是由概念组成，而学习概念的一个很好的方式之一，就是跟我们之前接触过的相关概念做个对比。

接下来，为了更好地理解“低代码”这个概念，我们就拿两个跟它相关的概念做个对比——“零代码”和“纯代码”：

1.1 零代码

也许你在微信朋友圈、公众号或者消息里面，收到过一些会议邀请函、招聘启事或者问卷表单等等。

时间长了、看得多了，你就会发现这些邀请函或者问卷表单等等，它们的展示形式、交互方式等等都很相似，而且在很多场景下反复出现。

假如你结婚了，想要给亲戚朋友发一个结婚邀请函，有了类似需求（当然你也有可能想制作一个短视频，但是你还是想再制作一个邀请函），那么你留意一下，就会发现很多相似的邀请函来自同样的几个域名，比如下面的易企秀：

我之前在易企秀做过H5编辑器的开发，是易企秀早期员工之一，经历过它早期用户数的指数级增长。

当时在手机上非常流行H5——一种卡片式、通过滑动翻页的移动页面。即使你是一个专业的程序员——能够手写代码——在当时也要制作几个H5，比如校园招聘、社会招聘的招聘启事啥的。

即使你是一个前端开发熟手，自己手工开发一个H5页面也需要一番功夫、几天时间：

• Step 1、设计：设计师进行页面设计、切图；
• Step 2、实现：前端进行页面开发，布局、动画、交互实现（往往需要借助第三方库）；
• Step 3、上线：将制作的H5页面，通过运维上线。

而通过易企秀这样的H5编辑器，同样的H5页面、开发时间可以缩短到几小时：

• Step 1、设计：找相似的模板和图片等素材资源；
• Step 2、实现：修改模板上的文案和图片；
• Step 3、上线：直接发布上线、不需要额外的服务器资源。

H5编辑器的上手门槛很低——许多大爷/大妈学习使用电脑，很多都是从怎么制作H5相册开始的——许多图书馆的对外培训项目，就会教你怎么制作H5相册。

我们以在创客贴中制作一个可视化图表为例：

整个过程可以分为3步：

• Step 1 图表：从柱状图、折线图、饼状图中选择图表；
• Step 2 数据：填充图表需要用到的数据，类似填写Excel的表格形式；
• Step 3 设置：设置图表中各个组件的样式，比如图表X轴、Y轴等等。

我们可以看到，通过这种简单的可视化拖拽和可视化配置的形式，能极大地降低开发者的上手门槛，以及效率方面的极大提升。

产品经理们有一个价值公式 —— 产品价值=新体验-旧体验-替换成本：

因为H5编辑器确实能降低门槛、带来相当大的效率提升，所以除了易企秀之外、还有很多优秀的H5产品出现——比如创客贴，兔展，MAKA，开源的H5-Dooring、quark-h5、luban-h5，以及已经不再提供的百度H5等等：

所以，像H5编辑器、表单编辑器等等零代码产品，能让没有开发经验的技术小白，通过可视化拖拽和配置，就能完成在H5营销页/表单收集页等特定场景的应用开发工作，极大地降低研发复杂度、降低成本和提高效率。

1.2 纯代码

能点击进来、正在阅读这篇文章的人，应该都是专业的程序员——“纯代码”就是指我们平时手写代码的开发方式，上面提到的H5编辑器、表单编辑器等等零代码编辑器，以及即将讲到低代码“四搭建”编辑器，也都是使用“纯代码”开发的：

我们会使用工程手段和工程工具，考虑代码仓库的分包：

架构的分层：

模块的分类、分区、分块：

以一个Web应用的开发为例：

1. 我们往往已经掌握了多个领域语言和框架（比如表达前端页面的 HTML + JS + CSS + Vue/React、后端的 Java + SpringBoot、数据库 SQL 等语言），并熟练使用它们的惯用法；
2. 我们能够交付前端UI页面，开发时我们会关注页面、组成页面的组件、组件的状态和事件等等；
3. 我们能够交付后端API接口，开发时我们会关注业务逻辑、实体、实体的属性和方法等等；
4. 我们能够交付数据库表，开发时我们会关注数据库、数据库表、表的字段和索引等等；
5. 我们能够理解多个领域的语言和框架在语法、语义上的不尽相同，比如JSON（数据传输）、JS/TS、Java、MySQL 在类型上的对照：

JSON	JS/TS	Java	MySQL
boolean	boolean	boolean	BIT(1)
number	number	byte	TINYINT
number	number	short	SMALLINT
number	number	int	INTEGER
number	number	long	BIGINT
number	number	float	FLOAT
number	number	double	DOUBLE
string	decimal.js	BigDecimal	DECIMAL
string	string	String	VARCHAR/TEXT
string	Int8Array	byte[]	BINARY
string	Blob	byte[]	BLOB
string	string	UUID	char(36)
string	Date	LocalDate	DATE
string	Date	LocalTime	TIME
string	Date	LocalDateTime/ZonedDateTime	DATETIME
string	enum	enum	ENUM/VARCHAR

因此，作为一名专业开发者，纯代码是我们最熟悉的开发方式，通过手工编写代码、完成应用的开发工作——包括核心应用/核心系统的开发，以及包括零代码编辑器和低代码编辑器的开发。

但是同样很明显的，为了完成一个应用的开发工作，往往需要我们在不同领域掌握不同的开发语言和框架——比如表达前端页面的 HTML + JS + CSS + Vue/React、后端的 Java + SpringBoot、数据库 SQL 等语言——这对于业务人员和技术小白来说，有一个不小的上手门槛。

1.3 低代码

说完了技术小白也能用的“零代码”，以及我们开发人员熟悉的“纯代码”，再来看看我们本系列文章的主题——低代码。

低代码是通过提供类似“零代码”的可视化拖拽和配置操作，就能完成类似“纯代码”的应用开发工作。

1.3.1 低代码“四搭建”

以上面我们提到的一个Web应用的开发为例，我们需要交付的产物往往包括以下3个部分：

• 前端UI：我们通过HTML + JS + CSS + Vue/React等等开发语言和开发框架完成前端页面——这一部分往往被称呼为“UI”（User Interface，用户界面）或者“GUI”（Graphical User Interface，图形用户界面）——用户可以通过手机、平板和电脑等等设备，以图形用户界面的方式访问我们的应用；
• 后端API：我们通过Java + SpringBoot等等开发语言和开发框架完成的后端逻辑开发——这一部分往往被称呼为“API”（Application Programming Interface，应用编程接口）。一种流行的API的接口风格叫做“RESTful API”，它把服务器端的内容看做“资源（Resource）”，我们通过HTTP的各个动词——比如GET、POST、PUT、DELETE等等——对资源做增删改查等各种操作；
• 数据库表：我们通过数据库的SQL等语言，创建数据库表等等，数据的原子操作有四种，即我们常说的“增删改查”（SELECT、CREATE、UPDATE、DELETE）。

而低代码，分别通过“页面”搭建、“逻辑”搭建和“数据”搭建，实现同样的前端、后端和数据方面的产物：

实际上，通用的低代码平台往往会提供以下四种内容的搭建——流程、页面、逻辑和数据——被简称为“四搭建”：

而低代码“四搭建”（流程、页面、逻辑和数据），正是本系列文章要讨论的核心内容，接下来的文章我们将会围绕着低代码“四搭建”进行详细讨论。

1.3.2 零代码 vs 低代码 vs 纯代码

在下面，我列了一个简单的表格，用来将零代码、低代码和纯代码进行对比：

	零代码	低代码	纯代码
What	无需开发经验，技术小白/销售/业务通过可视化拖拽和配置，就能完成应用的开发工作	公民开发者/业务人员通过可视化拖拽和配置，就能完成应用的开发工作	专业开发者通过手工编写代码的方式，完成应用的开发工作
Who	技术小白/销售/业务人员等等	Citizen Developer（公民开发者）/业务人员	专业开发者
How	可视化拖拽/简单配置	可视化拖拽/配置（包括表达式）	手写代码
Why	降低研发复杂度、降低成本和提高效率	降低研发复杂度、降低成本和提高效率	核心系统
When	低成本创建通用页面等等	低成本创建应用	核心系统开发
Where	H5营销页/表单收集页等特定场景	报表/数字大屏/流程表单等应用场景	核心应用/核心系统/中间件开发

如果从需要写的代码量这个维度上看：

• 零代码：不需要写代码，只需要通过可视化拖拽和配置，就能完成开发工作；
• 低代码：同样使用可视化拖拽和配置完成开发工作，不过需要写一些代码表达式，比如绑定数据字段等等；
• 纯代码：往往通过手工写代码的方式、完成主要的开发工作。

如果从“开发能力”和“适用范围”这两个维度上来看：

• 零代码开发能力 < 低代码开发能力 < 纯代码开发能力；

• 零代码适用范围 < 低代码适用范围 < 纯代码适用范围。

以上是我们《图解低代码“四搭建”：（上篇）怎样理解低代码》的主要内容：

• 我们通过对比“零代码”“低代码”和“纯代码”的特征和区别，从整体上、直观地理解了“低代码”——“低代码”采用了“零代码”的可视化拖拽和可视化配置的开发形式，试图降低应用开发的上手门槛，使得公民开发者/业务人员等等、通过拖拽和配置也能完成应用的开发工作；
• 我们引出了低代码“四搭建”，接下来我们将会对低代码“四搭建”展开更仔细的解构、分析和学习。