跳到主要内容

把数据库放进浏览器让前端无所不能

RxDB 把 SQLite、RxJS 和模型驱动开发整合到同一条链路,让 Angular、React、Vue 在浏览器内完成查询、写入和本地持久化,再按需同步到远端。

浏览器内执行 SQLite 查询与事务
RxJS 串联查询、写入与副作用
Angular / React / Vue 共用一套模型语义
Browser SQLSQLite --
执行结果
正在初始化浏览器内 SQLite...
FRAMEWORKS
3
Angular · React · Vue
RUNTIMES
SQLite
浏览器内执行层
PERSISTENCE
OPFS
可回退 IDB / Memory
STREAMING
RxJS
查询 / 事件同一主线
the problem01

复杂前端应用缺的,不是组件,而是数据层

很多项目真正难的地方,是数据怎么落盘、怎么查询、怎么写入、怎么保持一致,而不是再给页面状态包一层抽象。

01 / Pillar

真正的本地执行

查询、事务、索引和持久化都在浏览器内完成,不再靠接口缓存模拟离线。

02 / Pillar

查询结果天然可订阅

界面直接跟随数据变化,减少 refetch、invalidate 和状态同步的重复代码。

03 / Pillar

模型就是数据边界

字段、关系、索引和类型围绕实体定义聚合,业务规则不再散落在页面和服务层。

04 / Pillar

跨框架保持同语义

Angular、React、Vue 只保留 UI 绑定差异,模型、查询和写入方式保持一致。

integration path02

先跑通本地链路,再决定是否继续扩展

推荐顺序是先建模、再接入数据库、再接入查询和 UI,最后再考虑同步与协作。这样最容易判断它是否适合当前项目。

STEP / 01

先定模型边界

先把字段、关系和索引定义清楚,后面的查询、表单和列表才有稳定基础。

STEP / 02

再选本地执行层

根据场景接入 SQLite 或 PGlite,把真实查询和持久化放进浏览器。

STEP / 03

把查询接入界面

把查询当作可订阅数据源,让界面随结果变化,而不是手写同步逻辑。

STEP / 04

最后按需引入协作

当本地链路稳定后,再引入分支、撤销重做与同步。

next step

先跑通一遍,再评估是否值得接入

最有效的判断方式,是先把本地链路跑通,再看三套框架演示和架构说明,而不是仅了解概念页。