低代码搭建

• 各拖拽库的能力与 API
• 拖拽排序与编辑器场景
• 取舍与选型

react-dnd 是 React 生态成熟、底层抽象的拖拽库，能力强但需较多样板代码（ItemType、DnD provider、拖拽代理）；@dnd-kit/core 提供更简洁、可访问性更好、基于 pointer 的拖拽 API，性能好；dnd-kit-sortable 基于 dnd-kit 提供排序能力（SortableContext、useSortable），适合列表排序。可视化搭建取舍上：react-dnd 适合复杂自定义拖拽与生态，dnd-kit 适合现代、可访问、高性能的拖拽排序与自由布局。选型取决于拖拽复杂度、可访问性与性能需求。

取舍核心是"拖拽复杂度 vs 现代性与可访问性"。dnd-kit 更现代易用，react-dnd 更底层灵活。

• Schema 驱动渲染的理念
• 各库的定位与能力
• 表单与页面搭建

Schema-driven 渲染用 JSON Schema 描述表单/页面结构，运行期渲染为 UI。react-jsonschema-form 基于 JSON Schema 标准，通用但定制需扩展；formily 是阿里出的高性能表单方案，支持 Schema 与组件联动、校验、复杂交互，适合中后台；survey.js 专注问卷/调查表单，支持可视化编辑器与多端。取舍上：标准 JSON Schema 或简单表单选 react-jsonschema-form；复杂业务表单与联动选 formily；问卷调研选 survey.js。选型取决于表单复杂度与定制需求。

Schema 驱动把"数据定义"与"渲染"解耦。选型取决于表单复杂度、定制能力与生态。

• 低代码 DSL 的标准化
• 物料/组件协议
• 平台与自定义扩展

阿里 lowcode-engine 等低代码平台通过标准 DSL 描述页面结构、组件与数据绑定，配合物料协议（组件描述、schema）、设置器等，实现"页面即数据"的搭建。工程价值在于：DSL 让页面可序列化、可存储、可还原，支持可视化搭建与代码生成；物料协议让组件可扩展、可复用，平台可接入自定义组件。自定义的工程价值是让平台适配业务：自定义物料、setter、DSL 扩展。但需注意 DSL 的版本管理与迁移成本。

低代码 DSL 的核心价值是"页面可描述、可渲染、可扩展"。工程上自定义物料与协议让平台贴合业务。

• 内部工具搭建
• 数据源与 UI 绑定
• 开源与自托管

Appsmith、ToolJet 是开源低代码平台，用于快速搭建企业内部工具（后台、仪表盘、管理面板）。它们提供可视化 UI 搭建、数据源连接（数据库、API）、查询与绑定、组件与权限管理。工程价值在于：显著降低内部工具开发成本与周期，非开发者也能搭建，支持自托管保证数据安全。取舍上，Appsmith、ToolJet 适合快速交付内部工具，但对复杂交互与定制有限，需评估与前端团队的协作边界。

这类平台的价值是"快速搭建内部工具 + 自托管安全"。工程上适合快速交付，但复杂定制需权衡。

• 视觉设计工具
• 导出代码与现代前端
• 设计与工程的边界

Webflow、Framer 是视觉设计/建站工具，让设计师可视化设计并生成可部署的网站或代码。Webflow 偏向营销/内容站，可导出 HTML/CSS；Framer 偏向交互原型与设计，可生成 React 组件。现代工程边界：自动生成代码质量与可维护性、与前端工程（组件化、状态、构建）的衔接、以及长期维护成本。它们适合设计快速验证与简单站点，但复杂业务应用与深度定制仍需前端工程师介入，边界在于"设计协作 vs 工程化交付"。

边界是"设计工具交付 vs 工程化代码"。适合快速设计与营销站，复杂业务需工程化重建。

• Bubble 的无代码开发
• 复杂业务流的能力边界
• 与前端工程师的协作

Bubble 是可搭建复杂业务流（SaaS 应用）的无代码平台，支持数据库、工作流、权限与部署。它能让非开发者快速搭建完整应用，但复杂业务流存在边界：性能、代码定制、深度集成、版本控制与调试受限。与前端工程师协作时，取舍是"快速搭建 vs 工程化能力"：Bubble 适合快速 MVP 与内部工具，但生产级 SaaS 的复杂交互、性能与可维护性仍需前端工程师用代码实现。选型需评估业务复杂度、锁定风险与长期维护。

Bubble 的价值是"快速搭建复杂业务流"，但边界在性能与定制。工程上需权衡锁定风险与长期维护。

