达芬奇低代码开发平台

80%

可视化页面覆盖

+40%

跨项目组件复用

-30%

跨团队联调成本

背景

招生业务的活动页有强烈的季节性与差异化需求：同一个招生季里，不同校区要不同的表单、不同的优惠说明、不同的落地页结构。纯手写页面意味着排期永远排不满，于是团队决定做一套可视化搭建平台，让运营自助配置 80% 的常规页面。

我的角色

使用 React + UmiJS 搭建 Provider 核心模块，实现可视化拖拽交互引擎。
主导低代码平台编译时方案选型，重构多工程协作流程。
设计统一 DSL 数据结构，规范多项目通信协议。
基于 Midway.js + MongoDB 开发 API 服务，编写 Node CLI 完成页面构建与发布。

关键设计

1. DSL 是平台的地基

组件树必须能被序列化、校验、版本化。DSL 只描述结构与数据绑定，不描述样式细节：

{
  "version": "1.2",
  "root": {
    "id": "page",
    "type": "Page",
    "children": [
      {
        "id": "form_1",
        "type": "SignupForm",
        "props": { "title": "秋季招生", "fields": ["name", "phone"] },
        "bindings": { "source": "api://campus/{campusId}/form" }
      }
    ]
  }
}

version 是必需的：平台升级时要能识别旧结构并迁移，否则历史页面会集体失效。

2. 拖拽引擎的核心是坐标系与吸附

真正的难点不是「拖动」，而是拖到目标容器后如何计算插入位置：

画布使用统一坐标系，滚动与缩放通过变换矩阵换算，保证拖拽精度。
依据指针相对容器的位置与子节点矩形，计算最近的插入索引，而不是依赖 DOM 的 dragover 顺序。
拖拽过程只更新临时状态，落点确定后才写入 DSL，避免频繁重渲染整个组件树。

3. 编译时生成，而非运行时解释

早期方案在浏览器里解析 DSL 并递归渲染，结果是首屏慢、SEO 差、无法缓存。改为编译时生成：

Node CLI 读取 DSL，生成静态页面与资源清单。
构建产物直接部署，页面无需携带渲染引擎。
发布从「等运维」变成分钟级，且天然支持回滚到任意版本。

4. 微前端承接多团队协作

编辑器、组件库、发布控制台由不同小组维护。统一 DSL 与通信协议后，各子应用可独立开发，联调成本下降约 30%。

结果

平台覆盖约 80% 的可视化页面搭建场景，运营可自助上线常规活动页。
跨项目组件复用率提升约 40%，同类页面从「每次重写」变为「选模板改配置」。
页面发布流程缩短到分钟级，不再依赖前端排期。

复盘

低代码平台的边界应该画在编辑器与运行时之外：DSL 定义能力，编译器决定产物，组件库决定表现。三者解耦之后，平台才能既承载运营的灵活性，又不牺牲线上的性能与可维护性。