一、Low-Code is Low？？？

谈到低代码，可能我们的第一反应是，低代码就不是拖拽生成表单吗？听起来一点不难。

而且应用场景十分有限，总觉得没什么L用。

实际上，

低代码不仅仅是拖拽生成表单，它在一些特定领域提供很强大的功能。

前端同学使用低代码也不仅仅是拖拽，你可能需要集成低代码引擎，也可能需要自己搭建适合业务的低代码平台。

前面文章简单介绍了低代码的概念，接下来介绍一下低代码的使用。

对于上面的问题，将从低代码使用的两个方面详细说明：

使用低代码平台能实现什么？
怎么在项目中使用低代码？

二、使用低代码平台能实现什么？

前面提到过，低代码可以用来开发活动页、表单、表格、报表，其实低代码应用远不止这些。

实际上，很多通用的东西都可以抽离并沉淀，然后让这些通用的东西可以在平台上通过可视化的拖拽、配置搭建出应用来。这就是低代码基本的思路。

就像建房子，可以一砖一瓦，钢筋水泥垒起来，也可以用装配式建筑。区别只是“通用的”构件的颗粒度不同，本质是一样的。

对于低代码，这些“通用的东西”可以是组件、页面模板、业务逻辑，甚至是行业解决方案。

下面举几个低代码应用场景的典型例子：

拖拽生成表单

下图是一个低代码编辑器的界面

表单是低代码最直观的应用场景，很多文章或者低代码产品介绍低代码概念时候，都用这个来举例。前面文章也有介绍。

流程引擎

审批流程是每个公司都会遇到的业务，但是不同公司的组织架构不同、流程制度不同、审批消息通知等需求都不尽相同，但是审批流程很多地方是相同的：都有一个发起人，都有终止状态：成功or失败，结构都是一个有向无环图......，将这些通用的逻辑抽象出来，再支持可视化编辑，就形成了流程引擎，可以让用户轻松地定义自己的审批流程业务了。

下图是一个低代码产品的流程引擎示例

企业官网模板

如果你想搭建自己的企业官网，你可以找到外包服务，让他们给你设计、开发、部署，然后后期更改还需要维护费用。

企业官网这类网站的特点是，网站是静态页面，基本都由文本、图片、多媒体、轮播图等固定组件组成。特别适合用可视化编辑方式搭建。

现在有一些企业官网搭建的产品，提供了大量的企业官网模板，你可以在其中选择自己中意的模板，然后在其提供的可视化编辑器中替换你自己的企业官网的介绍文本、背景图片、logo、slogan等。广义上讲，这也是低代码的一种应用。

下面是一个企业官网搭建服务商的界面

下图展示了用户可以通过编辑模板，定制自己的企业官网

CRM

CRM（Customer Relationship Management）指客户关系管理系统，是一种给销售及管理人员使用的，能够对市场活动进行规划、评估，对客户信息沉淀，对各种销售活动进行追踪的软件。传统的CRM软件需要从相应的软件服务商购买。传统的CRM有这样的痛点：

功能都是预定的，非常重，很多功能并不通用，所以每个企业使用时候都会有冗余的功能。很难让你进行个性化定制。
响应速度慢，从你提一个需求到软件服务提供商交付周期比较长。

现在一些低代码产品和传统软件结合，比如，提供低代码 + CRM的产品，既有CRM大部分基本功能，又支持自定义一些业务逻辑

自定义客户订单

自定义业务流程

低代码就是这样，比编程开发要死板，但能提高效率；相比SaaS软件增加了一定的学习成本，但要更灵活，支持自定义。低代码在两者之间找到自己定位，创造价值。

三、如何在项目中使用低代码？

我们先来看看用户是如何使用低代码平台的

一些低代码平台宣传的口号是，通过拖拽搭建企业级应用，但是低代码平台操作肯定不只是简单粗暴的生拉硬拽。拖拽只能形成好看的皮囊，配置才能构建有趣的灵魂。

只有通过配置，才能定义组件的行为、逻辑，让应用能够按照预期运行起来。

所以，可视化操作 = 拖拽 + 配置

接下来我们讨论下低代码技术是如何被应用到我们的业务中的。

低代码平台只是一种使用低代码技术的方式，低代码其实是渐进式应用，你需要选择适合自己业务的低代码应用方式。

说到渐进式应用，大家马上会想起经典的Vue框架。

渐进式就是指Vue框架设计的是多个层，你可以单独选择每个层使用，对于其他层可以使用其他的方案，而不需要全盘接受Vue提供的所有的解决方案。

在项目中使用Vue框架，你可以：

只使用vue的声明式渲染，但不用其他的功能。
你可以不使用Vue组件，而是使用jquery设计自己的组件。
你可以不用前端路由，或者自己实现自己的router，当然也可以使用vue-router实现前端路由。
状态管理你可以使用redux，当然使用vuex也可以很方便地接入。
你可以自己使用webpack或者其他构建工具搭建你的项目，也可以选择使用开箱即用的vue-cli。

其实低代码也是渐进式的技术。我们可以参照Vue渐进式的图，画出低代码的渐进式示意图：

我们自外向内介绍（注意并不是市面上每个低代码的产品都提供所有的支持）

解决方案

很多低代码的产品和传统的软件解决方案结合，比如CRM、ERP、MIS、BPM等，这些传统的软件有一些问题，前面已经讨论过：功能都是预定的，很难个性化定制；需求响应速度慢。

