Dyad：开源本地优先App构建器

为什么需要 Dyad：数据主权与交付效率不可兼得

传统低代码/无代码 App 构建器（如 Power Apps、Appsmith）采用中心化架构：应用逻辑运行在云端服务器，数据持久化在服务商数据库。这种模式带来三重痛点：第一，数据合规风险——企业数据经过第三方服务器，难以满足 GDPR、HIPAA 或国内《数据安全法》对数据出境与留存的要求；第二，离线不可用——网络中断时应用完全瘫痪，无法适应工厂、野外、地铁等弱网环境；第三，供应商锁定——应用配置、数据模型绑定在私有云平台，迁移成本极高。

Dyad 采用 local-first 架构，将数据库、应用逻辑、文件存储全部内嵌在客户端，数据默认写入用户设备的本地存储。应用启动不依赖网络，数据变更通过 CRDT（无冲突复制数据类型，一种支持多端并发修改且自动合并的数据结构）同步协议在设备间传播。开发者用 TypeScript 编写数据模型与业务逻辑，用 Web 技术渲染界面，构建产物是一个可独立运行的桌面应用或 PWA（渐进式 Web 应用，可通过浏览器安装到本地的网页应用）。

与同类工具相比，Dyad 的本质差异在于「代码优先」：它不提供拖拽式画布，而是要求开发者编写数据模型与同步逻辑。这带来更高的灵活性——可以嵌入自定义 AI 推理、本地向量检索等复杂逻辑——但同时提高了上手门槛。适合已有编程基础、需要深度定制数据流的团队，而非业务人员自助搭应用。

安装与环境配置：3 步就绪

安装 Dyad 前需准备 Node.js 18+ 环境。Dyad 通过 npm 分发 CLI 工具，用于初始化项目与启动开发服务器。

步骤一：全局安装 Dyad CLI。打开终端执行 npm install -g @dyad/cli，安装完成后可用 dyad --version 验证。

步骤二：初始化项目。在目标目录执行 dyad create my-app，CLI 会生成包含数据模型、同步逻辑与 UI 骨架的标准项目结构。进入项目目录执行 npm install 安装依赖。

步骤三：启动开发服务器并验证。执行 npm run dev，Dyad 会启动本地开发服务器并自动打开浏览器预览。此时修改数据模型文件，界面会热更新。

# 安装 CLInpm install -g @dyad/cli # 验证安装dyad --version # 创建新项目dyad create my-app # 安装依赖并启动cd my-appnpm installnpm run dev

快速上手：15 分钟跑通第一个待办应用

Dyad 的核心开发流程是「定义数据模型 → 编写同步逻辑 → 生成界面」。以构建一个支持多端同步的待办应用为例，最小可用流程的思路是：先定义一个 Todo 数据模型，声明其 ID、标题、完成状态字段；然后配置同步策略（实时同步或手动触发）；最后通过内置的 UI 组件库渲染列表与表单。

分步操作说明：

1. 在 src/models/todo.ts 中定义 Todo 类型，字段包括 id: string、title: string、done: boolean、createdAt: number。

2. 在 src/sync/config.ts 中设置同步策略：选择 realtime（实时）或 manual（手动），并配置可选的同步服务器地址；本地开发时可留空，仅用内存同步。

3. 在 src/ui/App.tsx 中调用 useDyadStore() 获取数据仓库实例，通过 store.add(todo) 添加待办、store.update(id, { done: true }) 标记完成。

4. 运行 npm run dev，浏览器中会出现可添加、勾选、删除待办的界面，数据保存在 IndexedDB（浏览器内置的本地数据库）中。

运行成功后，打开浏览器开发者工具的 Application 面板，可以看到 IndexedDB 中已创建 dyad-store 数据库。进阶技巧：在 sync/config.ts 中配置 syncServer: "wss://your-server.com" 后，刷新页面数据仍保留，且多个设备间的待办列表会自动合并——这正是 CRDT 同步的效果。若需在 Node.js 环境调用数据仓库，可直接导入 @dyad/store 包，API 与前端一致。