• NocoDB 的数据库表格
• Appsmith 的内部工具
• 组合与自托管

NocoDB 是开源 Airtable 替代，把数据库（MySQL/Postgres 等）以表格形式可视化操作，支持视图、表单与 API；Appsmith 是开源低代码平台，用于搭建内部工具。二者可组合：NocoDB 管理数据、Appsmith 构建 UI 与交互，形成"数据 + 工具"的轻量后端。现代工程价值在于：自托管保证数据安全、快速搭建内部应用、降低开发成本。适合中小团队快速交付数据驱动的内部工具，但复杂业务仍需定制。

NocoDB + Appsmith 是"数据库可视化 + 低代码工具"的组合。价值在自托管与快速交付。

• Backendless 的 BaaS 能力
• 低代码搭建
• 边界与锁定

Backendless 是集 BaaS（后端即服务：数据库、认证、文件、推送）与低代码开发于一体的平台，提供可视化后端与前端搭建。工程价值在于：快速搭建全栈应用（数据、认证、API 开箱即用），减少后端开发。现代边界：平台锁定、自定义能力受限、性能与成本随规模变化、复杂业务需代码。工程上适合快速 MVP 与中小应用，但需评估锁定风险与长期扩展。

Backendless 的价值是"BaaS + 低代码"的一体化。边界在锁定与定制，选型需评估长期成本。

• 浏览器 IDE 的能力
• 在线开发与协作
• 低代码/模板开发

StackBlitz、CodeSandbox 是浏览器 IDE，支持在浏览器中运行、编辑、构建与预览前端项目，无需本地环境。StackBlitz 用 WebContainers 在浏览器内运行 Node 工具链，CodeSandbox 提供在线沙箱与协作。工程价值在于：快速原型、demo、教学、协作开发，以及低代码式(template)快速起项目。取舍上，在线 IDE 便捷但受限于浏览器性能与资源、离线能力弱，适合原型与协作，重任务仍需本地环境。

浏览器 IDE 的价值是"零配置 + 在线协作 + 快速原型"。工程上适合原型与教学，重开发仍需本地。

• Grapes.js 的开源可视化编辑器
• Builder.io 的视觉构建
• 自研 vs 引入

Grapes.js 是开源的可视化 HTML 编辑器，可嵌入作为 CMS 编辑器；Builder.io 是视觉开发平台，支持把设计转代码、与 CMS 集成。二者用于"内容可视化编辑"。取舍上：自研编辑器有最灵活的定制与数据模型，但成本高、维护重；引入 Grapes.js/Builder.io 可快速获得可视化编辑能力、减少成本，但受限于其能力与模型。工程上需评估业务需求的复杂度、定制深度、数据模型与经济成本，决定自研还是引入。

取舍是"自研灵活 vs 引入快速"。需评估编辑需求复杂度、数据模型与维护成本。

• 拖拽编辑器的画布
• 组件树的数据结构
• 属性面板的联动

可视化搭建通常由三部分组成：拖拽编辑器（画布）用于从物料拖拽组件、调整布局；组件树展示页面组件的层级结构，可选中、删除、排序；属性面板展示选中组件的属性（props、样式、事件），修改后实时更新。设计上，三者围绕统一的组件模型（schema/DSL）联动：画布操作更新组件树，属性面板读取与修改选中组件的数据，数据驱动渲染。工程上需设计统一的组件描述、选择与撤销/重做机制，保证实时同步。

三者围绕"组件模型"联动。设计关键是统一数据模型与实时同步，以及选择、撤销/重做等交互。

• 低代码的现状
• 适用场景与边界
• 与传统开发的权衡

低代码/可视化搭建的现状是：在表单、后台、内部工具、营销页等模板化场景成熟高效，可显著提升交付效率；但存在边界：复杂业务逻辑、高性能、深度定制、控制与可维护性受限，且存在平台锁定风险。边界上，低代码适合"标准化、高频、模板化"的场景，复杂创新型应用仍需传统开发。工程上应把低代码用于合适场景，保留传统开发能力，评估锁定与长期成本。

低代码的边界是"模板化 vs 复杂定制"。工程上合理划分场景，避免盲目使用低代码。

• AI 代码生成工具
• 生成代码与集成
• 边界与质量

