低代码与无代码

低代码不是"不用写代码"，而是"只写必要的代码"——把重复的、模板化的、可配置的部分交给平台，把独特的、复杂的、差异化的部分留给开发者。

1. 概念辨析

1.1 什么是低代码 / 无代码

关键区别：无代码追求"可视化拖拽完成一切"；低代码承认"有些场景必须写代码"，但尽量减少代码量。

一句话总结：无代码是给业务人员用的 Excel 升级版；低代码是给开发者用的效率工具。

1.2 发展脉络

1990s          2000s          2014          2018+          2022+
│              │              │              │              │
RAD 工具       BPM 工作流     Forrester 提出 国内外平台爆发   AI + 低代码
(PowerBuilder  (流程引擎)     "Low-Code"    OutSystems      Copilot/通义
 Oracle Forms)                概念诞生       Mendix/宜搭     灵码集成

为什么现在火：

• 企业数字化转型需求井喷，但程序员供给远不足
• 后台管理系统高度同质化（90% 是增删改查 + 审批流）
• 前端框架成熟，为低代码引擎提供了基础设施

2. 核心原理：低代码平台是怎么跑起来的

2.1 整体架构

┌─────────────────────────────────────────────────────┐
│                    设计器（Designer）                 │
│  拖拽组件 → 配置属性 → 编排逻辑 → 实时预览            │
└────────────────────┬────────────────────────────────┘
                     │ 产出 Schema（JSON）
                     ▼
┌─────────────────────────────────────────────────────┐
│                   引擎（Engine）                      │
│  解析 Schema → 渲染组件 → 执行逻辑 → 管理状态         │
└────────────────────┬────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────┐
│                  物料（Materials）                    │
│  组件库（表格/表单/图表）+ 区块模板 + 页面模板         │
└─────────────────────────────────────────────────────┘

三个核心角色：

2.2 协议：Schema（页面描述规范）

低代码平台的核心是 Schema——一份 JSON，完整描述一个页面长什么样、有哪些交互、数据从哪里来。

{
  "componentName": "Page",
  "props": { "title": "用户管理" },
  "children": [
    {
      "componentName": "SearchForm",
      "props": {
        "fields": [
          { "name": "keyword", "label": "关键词", "type": "input" },
          { "name": "status", "label": "状态", "type": "select",
            "options": [
              { "label": "启用", "value": 1 },
              { "label": "禁用", "value": 0 }
            ]
          }
        ],
        "onSearch": { "type": "ref", "target": "userTable.refresh" }
      }
    },
    {
      "componentName": "Table",
      "id": "userTable",
      "props": {
        "columns": [
          { "key": "name", "title": "姓名" },
          { "key": "email", "title": "邮箱" },
          { "key": "status", "title": "状态",
            "render": { "type": "tag", "map": { "1": "启用", "0": "禁用" } }
          }
        ],
        "dataSource": { "type": "api", "url": "/api/users", "method": "GET" },
        "pagination": { "pageSize": 20 }
      }
    }
  ]
}

Schema 的本质：用声明式数据结构替代命令式代码。相当于"用 JSON 写 React/Vue 组件"。

常见协议标准：

• 阿里巴巴 LowCodeEngine 规范：国内事实标准，组件可跨平台复用
• App Router / Amis：百度开源的 JSON 渲染方案
• 各厂家自研协议：宜搭、明道云、轻流各自定义了私有 Schema

2.3 引擎：如何把 Schema 变成真实页面

引擎是低代码平台的运行时核心，一个极简版引擎的实现：

// 引擎核心：递归渲染组件树
class LowCodeEngine {
  constructor(components) {
    // components: 注册的物料组件映射表
    // { "Button": ButtonComponent, "Table": TableComponent, ... }
    this.components = components;
  }

  // 解析并渲染 Schema
  render(schema, context) {
    const { componentName, props, children, id } = schema;

    // 1. 查找对应的 React/Vue 组件
    const Component = this.components[componentName];
    if (!Component) {
      console.warn(`未注册组件: ${componentName}`);
      return null;
    }

    // 2. 解析 props 中的表达式/数据源/事件绑定
    const resolvedProps = this.resolveProps(props, context);

    // 3. 处理事件绑定（onClick → 真实函数）
    const eventProps = this.resolveEvents(props, context);

    // 4. 递归渲染子组件
    const renderedChildren = children?.map(child =>
      this.render(child, context)
    );

    // 5. 返回真实 VNode
    return h(Component, {
      ...resolvedProps,
      ...eventProps,
      key: id,
    }, renderedChildren);
  }

