跳到主要内容

把数据库搬进浏览器让前端自己扛数据

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

浏览器内直接跑 SQLite 查询与事务
RxJS 贯穿查询、写入与副作用
Angular / React / Vue 共用同一套模型
Browser SQLSQLite --
执行结果
正在启动浏览器内 SQLite…
FRAMEWORKS
3
Angular · React · Vue
RUNTIME
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

按需引入协作

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

先跑一遍,再判断要不要接入

最有效的判断方式不是看概念页,而是亲手跑通本地链路,再对着三套框架演示和架构说明验证。