v0.dev、bolt.new、Cursor Composer 等是 AI 代码生成工具，v0.dev 生成 UI 组件/页面，bolt.new 生成全栈应用，Cursor Composer 在 IDE 中生成代码。工程价值在于：加速原型、组件生成、提高开发效率，生成可迭代的代码。边界是：生成代码质量、可维护性、安全与一致性问题，需人工审查与重构；对复杂业务、架构与调试仍需工程师。工程上应把 AI 生成作为辅助，纳入代码评审与质量门禁。

AI 代码生成的价值是"提效 + 原型"，边界在质量与可维护性。工程上需人工审查与约束。

• visual builder 的能力
• CMS 集成
• 边界与取舍

Builder.io、Plasmic、Anakin 是 visual builder 平台，让设计/内容可视化编辑并生成代码或接入 CMS。Plasmic 偏 React/Vue 组件可视化与 CMS 集成，Builder.io 偏视觉开发与 CMS，Anakin 偏 AI 辅助搭建。工程价值在于：把可视化编辑与现有代码/CMS 结合，内容团队可编辑、工程团队可维护。边界是：生成的代码与组件模型的兼容、深度定制、数据模型与锁定，以及内容与代码的同步。工程上需评估对现有架构的适配。

价值是"可视化编辑 + 代码/CMS 集成"。边界在组件模型兼容、定制与锁定，需评估适配。

• Retool 的内部工具
• 快速搭建 vs SaaS 工程
• 边界与扩展

Retool 是面向内部工具的低代码平台，快速搭建后台、仪表盘、管理面板，连接数据源与 API。取舍上：内部工具用 Retool 可快速交付、省成本，但产出到生产级 SaaS 有边界——性能、定制、可维护性、版本控制与深度集成受限，且平台锁定。现代 SaaS 工程通常需要代码实现核心业务、Retool 用于内部运营工具。工程上应把 Retool 用在内部工具场景，核心产品用工程化开发。

Retool 的价值是"内部工具快速搭建"。边界在性能与定制，核心 SaaS 需工程化开发。

• 从 PRD 生成应用
• 生成完整 SPA
• 边界与质量

Lovable（GPT Engineer）是 AI 驱动的应用生成工具，从 PRD/自然语言描述生成完整应用（SPA）。工程价值在于：把需求描述快速转化为可运行的前端应用，加速原型与 MVP 验证。边界是：生成代码的质量、可维护性、架构与安全需人工审查，复杂业务与数据模型仍需工程师；生成的 SPA 适合原型与演示，生产级需重构与工程化。工程上应把这类工具用于快速验证，再工程化落地。

价值是"PRD 到 SPA 的快速生成"。边界是质量与可维护性，适合原型验证而非直接生产。

• AI Agent 的软工能力
• 协作边界
• 人工审查

Replit Agent 与 v0.dev 是 AI 软件工程工具，Replit Agent 可自动搭建/修改应用，v0.dev 生成 UI 组件。协作边界是：AI 擅长生成代码、搭原型、改局部，但理解业务上下文、架构决策、性能与安全、长期维护仍需工程师。工程上应把 AI 作为"高效协作者"，用于生成初稿、脚手架、重构建议，同时以代码评审、测试、安全审查把关。边界在于"AI 生成 vs 工程决策"。

协作边界是"AI 生成 + 工程师把关"。工程上让 AI 提速，工程师负责架构、质量与安全。

• Headless CMS 的能力
• 可视化编辑与低代码
• 取舍

Storyblok、Sanity、Strapi 都是 Headless CMS，提供内容管理与 API，但定位不同：Storyblok 偏可视化编辑（Visual Editor）与内容结构；Sanity 偏结构化内容与实时、可定制；Strapi 偏自托管、工程化开源。取舍上，Headless CMS 提供内容 API 与前端解耦，介于"内容管理"与"低代码"之间——内容团队可编辑，前端用代码渲染。工程上按自托管需求、内容结构、可视化编辑与团队能力选型，注意与现有前端架构的集成。

Headless CMS 的价值是"内容 + API 解耦"。取舍在于可视化编辑、自托管与内容结构的匹配。

• Windmill 的工作流自动化
• 脚本与低代码
• 边界

Windmill 是开源低代码平台，聚焦工作流自动化与脚本化，用脚本（Python/TS）编排工作流、定时任务、审批与集成。工程价值在于：把团队的工作流自动化（调度、流程、集成）快速落地，脚本与低代码结合兼顾灵活与易用。边界是：复杂业务逻辑、状态与性能仍需代码与工程化，平台绑定与维护需评估。工程上适合团队内部自动化场景，复杂应用需传统开发。

Windmill 的价值是"工作流自动化 + 脚本/低代码"。边界在复杂逻辑与平台绑定。