跳到主要内容

把数据库放进浏览器让前端先本地运行

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

浏览器内执行 SQLite / PGlite 查询与事务
RxJS 串起查询、写入与副作用
Angular / React / Vue 共用一套模型语义
Local-first
Browser SQLSQLite --
执行结果
正在初始化浏览器内 SQLite...

复杂前端先缺的通常不是组件,而是数据层

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

真正的本地执行
查询、事务、索引和持久化都在浏览器内完成,不再靠接口缓存假装离线。
查询结果天然可订阅
界面直接跟随数据变化,少写 refetch、invalidate 和状态同步胶水。
模型就是数据边界
字段、关系、索引和类型围绕实体定义收拢,业务规则不再散落在页面和服务层。
跨框架保持同语义
Angular、React、Vue 只保留 UI 绑定差异,模型、查询和写入方式保持一致。

先跑通本地链路,再决定要不要继续扩展

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

Step 1
先定模型边界
先把字段、关系和索引讲清楚,后面的查询、表单和列表才有稳定基础。
Step 2
再选本地执行层
根据场景接 SQLite 或 PGlite,把真实查询和持久化放进浏览器。
Step 3
把查询接进界面
把查询当作可订阅数据源,让界面跟着结果变化,而不是手写同步逻辑。
Step 4
最后按需加协作
当本地链路跑稳,再引入分支、撤销重做、同步和多端一致性。

三套框架,一套数据语义

先统一模型和查询,再看 Angular、React、Vue 各自的 UI 绑定方式。这样团队讨论的是业务语义,而不是三套不同封装。

Angular复杂后台与表单
Angular
Signals 驱动的业务界面,适合复杂表单、关系数据和管理后台。
React组件化数据应用
React
Hooks 风格接入,让查询与实体状态脱离组件局部状态堆积。
Vue高迭代业务界面
Vue
Composables 配合响应式实体,适合快速构建数据密集型界面。
先跑通一遍,再评估值不值得接入
最有效的判断方式,是先把本地链路跑通,再看三套框架演示和架构说明,而不是只读概念页。