发布于 2026-01-06 20 阅读
0

为单页应用程序选择合适的前端数据库

为单页应用程序选择合适的前端数据库

我目前正在寻找一种更好的方法来保存和检索我最喜欢的业余项目的数据。我做了一些研究,觉得或许可以分享一下我目前的发现。

要求

该应用旨在同时作为 PWA 和 Electron 桌面应用运行,并大量使用了 rxjs。目前还没有后端,即使将来添加,也可能是可选的。由于主要关注点是 Electron 应用,我幸运地不必过多考虑浏览器兼容性,尽管所有库似乎都支持所有现代浏览器。

以下是我提出的要求:

基本的

  • 超快速度:对于至少 2000 个不同的实体,以及最多 10MB 的数据存储,其运行速度应与原生桌面应用程序一样快,并且能够快速加载组合数据和数据子集。
  • 实现起来相对容易,而且开销不大。
  • 面向未来:应处于积极开发状态,并得到庞大社区的支持。
  • 即使处理大型数据集,也不应出现任何用户界面阻塞。
  • 与框架无关

奖金

  • TypeScript 支持正常(至少没有错误)
  • 可读的 IndexedDB 模型 => 数据应该可以通过 Chrome 开发者工具浏览。
  • 理想情况下,应该能够将数据集作为可观测对象获取,或者应该很容易实现这种功能。
  • 复制到后端服务器:虽然尚未实现,但如果能有这个选项就太好了。
  • 额外福利:轻松将文件存储复制到 Google Drive、OwnCloud 或 Dropbox。

竞争对手

我以这份列表为起点。请注意,我对这里使用的任何库都并非专家,所以很可能遗漏了一些重要信息。如果真是这样,请在评论区告诉我。

以下是我的选择:

WatermelonDB

描述:适用于功能强大的 React 和 React Native 应用的响应式异步数据库

优势

  • 内置同步功能
  • 多亏了 LokiJS,速度相当快。
  • 包含类似于 MongoDB 的查询语言
  • 模式验证
  • 数据库交互在工作进程中运行,因此不会阻塞用户界面。
  • 将 SQLite 写入磁盘(这对于 Electron 来说可能很有用)

缺点

  • TypeScript错误
  • 专注于 React
  • 快速连续写入似乎存在一些问题(但这可能是我使用方法不正确导致的)。
  • IndexedDB 只是以一个大字符串的形式存储。

RxDB

描述:一个用于 JavaScript 应用程序的实时数据库

优势

  • 同步(得益于 PouchDB,可能是最先进的)
  • 语法优美
  • 广泛的框架支持和示例
  • 通过 JSON Schema 进行模式验证

缺点

  • 对于大型数据集,速度非常慢。
  • 处理大型数据集时会出现渲染阻塞(不过这可能又是我的问题)。
  • 数据虽然单独存储,但由于 PouchDB 的各种限制,浏览起来并不容易。

德克西

描述:IndexedDB 的一个极简封装

优势

  • 模式验证
  • 相对较快
  • 清理 IndexedDB 的数据库使用情况
  • 与框架无关

缺点

  • 我还不清楚同步是否容易实现。
  • 没有真正的可观察接口(虽然有 Dexie Observable,但它只是用于监视变化事件,而不是获取更新的数据)。

LokiJS

描述:可嵌入 JavaScript 的内存数据库

优势

  • 快速地
  • 包含类似于 MongoDB 的查询语言
  • 与框架无关
  • 与 RxDB 和 WatermelonDB 相比,开销更小

缺点

  • 没有内置同步功能
  • 没有可观察的数据接口?

远程存储

描述:一种用于网络用户级存储的开放协议

优势

  • 模式验证
  • 掌控你的数据:同步到 Google 云端硬盘/Dropbox 等

缺点

  • 过时的依赖项
  • 过去几个月没有任何实质性进展。
  • 比其他社区小。

原生 IndexedDB

优势

  • 无额外开销
  • 相对较快
  • 与框架无关
  • TypeScript 应该可以正常工作。

缺点

  • 需要完全自定义同步
  • 无可观察接口
  • 可能需要编写大量代码。
  • 并非所有浏览器都支持所有功能

速度测试

虽然这可能已经过时了,但除了我自己的非系统性测试之外,我还使用了这个工具来比较性能

过早得出结论

目前我只尝试过 WatermelonDB、RxDB 和少量原生 IndexedDB。如果您想亲自查看,以下是 WatermelonDB 和 RxDB 的分支:

https://github.com/johannesjo/super-productivity/tree/feat/watermelonDB
https://github.com/johannesjo/super-productivity/tree/feat/rxdb

WatermelonDB 让我望而却步,因为它过于依赖 React,而且目前与 TypeScript 的兼容性不佳。它和 LokiJS 有一个共同的“问题”:存储在 IndexedDB 中的数据只是一个长字符串。这或许算不上什么大问题,但这种数据持久化方式总感觉不太对劲。我对 LokiJS 的了解仅限于简单试用了一下,因为我觉得它可能只是 WatermelonDB 的一个简化版,虽然问题少一些,但缺少我需要的功能,而我仍然希望能找到更好的选择。

RxDB 看起来很有前途,我估计它在服务器端能发挥出真正的优势。但对于一款旨在达到桌面应用般性能的应用程序来说,糟糕的性能是绝对不能接受的。

使用原生 IndexedDB 大部分情况下应该没问题。主要的缺点是需要编写大量代码,而我(目前)不想重复造轮子。

下一步是 Dexie!虽然它的社区规模可能不如竞争对手那么大,而且缺少预构建的、高效的集合作为可观察对象的方式,这有点令人失望。我对它的同步功能也有些疑虑,因为我没找到太多好的例子,感觉它更像是一种噱头,而不是人们在生产环境中使用的功能,但我希望我的判断是错的!到目前为止,它是唯一一个提供简洁的 IndexedDB 数据库供浏览,同时又提供了一些结构,确保我不是唯一一个以这种方式保存数据的人的库。

一旦我了解更多信息,我会更新文章!


我理解错了吗?很有可能!所以我很想听听大家对此事的看法和经验。请在评论区分享!

文章来源:https://dev.to/johannesjo/choosing-the-right-frontend-database-for-a-single-page-application-3i0