核心能力详解：4 大支柱

支柱一：本地优先数据存储。 Dyad 内置存储引擎基于 IndexedDB（浏览器）与 SQLite（桌面端），数据写入先落本地、后同步远端。所有数据操作通过统一的数据仓库 API 完成，无需手写 SQL 或 REST 调用。本地存储意味着应用冷启动无需等待网络请求，页面渲染速度接近原生应用。

支柱二：CRDT 同步引擎。 Dyad 的核心创新在于内嵌的 CRDT 同步层。每个数据记录携带版本向量（记录各端修改次数的元数据），多端并发编辑时自动合并，无需中心服务器协调。测试数据显示，在 10ms 网络延迟下同步延迟低于 500ms。该引擎支持断线重连、增量同步与冲突自动解决，开发者无需处理复杂的并发控制逻辑。

支柱三：TypeScript 数据模型。 数据模型即代码——用 TypeScript 接口定义实体与关系，Dyad 编译器自动生成数据库迁移脚本与校验逻辑。修改模型后运行 dyad migrate 自动生成迁移文件，保证数据结构演进可控。相比无代码工具的表单配置，这种方法可评审、可测试、可回滚。

支柱四：嵌入式 UI 组件库。 Dyad 提供一组基于 Web Components 的界面组件（列表、表单、看板），数据绑定采用声明式语法。组件支持暗色模式与移动端适配，并可无缝嵌入 React/Vue 应用。界面不是重点，但开箱即用的组件显著减少了样板代码。

生产部署与监控：从上线到运维

部署方式一：PWA 分发。 将 Dyad 应用构建为 PWA，托管在任意静态服务器（Nginx、GitHub Pages、S3）即可。用户首次访问后应用资源被浏览器缓存，后续启动完全离线。此方式无需运维应用服务器，适合内部工具与个人应用，构建命令为 npm run build，产物输出到 dist/ 目录。

部署方式二：Electron 桌面应用。 对需要访问文件系统或原生设备能力的场景，用 Electron 打包为桌面应用。Dyad 的存储引擎自动切换至 SQLite，数据文件保存在用户目录。需注意自动更新机制需自行集成 electron-updater，且未签名应用在 macOS 上会触发 Gatekeeper 拦截。

可观测性： Dyad 提供轻量级遥测接口——通过 dyad.telemetry() 获取同步延迟、冲突率、存储占用等指标。生产环境建议将这些指标导出至 Prometheus 或自建监控面板。本地优先架构下的监控难点在于数据分散在客户端，建议在同步服务器端聚合匿名指标（不回传业务数据）。日志方面，CLI 提供 dyad logs 命令查看同步引擎日志，可设置 DYAD_LOG_LEVEL=debug 输出详细同步轨迹。

<p class="para-label">避坑清单：</p>

<ul class="dash-list"><li>坑 1：生产环境禁用内存同步模式——sync/config.ts 中 mode: "memory" 仅用于单机调试，重启即丢数据，上线前必须改为 persistent 并配置同步服务器；坑 2：数据模型字段类型变更需执行 dyad migrate——直接修改 TypeScript 类型而不生成迁移文件会导致旧数据读取异常，且此操作不可逆，变更前务必备份数据库文件；坑 3：大规模数据集慎用全量同步——CRDT 同步在大文档场景下性能衰减明显，超过 10 万条记录建议改用增量同步或分片策略；坑 4：浏览器存储有配额限制——IndexedDB 在部分移动浏览器上限仅 50MB，需在存储层捕获 QuotaExceededError 并提示用户清理或切换至桌面端；坑 5：同步服务器需要自己部署与维护——官方未提供托管同步服务，需自行实现 WebSocket 服务端并处理认证、限流与持久化。</li></ul>

AI 应用场景

常见误区

面试题