我是如何开发一款可以在桌面和移动平台上运行并同步的应用程序的

你并非独自成长。

CouchDB 和 PouchDB 可实现无缝数据同步，并支持离线模式。

跨平台框架

UI组件不具备跨平台特性。

修改 PouchDB 使其能够在 React Native 上运行

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

构建可在 5 个平台上运行和同步的 SaaS 的技术技巧

大家好，我是Takuy ​​a。我是Inkdrop的唯一开发者，Inkdrop是一款跨平台的Markdown笔记应用，支持macOS、Linux、Windows、Android和iOS。众所周知，要让应用仅靠自身力量支持这五大平台并非易事，但借助强大的框架并非不可能。然而，除了依赖框架之外，还需要一些开发策略来确保项目的可持续发展。在本文中，我想分享一下我目前为止在这个项目上的经验。

使用 React Native 构建的移动版 Inkdrop

你并非独自成长。

开发跨平台应用通常会遇到许多无法重现且难以预测的问题。某些功能在你的环境中运行良好，但在其他环境中却可能无法正常工作。例如，我最近就遇到了这样一个 bug：应用启动时屏幕一片空白。虽然我之前已经用一些 beta 版本仔细测试过，但仍然没有发现这个 bug。幸亏他们的快速响应和报告，我才得以在 24 小时内解决这个问题。

独立开发者并非真的在独自开发应用，因为你随时可以向用户寻求帮助。坦诚地解释你正在开发的内容以及遇到的难题。喜欢你应用的用户也真心希望你的应用成功，并且乐于助你一臂之力。依靠用户的支持至关重要，因为你的资源非常有限。如果没有所有用户的支持，Inkdrop 不可能发展到如今的成熟阶段。由于 Inkdrop 是面向程序员的，一些用户甚至在论坛上为我提供了代码示例来解决类似问题。此外，一些用户还花了几个小时与我一起排查并修复了一个我无法重现的 bug。与用户之间这种密切的互动交流将成为你的一大优势，让你在众多大公司中脱颖而出。

CouchDB 和 PouchDB 可实现无缝数据同步，并支持离线模式。

Apache CouchDB是一个面向文档的数据库（NoSQL） ，它拥有基于 HTTP 的 JSON API，并支持多主同步。它有一个名为Fauxton 的Web 图形用户界面，方便用户轻松管理数据库和文档。PouchDB是一个受 CouchDB 启发而开发的 JavaScript 数据库，可以与 CouchDB 同步。我首先构建了桌面版本，并没有考虑移动平台，因为我假设 PouchDB 在移动端也能正常工作，毕竟它是用 JavaScript 编写的，而且似乎已经有一些移动端的选项。如果 PouchDB 在移动端无法正常工作，我可以自己构建客户端数据库模块，因为 CouchDB 是 RESTful 架构的。

我之所以选择 CouchDB 而不是其他支持跨设备数据同步的 PaaS（平台即服务），例如Firebase，是因为我需要灵活的客户端索引支持。三年前我启动这个项目时，Firestore还不够灵活，无法实现这一点。CouchDB 看起来很有前景，因为它支持客户端MapReduce来构建索引，并且拥有全文搜索模块。此外，还有一个名为Cloudant的 CouchDB 数据库即服务 (DBaaS) ，它可以独立地弹性扩展吞吐量和存储容量。由于我不想运维服务器，所以早期我选择了 Cloudant。目前，我将 CouchDB 运行在 AWS EC2 上，因为我发现服务器负载基本稳定，不像我预期的那样像 B2C 服务那样高，而且 Cloudant 在 IBM Cloud 上运行非常缓慢，管理起来也很不方便。

总的来说，我对 CouchDB 和 PouchDB 目前的表现都很满意。

跨平台框架