基于低代码的解决方案则可以解决这些痛点。例如雀书、简道云等企业提供的低代码 + CRM产品，提供了客户关系管理的基本功能。并且支持你自定义一些选项，还可以自定义业务流程，这些自定义的操作都是通过可视化编辑，不需要写一行代码。你可以直接使用这些产品实现你的业务，这种方式使用低代码，基本上不需要研发同学介入。

平台

直接使用平台： 微搭、爱速搭、宜搭都是典型的低代码平台，平台提供了通过可视化编辑搭建应用的能力，这是最基本的能力，但只有这个能力不足以承载企业级应用，所以低代码平台都提供了应用管理、用户管理、权限管理等支持。

私有化部署： 低代码平台还支持私有化部署，类似gitlab/npm，你可以把项目部署到公司自己的内网服务器，让低代码平台连接你自己的数据库，这样应用的数据，和应用产生的数据，都会存储在你自己的数据库中。

模板市场/应用市场： 如果你使用某个低代码平台搭建了一个好用的应用，而这个应用其他人可能也有需求，你可以把它放在低代码平台的应用市场或者模板市场中，其他类似的业务就可以复用你的应用。

运行时

如果你不需要平台提供的丰富能力，或者你希望自己管理应用、用户和权限，那么你可能只需要可视化编辑搭建应用的一个软件。

使用低代码软件需要考虑的一个事情是，你的数据怎么存储？

数据有两种来源，一个是使用低代码软件开发的应用的数据（例如创建了一个表单页面，需要把这个页面信息存储起来，这样用户才能访问到），还有使用这些应用时候产生的数据（例如一个表单页面提交信息）。

这两种数据都需要接口来存储到数据库中，低代码软件（如阿里开源的lowcode-engine）提供了运行时，通过运行时就可以直连数据库，你只需要提供连接数据库必要的信息（host、username、password等）。这样，创建应用不仅不需要写前端代码，后端接口也不需要，让一个没有编程经验的人瞬间化身全栈工程师。

运行时比较适合新创建的项目，如果你的旧项目中有一些老的接口，也可以让低代码应用通过这些接口进行数据存取。

可视化编辑器

如果你的业务不适合用低代码软件的运行时，比如你的接口的逻辑比较复杂，低代码软件自带的运行时无法支持；或者你的低代码主要用在一些老的项目中，需要复用老的接口和数据。你可以只使用低代码编辑器。

低代码软件都有相应的低代码编辑器。编辑器都和渲染引擎对应。编辑器支持用户拖拽方式搭建页面，编辑器生成的结果是以json或者代码形式存在的页面信息，结果生成之后保存到数据库，访问时候渲染引擎会根据页面信息渲染出页面。

渲染引擎

渲染引擎，简单地说，就是一个工具，它输入是页面信息（json/代码），输出就是用户看到的页面了。每个低代码软件都有自己的渲染引擎。

可视化编辑器通过拖拽和配置，生成页面信息，然后使用引擎把页面信息渲染成用户看到的页面，这就是低代码开发应用的大致流程。

渲染引擎内置丰富的组件，并支持自定义组件。

百度开源的amis引擎，用json来描述页面，例如这个页面对应的信息。

根据官方文档中说明，我们可以看到低代码的“低”：

全部实现这些需要大量的代码。

但可以看到，用 amis 只需要 157 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。

因为渲染引擎是根据json生成页面，研发同学也可以将渲染引擎当做组件库使用，和antd等类似，只是不需要写React、Vue等模板代码，只要配置json即可。这样开发，远不如使用框架开发更灵活，但代码量少得多。

引用amis官方的文档中的例子：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
          />
    <link rel="stylesheet" href="sdk.css" />
    <link rel="stylesheet" href="helper.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
      html, body, .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
</style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="sdk.js"></script>
    <script type="text/javascript">
      (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          type: 'page',
          title: '表单页面',
          body: {
            type: 'form',
            mode: 'horizontal',
            api: '/saveForm',
            body: [
              {
                label: 'Name',
                type: 'input-text',
                name: 'name'
              },
              {
                label: 'Email',
                type: 'input-email',
                name: 'email'
              }
            ]
          }
        };
        let amisScoped = amis.embed('#root', amisJSON);
      })();
</script>
  </body>
</html>

选型

当你认真考虑要在项目中使用低代码时候，需要根据自己的业务定制自己的低代码开发环境。需要考虑几个因素：

是否需要低代码（基础篇-1有介绍）。
你的团队研发能力，业务属性，项目情况（是要在老项目集成还是创建新项目）。
考察低代码渐进式的能力，选择合适的层来搭建自己的项目或者集成到自己的项目中。
选择低代码平台时候，也要评估平台的易用性、学习成本、组件的丰富程度等因素。

四、总结

本文简要介绍了主流的低代码产品的功能和使用。

低代码提供很多能力：表单表格报表、流程引擎、页面模板、行业解决方案......

低代码是渐进式的：渲染引擎、可视化编辑器、运行时、平台、解决方案。

低代码/零代码产品很大一部分关注于传统企业信息化，这是它们交付价值的非常重要的场景。

对于前端同学，有两个方向可以应用低代码：

使用低代码技术提升自己的开发应用的效率，例如使用渲染引擎的确能够少写很多代码。
能够搭建一个适合自己业务的低代码平台，或者在公司级别提供一个通用性的低代码平台。

后续会继续介绍低代码的具体实践（包括低代码引擎的使用、自定义组件、私有部署等）、设计和原理。

Low-Code is Low？？？—— 低代码的使用