  // 解析属性中的动态表达式
  resolveProps(props, context) {
    const result = {};
    for (const [key, value] of Object.entries(props)) {
      // 处理 JS 表达式: { "type": "expression", "code": "state.total * 100" }
      if (value?.type === 'expression') {
        // 在沙箱中执行表达式，注入 state/props/context
        result[key] = this.evaluateExpression(value.code, context);
      }
      // 处理数据源: { "type": "api", "url": "/api/users" }
      else if (value?.type === 'api') {
        result[key] = this.resolveDataSource(value, context);
      }
      // 普通值直接使用
      else {
        result[key] = value;
      }
    }
    return result;
  }

  // 在安全沙箱中执行表达式
  evaluateExpression(code, context) {
    const sandbox = { state: context.state, $ctx: context };
    const fn = new Function(...Object.keys(sandbox), `return (${code})`);
    return fn(...Object.values(sandbox));
  }

  // 解析数据源（API / 变量 / 引用）
  async resolveDataSource(ds, context) {
    if (ds.type === 'api') {
      const res = await fetch(ds.url, { method: ds.method || 'GET' });
      return res.json();
    }
    if (ds.type === 'variable') {
      return context.state[ds.key];
    }
  }

  // 事件绑定转换为真实函数
  resolveEvents(props, context) {
    const events = {};
    for (const [key, value] of Object.entries(props)) {
      if (key.startsWith('on') && typeof value === 'object') {
        // { "type": "action", "action": "openModal", "params": {...} }
        events[key] = () => context.actions[value.action]?.(value.params);
      }
    }
    return events;
  }
}

引擎要解决的核心问题：

2.4 设计器：可视化搭建怎么实现

设计器界面的三个核心区域：

┌──────────────┬──────────────────┬──────────────┐
│   物料面板    │                  │   属性面板    │
│              │                  │              │
│ 📦 基础组件   │   画布 Canvas     │ 组件名称      │
│  - Button    │                  │ 尺寸/颜色     │
│  - Input     │   [拖拽放置区域]   │ 数据绑定      │
│  - Table     │                  │ 事件配置      │
│              │   实时预览效果     │ 条件渲染      │
│ 📦 布局组件   │                  │              │
│  - Row/Col   │                  │              │
│  - Card      │                  │              │
│              │                  │              │
│ 📦 业务组件   │                  │              │
│  - UserSelect│                  │              │
└──────────────┴──────────────────┴──────────────┘

拖拽的实现（以 React DnD 为例）：

// 拖拽的基本流程
// 1. 物料面板中的组件标记为 DragSource
// 2. 画布区域标记为 DropTarget
// 3. 放置时，往 Schema JSON 中插入新节点，引擎即时渲染

// 简化示意
function Canvas() {
  const [schema, setSchema] = useState(initialSchema);

  const handleDrop = (componentMeta, position) => {
    // 在 Schema 树中插入新节点
    const newNode = createNode(componentMeta);
    const newSchema = insertNode(schema, newNode, position);
    setSchema(newSchema);
    // 引擎立即根据新 Schema 重新渲染
  };

  return (
    <DropTarget onDrop={handleDrop}>
      <Engine schema={schema} />
    </DropTarget>
  );
}

属性面板的核心：根据组件元数据动态生成配置表单。

// 组件的元数据描述
const ButtonMeta = {
  componentName: 'Button',
  props: [
    { name: 'text', label: '按钮文字', type: 'string', default: '确定' },
    { name: 'type', label: '类型', type: 'select',
      options: ['primary', 'default', 'danger', 'link'] },
    { name: 'size', label: '尺寸', type: 'select',
      options: ['large', 'middle', 'small'] },
    { name: 'disabled', label: '是否禁用', type: 'boolean', default: false },
    // 高级配置
    { name: 'visible', label: '条件可见', type: 'expression',
      placeholder: "{{ state.status === 'active' }}" },
    { name: 'onClick', label: '点击事件', type: 'event' },
  ],
};