为了让它能在五个平台上运行，我使用Electron开发桌面操作系统版本（Windows/Linux/macOS），使用React Native开发移动操作系统版本（iOS/Android）。这两个版本都使用了相同的框架：ReactJS 和 Redux。得益于这些框架，我基本上可以用 JavaScript 构建这两个版本，这使得应用程序可以在桌面端和移动端之间共享大量代码。

从成功的产品中学习

这是我第一次基于 Electron 和 ReactJS 构建桌面应用程序。为了验证我的应用理念，我急于尽快发布。因此，我决定学习当前构建美观的用户界面和可扩展架构的最佳实践，并借鉴Atom 编辑器和Kitematic等现有开源项目。我发现它们的代码库可以复用，用于构建我的应用程序，因为它们的项目许可证并非 GPL。感谢 GitHub 和 Docker。

我最初是从Kitematic 的代码库fork 开始的。它给了我很多好的实践经验，让我提前避免了很多问题，但也有一个缺点——它也给我带来了一些技术债务，就像许多其他项目一样。例如，它依赖于AltJS，而 AltJS 是 Fl​​ux 架构的实现之一。不幸的是，在我开始开发 Inkdrop 之后，这个项目很快就停止了活动。这导致我一度无法将 React 更新到 16 版本。最近我最终用 Redux 替换了 AltJS。然而，像 Kitematic 那样进行项目迭代基本上是不可能预料到的。你可以从这些项目中学习到很多东西。所以，如果我再次面临同样的情况，我还是会这样做。

我大量借鉴了 Atom 的代码来实现插件系统、自定义按键映射、主题等等。阅读他们的代码总是让我着迷。如果没有 Atom 的帮助，我根本不可能独自实现这些功能。

共享代码库

由于桌面应用和移动应用都使用 PouchDB、React 和 Redux 构建，它们可以共享大量代码库，例如数据模型、一些不依赖于原生层或平台的 Redux actions 和 reducer。这使得我能够轻松地同时维护这两个应用。

UI组件不具备跨平台特性。

我分别构建了桌面端和移动端的用户界面。由于我一开始就着手开发桌面应用，所以一开始并没有考虑如何构建移动应用。此外，我认为在移动端和桌面端之间共享用户界面组件并不是一个好策略，尤其对于 Inkdrop 而言。因为像react-native-web这样的库本质上是移动优先的，并不关注桌面端。所以，这种策略只适用于应用足够简单且主要面向移动用户的情况。

桌面应用使用Semantic UI，移动应用使用Native Base来构建美观且支持主题的组件。我在这篇文章中详细介绍了我的 React Native 开发经验：

在构建我的 React Native 移动应用过程中学到的经验教训

修改 PouchDB 使其能够在 React Native 上运行

PouchDB 在浏览器和 Electron 应用中运行良好。但对于 React Native 应用，却出现了一些问题——由于pouchdb-react-native使用 AsyncStorage 作为适配器，因此在使用时性能不佳。为此，我构建了react-native-sqlite-2和pouchdb-adapter-react-native-sqlite，以便使用 SQLite 作为适配器。另一个问题是它无法很好地处理附件。我不得不修改 PouchDB 的核心模块来支持附件：

破解 PouchDB 以在 React Native 中使用它

如何在 React Native 中实现支持附件的 PouchDB

使用 SQLite3 进行本地全文搜索

早期，我一直使用pouchdb-quick-search来实现全文搜索，但它的性能并不理想，尤其是在 Android 平台上。因此，我决定基于 pouchdb-quick-search，利用SQLite 的全文搜索功能，构建自己的全文搜索模块。

选择合适的框架通常很困难——但不要害怕尝试。事实上，并非每个人都知道哪个框架最适合你的项目，因为没有“万能”的解决方案。我曾经为了解决问题而自己编写了一些库，但我认为这些也是为开源社区做贡献的好机会。随着项目的发展，你也在不断成长。希望对你有所帮助 :)

跟我来

• 叽叽喳喳
• Instagram

本文最初发表在我的 Medium 博客上，链接在此。