ARTICLE DETAIL

资讯详情

深耕商务建站与企业官网运营的一线实战洞察。

RxDB 作为 Replicache 替代方案:面向 Local-First Web 应用的文档数据库与通用同步引擎

RxDB 作为 Replicache 替代方案:面向 Local-First Web 应用的文档数据库与通用同步引擎 RxDB 作为 Replicache 替代方案面向 Local-First Web 应用的文档数据库与通用同步引擎【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址: https://gitcode.com/gh_mirrors/rx/rxdbReplicache 凭借基于 mutator 的同步模型和聚焦协作 Web 应用的产品定位在 local-first 社区中建立了影响力。但当项目规模增长后mutator 架构、源码可用source-available许可证与高度定制的查询 API 会成为瓶颈。本文以 RxDBReactive Database为对象系统对比两种方案的架构差异并给出无需共享 mutator 的 HTTP/GraphQL 复制实战示例帮助团队在选型时做出基于证据的决策。output文章RxDB 作为 Replicache 替代方案面向 Local-First Web 应用的文档数据库与通用同步引擎Replicache 在 local-first 社区中以基于 mutator 的同步模型和聚焦协作 Web 应用的产品定位建立了影响力。当项目规模增长后mutator 架构、源码可用许可证与高度定制的查询 API 会成为扩展瓶颈。本文以 RxDBReactive Database为对象系统对比两种方案的架构差异并给出无需共享 mutator 的 HTTP/GraphQL 复制实战示例帮助团队在选型时做出基于证据的决策。一、Replicache 简史与核心模型Replicache 由 RocicorpAaron Boodman 与 Erik Arvidsson 创立开发约 2020 年首次出现长期以源码可用许可证分发而非 OSI 批准的开放源码许可证。2024 年 Rocicorp 宣布 Replicache 免费使用同时下一代产品 Zero有时称为 Zerosync将同时接替 Replicache 与 Reflect。Replicache 的典型特征是mutator 驱动模型不是写本地数据库再通过通用复制协议推送变更而是定义描述输入数据如何改变状态的 mutator 函数。每个 mutator 先在客户端运行以获得即时反馈optimistic UI再到服务端运行产出权威状态。前端通过useSubscribe等 hook 在本地缓存变化时读取数据。这套模型带来两个直接约束逻辑必须双端镜像同一 mutator 定义必须同时存在于客户端与服务端且对同一输入产生相同 deltaAPI 围绕 mutator 名称设计而不是围绕 collection、查询或 REST 资源设计。二、RxDB 是什么RxDBReactive Database是一个 JavaScript 数据库文档存储在本地 RxCollection 中并在其上暴露 响应式查询。它运行在浏览器、Node.js、Electron 与 React Native 中。本地存储是 UI 的事实来源同步引擎 保持本地与远端一致。RxDB 以 Apache 2.0 许可证分发核心代码完全开源可审计另提供可选的高级插件。关键属性文档模型JSON schema 索引MongoDB 风格查询语言RxQuery基于 RxJS Observable 的响应式结果可插拔存储层IndexedDB、OPFS、SQLite、内存等复制能力HTTP、GraphQL、CouchDB、Firestore、WebRTC 及自定义传输每个 collection 可自定义 冲突处理器。三、Replicache 的五个痛点1. Mutator 架构强制共享逻辑每次写入都要经过 mutator且函数定义必须在客户端与服务端同时存在并产出相同结果。已拥有 REST/GraphQL 后端的团队要么把现有端点包进 mutator要么在客户端重写业务逻辑。RxDB 则把本地 collection 当作普通数据库写入在本地发生复制协议 把变更发给任意现有端点。2. 许可证历史源码可用而非开源2024 年前Replicache 大部分历史采用源码可用许可证免费使用限制在非商业项目、营收低于 20 万美元且融资低于 50 万美元的公司。2024 年公告使其免费但长期产品投入已转向 Zero。RxDB 从项目伊始就是 Apache 2.0核心不设收入门槛。3. 高度定制的查询 APIReplicache 通过 key/value 扫描与useSubscribe读取数据没有内置 MongoDB 风格操作符、schema 定义的二级索引或聚合能力任何类似查询的东西都需在扫描 API 之上用 JavaScript 组装。RxDB 提供完整 RxQuery 引擎$gt、$in、$regex、排序、limit、索引查找以及可观察结果。4. 服务端状态完全自理Replicache 提供同步协议但期望你自行维护服务端权威状态版本追踪、客户端组、patch 生成。RxDB 的 pull/push handler 只是返回文档与 checkpoint 的简单异步函数服务端可以是现有数据库上的薄封装、存储过程或 CouchDB 实例。5. 无一方 Peer-to-PeerReplicache 是纯 client-server 协议。RxDB 内置 WebRTC 复制插件peer 之间可直接同步而无需中央服务器。四、为什么团队转向 RxDBApache 2.0 许可证核心无收入门槛文档数据库JSON schema 校验与类型化查询可观察查询底层数据变化时 UI 自动更新任意端点复制包括 HTTP、GraphQL、CouchDB、Firestore 与 WebRTC多存储同一套代码在浏览器用 IndexedDB、React Native 用 SQLite、测试用内存存储无需 mutator 定义写入就是 collection 上的普通insert、patch、remove调用可控冲突处理每个 collection 可自定义冲突处理器实时行为通过 响应式查询引擎 实现。五、代码示例无共享 mutator 的 HTTP 复制以下示例创建 collection 并针对普通 REST 端点复制。服务端只需在 push 时接受一批文档、在 pull 时返回新文档加 checkpoint无需与客户端共享任何 mutator。import { createRxDatabase } from rxdb/plugins/core; import { getRxStorageLocalstorage } from rxdb/plugins/storage-localstorage; import { replicateRxCollection } from rxdb/plugins/replication; const db await createRxDatabase({ name: app, storage: getRxStorageLocalstorage() }); await db.addCollections({ todos: { schema: { title: todo schema, version: 0, primaryKey: id, type: object, properties: { id: { type: string, maxLength: 100 }, text: { type: string }, done: { type: boolean }, updatedAt: { type: number } }, required: [id, text, done, updatedAt] } } }); replicateRxCollection({ collection: db.todos, replicationIdentifier: todos-http, live: true, pull: { async handler(checkpoint, batchSize) { const url https://api.example.com/todos/pull?cp${ encodeURIComponent(JSON.stringify(checkpoint || {})) }limit${batchSize}; const res await fetch(url); const body await res.json(); return { documents: body.documents, checkpoint: body.checkpoint }; } }, push: { async handler(changeRows) { const res await fetch(https://api.example.com/todos/push, { method: POST, headers: { content-type: application/json }, body: JSON.stringify(changeRows) }); return await res.json(); } } }); // 普通写入无需 mutator await db.todos.insert({ id: t1, text: Try RxDB, done: false, updatedAt: Date.now() });同一 collection 可通过更换复制插件接入 GraphQL 端点、CouchDB 服务器或自定义 WebSocket 流collection API 保持不变。5.1 参数与底层机制解读replicationIdentifier在 src/plugins/replication/index.ts 中它是必填标识用于生成 meta 存储实例名与修订版本标记deletedField默认_deleted。live: true实时复制retryTime默认 5000ms失败后按此间隔重试autoStart默认 true。pull.batchSize与push.batchSize默认 100在 src/plugins/replication/index.ts 中传入底层复制协议。checkpoint 持久化协议把每个方向upstream/downstream的 checkpoint 写入 meta 实例仅当内容变化时才写入见 src/replication-protocol/checkpoint.ts。核心协议在 src/replication-protocol/index.tsreplicateRxStorageInstance分别启动startReplicationDownstreampull 方向与startReplicationUpstreampush 方向。生命周期 APIawaitInitialReplication()、awaitInSync()、reSync()、pause()、cancel()、remove()以及received$、sent$、error$、conflict$等可观察事件均定义于 src/plugins/replication/index.ts。六、代码示例在 React 中订阅查询Replicache 通过useSubscribe暴露扫描 API。RxDB 暴露完整查询语言并返回 ObservableReact 可直接消费。import { useEffect, useState } from react; import { RxDocument } from rxdb; type Todo { id: string; text: string; done: boolean; updatedAt: number; }; export function OpenTodos({ db }) { const [todos, setTodos] useStateRxDocumentTodo[]([]); useEffect(() { const sub db.todos .find({ selector: { done: false }, sort: [{ updatedAt: desc }] }) .$.subscribe(results setTodos(results)); return () sub.unsubscribe(); }, [db]); return ( ul {todos.map(t ( li key{t.id} onClick{() t.patch({ done: true })} {t.text} /li ))} /ul ); }查询是声明式的patch是文档上的普通写入。乐观 UI 行为来自本地存储详细说明见 乐观 UI 指南。6.1 React 绑定与源码佐证仓库还提供了封装好的官方 React 插件src/plugins/react与手写订阅等价import { useLiveRxQuery } from rxdb/plugins/react; const { results, loading, error } useLiveRxQuery({ collection: db.todos, query: { selector: { done: false }, sort: [{ updatedAt: desc }] } });useLiveRxQuery与useRxQuery都基于useRxQueryBase内部用collection.find(query)构造 RxQuerylive: true时订阅rxQuery.$否则调用rxQuery.exec()一次并把结果、loading、error 三个状态暴露给组件见 src/plugins/react/hooks/use-rx-query.ts 与 src/plugins/react/hooks/use-live-rx-query.ts。七、Mutators vs Documents两种心智模型两者的根本差异是心智模型。Replicache 把每次变更视为一次命名操作addTodo({ id, text })这样的 mutator 是唯一变更状态的方式。客户端对本地缓存运行 mutator 获得即时结果服务端运行同一 mutator 产出权威状态协议协调两者。应用逻辑存在于 mutator 内部读取则是对 key/value 存储的扫描。RxDB 把每次变更视为对 collection 中文档的一次写入调用collection.insert、doc.patch或collection.bulkUpsert。本地存储记录变更同步引擎 通过通用 push handler 把变更发往服务端服务端存入任意现有数据库。读取是带响应式结果的 MongoDB 风格查询。实际后果后端复用RxDB 接入现有 REST/GraphQL/SQL 后端无需把端点改名以匹配 mutator 语义Schema 驱动存储RxDB 用 JSON schema 校验文档Replicache 存储以字符串为 key 的任意 JSON 值查询表达能力RxDB 支持操作符、排序与索引Replicache 需要手动扫描和过滤冲突处理RxDB 可为每个 collection 编写 自定义冲突处理器Replicache 通过 mutator 重放合并。两种模型并无绝对优劣。mutator 适合紧密耦合的协作编辑文档模型适合通用应用数据、离线优先应用和现有后端。7.1 冲突处理的源码实现仓库的默认冲突处理器src/replication-protocol/default-conflict-handler.ts用deepEqual判断两文档是否相等相等即无冲突解析冲突时总是丢弃 fork 状态、采用 master 状态。自定义处理器只需实现isEqual(a, b, ctx)与resolve(conflict)两个方法例如只比较updatedAt时间戳以提升性能。冲突在 push 阶段由 master 侧检测并返回见 src/replication-protocol/index.ts。八、FAQRxDB 是开源的吗是。RxDB 核心以 Apache 2.0 许可证分发源码公开。数据库、查询引擎与复制协议全部开源无收入门槛仅高级存储与企业功能为可选付费插件。RxDB 需要写 mutator 吗不需要。RxDB 使用insert、patch、bulkUpsert、remove等常规 collection 方法复制协议通过 pull/push handler 把变更转发给后端。如需集中写逻辑可用辅助函数封装但数据库本身不强制。RxDB 能扩展到大量客户端吗可以。复制协议基于 checkpoint每个客户端只拉取上次同步之后的变更。服务端可以是任何暴露 pull/push 端点的系统横向扩展等价于扩展现有 API。RxDB 还提供 WebRTC 复制 支持 P2P 场景。Zero / Zerosync 呢Zero 是 Rocicorp 接替 Replicache 与 Reflect 的产品有独立协议与权衡。RxDB 不是 Zero 的 drop-in 移植但覆盖同样的 local-first 用例响应式查询 同步。RxDB 已稳定多年、Apache 2.0 发布且能与任意现有后端协作。RxDB 支持 NextJS、Remix 与 React Native 吗支持。RxDB 运行在任何 JavaScript 环境。NextJS/Remix 中在浏览器侧实例化数据库并用 React 绑定订阅查询React Native 中选择 SQLite 等原生存储。同一套 collection 定义与查询在所有环境通用。九、对比一览FeatureReplicacheRxDB许可证源码可用2024 年起免费Apache 2.0开源数据模型Key/value 存储带 JSON schema 的文档 collection写入客户端服务端 mutator 函数直接insert/patch/remove查询 API扫描之上的useSubscribeMongoDB 风格 RxQuery响应式结果是是通过 RxJS Observables服务端要求实现 mutator 与 patch API实现 pull/push handler存储选项IndexedDBIndexedDB、OPFS、SQLite、内存等冲突解决mutator 重放每 collection 自定义 handlerP2P 同步否是WebRTC传输Replicache 协议HTTP、GraphQL、CouchDB、Firestore、WebRTC运行时浏览器、React Native浏览器、Node.js、Electron、React Native十、结论与后续资源如果 Replicache 的 mutator 架构或历史许可证条款阻塞了项目RxDB 是一个直接替代方案保留 local-first 开发体验补上真正的文档数据库与响应式查询并与现有后端任意同步。延伸阅读RxDB 同步引擎HTTP 复制GraphQL 复制RxQuery响应式冲突解决Local-First 的未来实时数据库 /output文章【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址: https://gitcode.com/gh_mirrors/rx/rxdb创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表
PREV
查看更多资讯
NEXT
返回资讯列表