// 属性面板根据元数据动态渲染表单
function PropsEditor({ meta, value, onChange }) {
  return (
    <Form>
      {meta.props.map(prop => (
        <FormItem key={prop.name} label={prop.label}>
          {prop.type === 'string' && <Input value={value[prop.name]} />}
          {prop.type === 'select' && <Select options={prop.options} />}
          {prop.type === 'boolean' && <Switch checked={value[prop.name]} />}
          {prop.type === 'expression' && (
            <CodeEditor language="javascript" placeholder={prop.placeholder} />
          )}
          {prop.type === 'event' && <EventHandler config={value[prop.name]} />}
        </FormItem>
      ))}
    </Form>
  );
}

2.5 出码：Schema 如何变成真实代码

低代码平台的三种出码策略：

编译出码的本质：Schema JSON → AST → 代码字符串。

// Schema 片段
const schema = {
  componentName: 'Page',
  children: [
    { componentName: 'Button', props: { text: '提交', type: 'primary' } }
  ]
};

// 出码结果
// import { Button } from 'antd';
// export default function Page() {
//   return <Button type="primary">提交</Button>;
// }

// 出码器的核心是一个递归的代码生成器
function generateCode(schema) {
  const { componentName, props, children } = schema;

  // 1. 属性转代码字符串
  const propsStr = generateProps(props);

  // 2. 子组件递归生成
  const childrenStr = children?.map(generateCode).join('\n') || '';

  // 3. 拼接 JSX
  return `<${componentName}${propsStr}>${childrenStr}</${componentName}>`;
}

3. 主流平台与方案

3.1 国内外平台全景

3.2 开源引擎方案对比

3.3 Amis：JSON 配置即页面

百度 Amis 是"运行时解析式"低代码的典型代表——不产出源码，JSON 直接即是运行中的页面。

{
  "type": "page",
  "title": "用户管理",
  "body": [
    {
      "type": "crud",
      "api": "/api/users",
      "columns": [
        { "name": "id", "label": "ID" },
        { "name": "name", "label": "姓名" },
        { "name": "email", "label": "邮箱" },
        {
          "name": "status",
          "label": "状态",
          "type": "mapping",
          "map": { "1": "<span class='text-success'>启用</span>", "0": "<span class='text-danger'>禁用</span>" }
        }
      ],
      "filter": {
        "body": [
          { "type": "input-text", "name": "keyword", "label": "关键词", "placeholder": "搜索姓名/邮箱" },
          { "type": "select", "name": "status", "label": "状态", "options": [{"label": "启用","value":1},{"label": "禁用","value":0}] }
        ]
      }
    }
  ]
}

核心设计思想：

• 一切皆组件：页面是组件、表单是组件、表格是组件、按钮也是组件
• 每个组件有 type 字段声明自己的类型
• 组件通过嵌套（body / columns / filter）形成树状结构
• 引擎按 type 查找对应 React 组件并渲染

Amis 的适用边界：

• ✅ 标准后台 CRUD 页面 —— 极快，JSON 写完即上线
• ✅ 表单密集型场景 —— 120+ 表单组件开箱即用
• ❌ 高度定制 UI —— JSON 配置无法替代 CSS 像素级调整
• ❌ 复杂交互逻辑 —— 联级联动超出 3 层时 JSON 配置痛苦

4. 后端低代码怎么工作

低代码不只是前端的事——后端逻辑同样需要"低代码化"。

4.1 数据模型驱动

传统开发流程：数据库建表 → 写后端代码 → 写接口 → 写前端页面

低代码流程：  在界面上定义数据模型 → 自动生成数据表 + CRUD 接口 + 默认页面

# 在一个低代码平台上定义"客户"数据模型
模型名称: Customer
字段:
  - name: string(50), 必填, 显示名="客户名称"
  - contact: string(20), 显示名="联系电话"
  - level: enum(普通/VIP/SVIP), 默认="普通"
  - source: string(100), 显示名="客户来源"
  - created_at: datetime, 自动填充=当前时间

平台根据这个模型自动生成：

• 数据库表 customer
• REST 接口：GET/POST/PUT/DELETE /api/customers
• 默认列表页 + 详情页 + 表单页

4.2 流程引擎

审批流和业务流程是低代码的核心场景：

请假审批流程：

  员工提交 ──→ 部门主管审批 ──→ 人事审批 ──→ 归档
               │                 │
               └── 驳回 ─────────┘ (回到提交人)

