跨平台技术实战！百度文库跨平台技术快速落地全过程

2022-01-11 622

导读：本文简述了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融合。具体实现可以查看框架源码，本文不进行展开说明。

Node_bindings.cc源码

源码地址：
https://github.com/electron/electron/blob/master/shell/common/node_bindings.cc

===

三、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全平台版本客户端成为可能，也在持续的探索中。

推荐阅读：

当技术重构遇上DDD，如何实现业务、技术双赢？

接口文档自动更改？百度程序员开发效率MAX的秘诀

技术揭秘！百度搜索中台低代码的探索与实践

百度智能云实战——静态文件CDN加速

化繁为简--百度智能小程序主数据架构实战总结

百度搜索中台海量数据管理的云原生和智能化实践

百度搜索中“鱼龙混杂”的加盟信息，如何靠AI 解决？

---------- END ----------

百度 Geek 说

百度官方技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢迎各位同学关注

微信关注我们

原文链接：https://my.oschina.net/u/4939618/blog/5395478

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Golang 常见设计模式之选项模式

熟悉 Python 开发的同学都知道，Python 有默认参数的存在，使得我们在实例化一个对象的时候，可以根据需要来选择性的覆盖某些默认参数，以此来决定如何实例化对象。当一个对象有多个默认参数时，这个特性非常好用，能够优雅地简化代码。而 Go 语言从语法上是不支持默认参数的，所以为了实现既能通过默认参数创建对象，又能通过传递自定义参数创建对象，我们就需要通过一些编程技巧来实现。对于这些程序开发中的常见问题，软件行业的先行者们总结了许多解决常见场景编码问题的最佳实践，这些最佳实践后来成为了我们所说的设计模式。其中选项模式在 Go 语言开发中会经常用到。通常我们有以下三种方法来实现通过默认参数创建对象，以及通过传递自定义参数创建对象：使用多个构造函数默认参数选项选项模式通过多构造函数实现第一种方式是通过多构造函数实现，下面是一个简单例子： package main import "fmt" const ( defaultAddr = "127.0.0.1" defaultPort = 8000 ) type Server struct { Addr string Port i...

2022-01-11

516

摘要：本文将从最简单的内存管理原理说起，带大家一起窥探OS的内存管理机制，由此熟悉底层的内存管理机制，写出高效的应用程序。本文分享自华为云社区《探索OS的内存管理原理》，作者：元闰子。前言内存作为计算机系统的组成部分，跟开发人员的日常开发活动有着密切的联系，我们平时遇到的Segment Fault、OutOfMemory、Memory Leak、GC等都与它有关。本文所说的内存，指的是计算机系统中的主存（Main Memory），它位于存储金字塔中CPU缓存和磁盘之间，是程序运行不可或缺的一部分。在计算机系统中，主存通常都是由操作系统（OS）来管理，而内存管理的细则对开发者来说是无感的。对于一个普通的开发者，他只需懂得如何调用编程语言的接口来进行内存申请和释放，即可写出一个可用的应用程序。如果你使用的是带有垃圾回收机制的语言，如Java和Go，甚至都不用主动释放内存。但如果你想写出高效应用程序，熟悉OS的内存管理原理就变得很有必要了。下面，我们将从最简单的内存管理原理说起，带大家一起窥探OS的内存管理机制，由此熟悉底层的内存管理机制，写出高效的应用程序。独占式内存管理早...

2022-01-11

520

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。