跨平台技术实战！百度文库跨平台技术快速落地全过程
导读：本文简述了 PC 客户端业务在文库中快速落地的过程，其中包括了前期的技术选型，方案设计，PC 客户端跨平台原理，以及 Electron 框架的应用细节。从应用深入到原理，讲解 PC 客户端跨平台技术，如何实现跨平台渲染，如何实现原生 API 的调用，和如何进行不同目标平台的应用构建。通过阅读本文，可以快速上手基于 Electron 框架进行 PC 客户端业务的开发。
全文 2545 字，预计阅读时间 7 分钟
前言
跨平台技术在移动客户端平台（Android & iOS）上已经发展了多年，从 Hybrid App 到小程序，再到 React Native 和 Flutter 已经得到比较广泛的应用。无论是前端方案，桥接方案，还是自渲染方案，都需要解决三个问题：
如何进行 UI 渲染？
如何实现原生 API 的调用？
如何进行客户端构建？
不同的移动客户端跨平台方案都有自己的解决方式，但是在 PC 客户端平台上，大部分传统应用软件还是以单平台开发为主。近期文库业务开始启动 PC 客户端的项目，同时支持 Windows 平台和 MacOS 平台，从技术的角度希望通过 PC 客户端的跨平台技术，以更低的成本，更高效的迭代来适应互联网产品的节奏，同时保证不同平台下的一致性体验。本文通过 PC 客户端跨平台框架的分析及跨平台业务应用进行展开。
一、技术选型
文库的 PC 客户端主要涉及到桌面 OS 的 Windows 和 MacOS，当前这两种平台的应用软件开发包括了单平台开发、中间平台开发、跨平台开发几种模式，其中根据目前文库业务研发人员结构和熟悉程度，Flutter 和 Electron 是重点去考察的 PC 客户端跨平台框架。因为文库在文档页面渲染上的技术积累，可以快速复用到业务场景中，所以最终选择了 Electron 跨平台技术方案。
二、Electron 框架介绍
接下来，介绍一下 Electron 框架到底是什么？如何实现跨平台的？其实要回到开篇提到的跨平台需要解决的通用问题，UI 渲染、原生 API、客户端构建。Electron 是通过集成浏览器内核，通过前端的技术来实现不同平台下的渲染，Electron 框架主要解决以下问题：
渲染与服务的融合，即 UI 和底层服务的融合；
不同平台下系统 API 的调用及封装；
不同平台下应用构建；
理解 Electron 框架原理，其难点在于 Chromium 和 Node.js 是如何互通的，因为我们知道他们都有自己独立的事件循环，不解决这个问题就无法实现渲染和服务的融合，所以需要先了解 Electron 的多进程架构。
2.1 Electron 多进程架构
Electron 多进程架构参考了 Chromium 的多进程架构，即将渲染进程与主进程隔离，之所以如此设计是因为与 OS 从单用户到多任务的发展过程类似，为避免一个出错的页面或插件 bug 引起整个浏览器和全部标签关闭。每个浏览器标签使用独立的进程，保护整个应用免受渲染进程中 Bug 和故障影响。在实际业务中，UI 都是在渲染进程进行的，当需要使用系统服务时如 I/O、DB、Push 等等，通过 IPC 方式在主进程中实现，Electron 框架本身已提供了 IPC 能力，包括 ipcMain 和 ipcRenderer，具体使用可以查询 Electron 官方文档，有比较详细的说明和应用示例。
2.2 Chromium 与 Node.js 融合
把 Chromium 和 Node.js 两套独立的体系进行通信是 Electron 重点解决的问题之一，根据官方发布的相关介绍，首先尝试了用 libuv 来替换 Chromium 的 message loop，每个平台都有自己的 GUI 消息循环，实现过程相对复杂，最终因为资源消耗和延迟的问题无法得到有效解决，所以放弃了。目前 Electron 框架通过在一个单独的线程中轮询 Node 的事件循环的方式来实现 Chromium 与 Node.js 融合。具体实现可以查看框架源码，本文不进行展开说明。
===
三、Electron 业务实践
3.1 多进程方案
文库同样采用类似 Chromium 的多进程方案，其中主进程负责原生服务的调用和业务服务的提供，以及 Window 的管理，可以将每个 Window 理解为一个渲染进程。渲染进程包括主 Window（如图中绿色 1 区域所示）和内容 Window（如图中红色 2 区域所示），内容 Window 复用是因为在实际使用过程中创建和释放 Window 会有明显的加载耗时，并且更多的 Window 会加重内存占用。所以无论是切换导航栏或者标签都通过内容 Window 进行加载，并且记录页面状态，实现页面的状态恢复，以及离屏渲染。
3.2 基于线上业务快速迭代
PC 客户端部分页面与线上页面是一致的，所以这部分没必要进行重复开发，尽量通过去复用线上业务，主要的工作就是对线上页面进行 PC 客户端适配，页面布局、视图屏蔽、自适应等等。目前使用注入的方式去实现，另外线上业务也是经常变化的，所以注入的代码尽量也是通过云端控制。具体方式是通过 Window、BrowserWindow、WebView 中的 webContent 进行注入，这里需要检测页面生命周期，需要在页面加载完成后进行注入。
3.3 Debug & Release
Electron 框架会将代码进行编译，再进行打包，开发中每次都需要一定的时间运行客户端程序，很影响效率。所以可以 Debug 模式下通过 Node 服务进行运行，Release 模式下才进行编译打包，来实现开发中的所见即所得。
===
四、总结和展望
除了 Electron 框架在 PC 客户端上的应用，文库业务也在移动客户端上引入 Flutter 框架，并使用新的框架重构文档相关的能力。随着 Flutter 2.0 的发布，对 PC 客户端更友好的支持，以及文库业务基于 Flutter 的文档能力建设完善，通过 Flutter 构建 Windows，MacOS，Android，iOS 全平台版本客户端成为可能，也在持续的探索中。
推荐阅读：
---------- END ----------
百度 Geek 说
百度官方技术公众号上线啦！
技术干货 · 行业资讯 · 线上沙龙 · 行业大会
招聘信息 · 内推信息 · 技术书籍 · 百度周边
欢迎各位同学关注
百度官方技术账号 2021.01.22 加入
关注我们，带你了解更多百度技术干货。
评论