# 低代码平台中的流程定义（BPMN 简化版）
流程名称: 请假审批
触发条件: 新增请假记录
节点:
  - 节点1: 部门主管审批
      审批人: ${当前用户.直属上级}
      审批方式: 或签（任意一人通过即可）
      超时: 48小时自动通过
      分支:
        - 通过 → 节点2
        - 驳回 → 结束（通知提交人）

  - 节点2: 人事审批
      审批人: HR部门所有人
      审批方式: 会签（所有人通过）
      分支:
        - 通过 → 节点3
        - 驳回 → 节点1（退回到上一步）

  - 节点3: 归档
      自动操作:
        - 更新请假记录状态 = 已通过
        - 扣减年假余额 -${请假天数}
        - 发送通知给提交人

流程引擎的核心机制：

4.3 逻辑编排

对于"获取数据 → 处理 → 写入"这类逻辑，低代码平台提供可视化函数编排：

                    ┌─────────────┐
触发（HTTP 请求）──→ │ 查询用户信息  │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐       是
                    │ 是否为VIP?   │────────→ 计算折扣 20%
                    └──────┬──────┘
                           │ 否
                    ┌──────▼──────┐
                    │ 计算折扣 0%  │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │ 生成订单     │
                    └─────────────┘

本质上是把以下代码可视化：

async function createOrder(req) {
  const user = await db.user.findById(req.userId);
  const discount = user.level === 'VIP' ? 0.2 : 0;
  return db.order.create({ ...req.body, discount });
}

5. 低代码 vs 传统开发：什么时候该用

5.1 适用场景

5.2 不适用场景

5.3 决策框架

这个功能/页面适合用低代码吗？

├─ 是不是增删改查 + 表格 + 表单？
│  └─ 是 → 用低代码（效率碾压手写）
│
├─ 是不是审批流 / 工作流？
│  └─ 是 → 用低代码的流程引擎
│
├─ UI 是否要求像素级定制？
│  └─ 是 → 必须手写（低代码做不到）
│
├─ 有没有复杂的、非标准的前端交互？
│  └─ 是 → 手写，或在低代码中嵌入自定义组件
│
├─ 是否频繁迭代、需求变化快？
│  └─ 是 → 低代码（改配置比重构代码快）
│
└─ 团队是否具备专业前端能力？
   ├─ 有 → 自建或基于开源引擎定制
   └─ 无 → 采购成熟低代码平台

6. 开发者视角：低代码改变了什么

6.1 开发者角色的转变

传统开发者：  手写每一行代码 → 你就是代码的唯一生产者

低代码开发者： 写物料组件 + 写引擎扩展 + 写复杂逻辑 + 解决平台无法覆盖的场景
              └── 你是低代码平台的"增强者"，而不是被平台替代

6.2 使用低代码平台的三种姿势

6.3 前端开发者与低代码的关系

前端开发者的价值不会被低代码取代，但会重新分配：

  重复劳动（📉 被替代）          不可替代（📈 价值更高）
  ├─ 手写第 50 个表格页面        ├─ 设计低代码引擎架构
  ├─ 手写第 100 个表单校验       ├─ 开发高质量物料组件
  ├─ 手写标准 CRUD 接口         ├─ 解决低代码平台无法覆盖的复杂场景
  └─ 复制粘贴审批流代码          ├─ 低代码平台 + AI 结合的前沿探索
                                └─ 性能调优、安全加固、定制化改造

建议：

• 初级前端：掌握 1-2 个低代码平台使用，提升交付速度
• 中高级前端：理解低代码引擎原理，能自建或深度定制
• 架构师：能判断什么场景用低代码、什么场景手写，做正确的技术选型

7. 发展趋势

8. 动手试一试

建议学习路径：

1. 先用简道云搭一个请假审批应用（感受无代码）
2. 再用 Appsmith 搭一个数据看板（感受低代码）
3. 在 Amis 在线编辑器中写 JSON 配置生成页面（理解 Schema 驱动）
4. 阅读 LowCodeEngine 源码的 engine 和 designer 部分（理解内核）

参考资源

• 阿里巴巴 LowCodeEngine - GitHub
• Amis 官方文档 - 百度
• Forrester 低代码研究报告
• Retool - How we build internal tools