跳到主要内容

RxDB 如何组织浏览器内数据链路

存储、响应式查询、实体模型与 UI 绑定分别承担明确职责,远端同步作为可选协作层接入。

layers01

四个层次,按执行职责划分

LAYER 01

存储层

SQLite 负责落盘、索引、事务与查询执行。

LAYER 02

响应式层

RxJS 把查询结果、实体变更和副作用汇成同一条数据流。

LAYER 03

模型层

实体元数据统一定义字段、关系、查询构造与生成代码的边界。

LAYER 04

协作层

分支、同步与撤销重做建立在本地数据版本之上,按需启用。

execution plane02

浏览器就是主执行面

UI、业务规则、查询与持久化在浏览器内执行;远端负责交换变更,不接管每一次本地读写。

Browser runtime

读写查询先在本地完成

界面、领域逻辑、查询与事务在浏览器内运行。离线时继续读写,联网后再按需同步。

Local-first
UI 与交互层

页面、表单与详情视图直接消费本地查询结果,常用读写无需等待网络往返。

本地业务与模型层

实体规则、关系约束、查询构造与副作用在浏览器里闭环执行。

本地数据库层

SQLite + OPFS 负责事务、索引、查询执行与持久化。

交互优先本地执行
体验不被网络往返拖慢。
版本按分支流转
撤销、重做、分支与历史围绕数据版本组织。
同步按需触发
联网后再 pull / push,本地读写不依赖服务端往返。
sync lane
Push

把本地提交、分支状态和需要共享的数据推到远端。

Pull

拉取远端变更,并合并到本地数据流。

VERSION-LEVEL SYNC
remote role

远端同步仓库

远端充当共享存储或同步中继点,负责交换版本与变更,不替浏览器执行业务主流程。

保存可共享的版本历史与同步状态
为多设备或多成员提供交换点
通过 pull / push 交换变更,不接管本地业务执行
tech stack03

核心技术选型

每一层都服务于同一个目标——让数据应用真正跑在浏览器里

本地存储执行层

SQLite

提供事务、索引与 SQL 查询,适合多数浏览器端结构化数据场景。

高级查询执行层

PGlite

在浏览器内提供 PostgreSQL 兼容能力,适合复杂查询与扩展需求。

模型与类型约束

TypeScript

约束模型定义、生成代码与消费端 API,在编译期暴露类型错误。

核心响应式主线

RxJS

用 Observable 连接查询结果、变更事件与副作用,构成统一的响应式数据流。

可选持久化增强

OPFS

浏览器支持时使用 OPFS 持久化文件,不支持时选择其他 VFS。

代码生成引擎

ts-morph

基于 TypeScript AST,将实体元数据转换为类型、查询构建器与框架适配代码。

capabilities04

已落地的能力

以下能力都可以在文档、demo 和源码里直接验证

模型驱动开发

用元数据描述实体,并从模型推导查询、表单与类型约束。

已实现
实体元数据
关系建模
类型安全 CRUD
响应式查询自动更新

跨框架统一 API

三个框架共享模型与查询语义,各自保留符合框架习惯的 UI 绑定 API。

已实现
Angular Signals
React Hooks
Vue Composables
RxJS Observable 通用支持

代码生成链路

从模型定义生成类型与辅助代码,减少重复实现。

已实现
完整类型推断
查询构建器
实体辅助代码
框架封装输出

性能基础设施

通过浏览器内数据库、Worker 与查询缓存划分计算和持久化职责。

已实现
Worker 支持
OPFS 优先持久化
查询缓存
WASM 数据库执行

版本与同步基础

当前已验证版本分支、撤销重做、条件同步与跨 Tab 同步。

MVP 已验证
Branch 管理
撤销重做
跨 Tab 同步
多种同步策略
code path05

关键代码路径

从模型定义到界面订阅,每一步都有明确输入与输出

1. 定义模型边界
typescript
const TodoEntity: EntityMetadataOptions = {
name: 'Todo',
displayName: 'Todo',
repository: 'Repository',
extends: ['EntityBase'],
properties: [
{ name: 'title', type: PropertyType.string },
{ name: 'completed', type: PropertyType.boolean, default: false },
{ name: 'createdAt', type: PropertyType.date }
]
};
2. 生成稳定接口
bash
nx run rxdb-client-generator:generate

# 输出内容包括:
# - 实体类型定义
# - CRUD 与查询辅助代码
# - 框架集成封装
# - 关系映射与表单支持
3. 把查询接入界面
typescript
Todo.find({
where: {
combinator: 'and',
rules: [{ field: 'completed', operator: '=', value: false }]
}
}).subscribe(todos => {
console.log('未完成任务:', todos);
});
4. 复用同一套查询语义
3 frameworks
HOOKSReact
const { value: todos } =
useFind(Todo, { where: {...} });
COMPOSABLESVue
const { value: todos } =
useFind(Todo, { where: {...} });
SIGNALSAngular
const { value: todos } =
useFind(Todo, { where: {...} });
三个框架共享模型与查询语义,差异集中在各自的 UI 绑定 API。

从模型定义开始验证数据链路

先通过在线演示观察查询、关系与写入如何落地,再结合文档评估存储、框架绑定与同步边界。

查看在线演示