当前位置：网站首页>Electron application development best practices

Electron application development best practices

2022-08-09 10:16:00 【InfoQ】

vivo 互联网前端团队-Yang Kun

一、背景

在团队中,We because of business development,Need to use the desktop technology,Such as offline available、Call desktop system ability.What is the desktop development？一句话概括就是：

以 Windows 、macOS 和 Linux For the operating system software development

.We made a detailed technical research,The desktop development mainly, Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui .Their respective advantages and disadvantages are shown in table below：

We finally desktop client technology selection is Electron ,Electron 是一个可以使用 Web Technology to develop cross-platform desktop application development framework.

The technology of the following：

Electron = Chromium + Node.js + Native API

Each technical ability as shown in the figure below：

整体架构如下图所示：

Electron 是多进程架构,架构具有以下特点：

Consists of a main process and N A rendering process of

Main process for leading role,To complete a variety of cross-platform and native interaction

Rendering process can be more,使用 Web 技术开发,Through the browser kernel rendering the page

The main process and the rendering process done through interprocess communication functions

这里说下 Electron Interprocess communication technology principle：

electron 使用 IPC （interprocess communication） In the process to communicate between,如下图所示：

其提供了 IPC 通信模块,主进程的 ipcMain 和渲染进程的 ipcRenderer.

从 electron 源码中可以看出, ipcMain 和 ipcRenderer 都是 EventEmitter 对象,源码如下图所示：

See source code to achieve,是不是觉得 IPC 不难理解了.知其本质,方可游刃有余.

看到这,We review the above technology form,看到 Electron Application package is big,What is the root cause of the large size？

其实这和 chromium Design the framework of the,Its many functions to macro control,Cause it's hard to get rid of the details of the complex function to,Also creates based on chromium 的开发框架,如 electron 、 nwjs Start of package is 100 多 M .

综上,electron Has the cross end、基于 Web 、Super strong ecological advantages,Is one of the excellent solution desktop client development.下文将介绍 electron 应用开发实践经验,Including application technology selection and common function.

二、应用技术选型

2.1 编程语言 Typescript

理由如下：

针对开发者

Javascript 的超集 - Seamless support for all es2020+ 所有的特性,学习成本小
编译生成的 JavaScript Keep a good readability of code to
Maintainability significantly enhance
完整的 OOP 的支持 - extends, interface, private, protect, public等
类型即文档
类型的约束,Less unit test coverage
更安全的代码

针对工具

Better refactoring capability
Static analysis automatically guide package
代码错误检查
代码跳转
Code hinting is lacking

社区

A large number of community type definition file 提升开发效率

2.2 构建工具 Electron-Forge

理由：简单而又强大,目前 electron One of the best build tools in application.

这里提一下 electron-builder 其和 electron-forge 的介绍和区别,看下图所示：

Both the biggest difference lies in the degree of freedom,Two basic no differences in ability,Look from the sort of official organization,To recommend electron-forge .

2.3 Web 方案 Vue3 + Vite

我们采用的是 Vue3 ,同时使用 Vite 作为构建工具,具体优点,You can view the website,This combination is the mainstream of Web 开发方案.

2.4 monorepo方案 pnpm + turbo

目前的 monorepo 生态百花齐放,正确的实践方法应该是集大成法,也就是取各家之长,目前的趋势也是如此,各开源 monorepo 工具达成默契,专注自己擅长的能力.

如 pnpm 擅长依赖管理, turbo 擅长构建任务编排.遂在 monorepo 技术选型上,我选择了 pnpm 和 turbo .

pnpm 理由如下：

目前最好的包管理工具, pnpm 吸收了 npm 、 yarn 、 lerna 等主流工具的精华,并去其糟粕.
生态、社区活跃且强大
结合 workspace 可以完成 monorepo 最佳设计和实践
在管理多项目的包依赖、代码风格、代码质量、组件库复用等场景下,表现出色
在框架、库的开发、调试、维护方面,表现出色

相比于 vue 官网,在使用 pnpm 上,我加了 workspace .

turbo 理由如下：

它是一个高性能构建系统,拥有增量构建、云缓存、并行执行、运行时零开销、任务管道、精简子集等特性
具有非常优秀的任务编排能力,可以弥补 pnpm 在任务编排上的短板

2.5 数据库 lowdb

electron Application database has very many options such as lowdb 、 sqlite3 、 electron-store 、 pouchdb 、 dedb 、 rxdb 、 dexie 、 ImmortalDB 等.The database has a characteristic,That is no server.

electron Application of database technology selection factor mainly has the following3点：

生态（使用者数量、维护频率、Version stability）
能力
性能
其他（And consumer technology compatibility）

We through the following channels has carried on the related research

github 的 issues、commit、fork、star
sourcegraph Keyword search results for
npm 包下载量、版本发布
Website and blog

Give four optimal selection,分别是 lowdb 、 sqlite3 、 nedb 、 electron-store , 理由如下：

lowdb：
 生态、能力、Do a good job of three performance, json In the form of storage structure, 支持 lodash 、 ramda 等 api 操作,To backup and call
sqlite3：
 生态、能力、Do a good job of three performance, Nodejs A relational database for the first option
nedb：
 能力、Do a good job of three performance,The disadvantage is that the basic do not maintain,但底子还在,Especially the operation is MongoDB 的子集,对于熟悉 MongoDB The user is the perfect choice for.
electron-store：
 The ecological performance good,Lightweight persistence,简单易用

We use the database selection is lowdb 方案.

PS：提一下 pouchdb ,If you need to local data synchronization to the remote database,可以使用 pouchdb ,其和 couchdb Can easily accomplish synchronous.

2.6 脚本工具 zx

软件开发过程中,Some processes and operating through the script to finish,Can effectively improve the development efficiency and happiness.

依赖 node runtime Good choice of two：shelljs 和 zx , 选择 zx 的理由如下：

自带 fetch 、 chalk 等常用库,使用方便快捷
More child process convenient and quick、执行远端脚本、解析 md 、 xml 文件脚本、支持 ts ,功能丰富且强大
谷歌出品,大厂背景,生态非常活跃

至此,技术选型就介绍完了,下面我将介绍electron The application of commonly used functions.

三、构建

This part mainly introduces the following5点内容：

Application icon to generate
The binary file building
按需构建
性能优化
跨平台兼容

3.1 Application icon to generate

The generation of different size icon has the following method：

Windows

软件生成：
 icofx3

网页生成： 
https://tool.520101.com/diannao/ico/(opens new window)

MacOS

软件生成：
 icofx3

网页生成： 
https://tool.520101.com/diannao/ico/(opens new window)

命令行生成：
 使用 sips 和 iconutil 生成

3.2 The binary file building

This chapter is based on electron-forge 阐述的,不过原理是一样的.

In the development of desktop application,There will be a scene to use third-party binary program,比如 ffmpeg 这种.When constructing binary,To pay attention to the following two note item：

（1）Binary can't packed into asar 中 Can build configuration file（forge.config.js）进行如下设置：

const os = require('os')
const platform = os.platform()
const config = {
 packagerConfig: {
 // 可以将 ffmpeg 目录打包到 asar 目录外面
 extraResource: [`./src/main/ffmpeg/`]
 }
}

（2）开发和生产环境,The binary path method is not the same The following code may be used for dynamic gain：

import { app } from 'electron'
import os from 'os'
import path from 'path'
const platform = os.platform()
const dir = app.getAppPath()
let basePath = ''
if(app.isPackaged) basePath = path.join(process.resourcesPath)
else basePath = path.join(dir, 'ffmpeg')
const isWin = platform === 'win32'
// ffmpeg 二进制程序路径
const ffmpegPath = path.join(basePath, `${platform}`, `ffmpeg${isWin ? '.exe' : ''}`)

3.3 按需构建

How to on-demand build the cross-platform binary file？

Such as desktop applications used in ffmpeg , 它需要有 windows 、 mac 和 linux Download the binary.在打包的时候,If you don't do on-demand build,则会将 3 In the process of building a binary file to all,This makes application volume increased a lot.

可以在 forge.config.js 配置文件中进行如下配置,Can complete on-demand build,代码如下：

const platform = os.platform()
const config = {
 packagerConfig: {
 extraResource: [`./src/main/ffmpeg/${platform}`]
 },
}

通过 platform Variable to the binary to build corresponding system,For binary file can be completed through on-demand build.

3.4 性能优化

Mainly construction speed and construction volume optimization,Build speed this bad optimization.This paper says building volume optimization,这里拿 mac 系统举例说明, 在 electron 应用打包后,Check the application package content,如下图所示：

可以看到有一个 app.asar 文件,这个文件用 asar After decompression can see the following content：

可以看出 asar 中的文件,Is the project code after we build,从图中可以看到有 node_modules 目录, 这是因为在 electron Build mechanism of,会自动把 dependencies The dependence of all hit asar 中.

所以结合上述分析,Our optimization measures have the following4点：

将 web The building needed to rely on all in devDependencies 中,只将在 electron The need to rely on in dependencies

Has nothing to do with the production code and file from the build of

The cross-platform use binary file,如 ffmpeg For on-demand build（On-demand construction has been introduced above）

对 node_modules To clean streamline

Here to ask the first 4 点,如何对 node_modules To clean streamline？

如果是 yarn 安装的依赖,We can use the following command in the root directory of cuts：

yarn autoclean -I
yarn autoclean -F

如果是 pnpm 安装的依赖,第 4 Point should not work.我在项目中使用 yarn 安装依赖,After then execute the above command,Found packing volume reduced 6M , 虽然不多,但也还可以.

至此,Structure function is introduced.

四、更新

This chapter is mainly divided into the following two aspects:：

全量更新

增量更新

The following will, in turn, introduces these two updates

4.1 全量更新

By downloading the latest package or zip 文件,进行软件更新,Need to replace all of the files.

整体设计流程图如下：

According to the flow chart to realize,我们需要做以下事情：

开发服务端接口,To return to use the latest version information
渲染进程使用 axios 等工具请求接口,获取最新版本信息
Encapsulation update logic,To the interface returns the version information comprehensive comparison,判断是否更新
通过 ipc Communication will be updated information to the master
主进程通过 electron-updater 进行全量更新
Will update the information by ipc Push to the rendering process
Rendering process to show the user update information,若更新成功,The pop-up Windows tell users to restart the application,完成软件更新

4.2 增量更新

By pulling the latest rendering layer packaging file,Before rendering layer code,完成软件更新,This plan only replace rendering layer code,Don't need to replace all files.

According to the flow chart to realize,我们需要做以下事情

Rendering process regularly inform main process updates
Main process testing updates
需要更新,The pull line latest package
Delete the old version package,Copying online latest package,Complete the incremental updating
通知渲染进程,Prompting the user to restart the application to complete the update

Full quantity update, and incremental updating each have an advantage,多数情况下,Update using incremental updates to improve the user experience,At the same time use full quantity update as out update package.

至此,Update function is introduced.

五、性能优化

分为以下3个方面：

构建优化

Startup optimization

运行时优化

Build optimization in the above content,已经详细介绍过了,这里不再介绍,下面将介绍 Startup optimization 和运行时优化.

5.1 Startup optimization

使用 v8-compile-cache 缓存编译代码
Priority loading core function,Non-core functions of dynamic loading
使用多进程,多线程技术
采用 asar 打包：Will speed up the start
Increase visual transition：loading + 骨架屏

5.1.1 使用 v8-compile-cache 缓存编译代码

使用 V8 缓存数据,为什么要这么做呢？

因为 electorn 使用 V8 引擎运行 js , V8 运行 js 时,需要先进行解析和编译,再执行代码.其中,解析和编译过程消耗时间多,经常导致性能瓶颈.而 V8 缓存功能,可以将编译后的字节码缓存起来,省去下一次解析、编译的时间.

主要使用 v8-compile-cache To cache the compiled code,做法很简单：In need to cache line

require('v8-compile-cache')

Other usage, please check the link document 

https://www.npmjs.com/package/v8-compile-cache(opens new window)

5.1.2 Priority loading core function,Non-core functions of dynamic loading

伪代码如下：

export function share() {
 const kun = require('kun')
 kun()
}

5.2 运行时优化

The rendering process 进行 Web 性能优化

The main process of lightweight thin body

5.2.1 The rendering process 进行 Web 性能优化

Use a mind map to fully elaborate how to do Web 性能优化,如下图所示：

Above basic contains a performance optimization of the core content and key,大家可以以此作为参考,去做性能优化.

5.2.2 The main process of lightweight thin body

Long time consuming in core solution is to run、The function of the large amount of calculation to the newly opened node Process to perform processing.

伪代码如下：

const { fork } = require('child_process')
let { app } = require('electron')

function createProcess(socketName) {
 process = fork(`xxxx/server.js`, [
 '--subprocess',
 app.getVersion(),
 socketName
 ])
}

const initApp = async () => {
 // 其他初始化代码...
 let socket = await findSocket()
 createProcess(socket)
}

app.on('ready', initApp)

通过以上代码,将耗时、The function of the large amount of calculation,放在 server.js ,然后再 fork To the new open node 进程中进行处理.

至此,Performance optimization is introduced.

六、质量保障

Quality assurance of the whole process measures as shown in the figure below：

This chapter mainly introduces the following3个方面：

自动化测试

崩溃监控

崩溃治理

The following will, in turn, introduces the content.

6.1 自动化测试

自动化测试是什么？

null

Pictured above is to do automation test a complete step,Look at the picture you can understand.

自动化测试主要分为单元测试、集成测试、端到端测试,三者关系如下图所示：

一般情况下,作为软件工程师,We can do some unit tests.And from my experience,If it is to write the business nature of the project,Basically won't write test related code.Test automation is mainly used to write the library、框架、Components such as the need to provide for the use of others as a separate individual.

electron Test tools recommended vitest 、 spectron .Specific usage reference website document can be,没什么特别的技巧.

6.2 崩溃监控

对于 GUI 软件,Especially the desktop software,Collapse rate is very important,Therefore need to monitor breakdown.

Collapse the monitoring principle as shown in the figure below：

null

Collapse monitoring techniques

Rendering process after the collapse,Prompt the user to reload

通过 preload Unified initialization collapse monitoring

主进程、渲染进程通过 process.crash() Simulated collapse

To collect and analyze crash log

Collapse of monitoring well after,如果发生崩溃,How to control collapse？

6.3 崩溃治理

Collapse governance difficulties：

The positioning error stack difficult：Native 错误栈,Without the operating context

Debug the high threshold：C++ 、 IIdb/GDB

运行环境复杂：机器型号、系统、其他软件

Crash management skills：

及时升级 electron

User operation logs and system information

Repetition and positioning problem is more important than governance

Put the question to the community to solve,Community fast response

善于用 devtool Analysis and governance memory problems

七、安全

俗话说的好,安全大于天,保证 electron The security of the application is an important thing,This section safety can be divided into the following 5 个方面：

源码泄漏

asar

源码保护

应用安全

编码安全

The following will, in turn, introduces the content.

7.1 源码泄漏

目前 electron In the source code security do bad,The official use only asar Made a very useless source protection,How useless？

你只需要下载 asar 工具,然后对 asar File to extract can get the source code,如下图所示：

Through the operation can be seen in figure finches application source code.上面提到的 asar 是什么呢？

7.2 asar

asar Is a kind of incorporating multiple files into one file class tar In the style of archive format.Electron Can need not extract the file,Can read arbitrary files from it.

asar 技术原理：

可以直接看 electron 源码,都是 ts 代码,容易阅读,源码如下图所示：

从图中可以看出, asar The core of the implementation is to nodejs 的 fs Rewrite module.

7.3 源码保护

To avoid leakage source,From low to high according to the source of security,Can be divided into the following degree

asar

代码混淆

WebAssembly

Language bindings

其中,Language bindings Is the highest source security measures,其实使用 C++ 或 Rust 代码来编写 electron 应用代码,通过将 C++ 或 Rust After the code is compiled into the binary code,The difficulty of deciphering will get higher.Here I said how to use Rust 去编写 electron 应用代码.

方案：使用 napi-rs As a tool to write,如下图所示：
null

我们采用 pnpm-workspace 去管理 Rust 代码,使用 napi-rs ,比如我们写一个 sum 函数,rs代码如下：

fn sum(a: f64, b: f64) -> f64 {
 a + b
}

此时我们加上 napi 装饰代码,如下所示：

use napi_derive::napi;

#[napi]
fn sum(a: f64, b: f64) -> f64 {
 a + b
}

在通过 napi-cli 将上述代码编译成 node You can call the binary code.

编译后,在electron使用上述代码,如下所示：

import { sum as rsSum } from '@rebebuca/native'
// 输出 7
console.log(rsSum(2, 5))

napi-rs Please read the use of the official document,地址是：

https://napi.rs/(opens new window)

至此,language bindings This is done.我们通过这种方式,Can complete the important function of the source code to protect.

7.4 应用安全

Now known as a security issue is to clone the attack,The mainstream of the problem solution is to bind user authentication information and application equipment fingerprint,The whole process such as shown in the figure below：

Application equipment fingerprint generation：Above can be used in this paper, the napi-rs Scheme to realize
User authentication information and binding equipment fingerprint：Use the server to implement

7.5 编码安全

主要有以下措施：

常用的 web 安全,比如防 xss 、 csrf

设置 node 可执行环境

The form open security options

Limit links jump

The above details are no longer introduce,To search the solution.除此之外,Another official recommended best security practices,有空可以看看,地址如下：

https://www.electronjs.org/docs/latest/tutorial/security(opens new window)

至此,Safety this is finished.

八、总结

This paper introduces our research on the desktop technology、确定技术选型,以及用 electron 开发过程中,Summing up the experience of the,如构建、性能优化、质量保障、安全等.Hope to help readers in the process of development of desktop application,Articles are insufficient and the wrong place,Welcome to readers in the comments section to communicate.

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/221/202208090947463586.html

当前位置：网站首页>Electron application development best practices

Electron application development best practices

一、背景

二、应用技术选型

2.1 编程语言 Typescript

2.2 构建工具 Electron-Forge

2.3 Web 方案 Vue3 + Vite

2.4 monorepo方案 pnpm + turbo

2.5 数据库 lowdb

2.6 脚本工具 zx

三、构建

3.1 Application icon to generate

3.2 The binary file building

3.3 按需构建

3.4 性能优化

四、更新

4.1 全量更新

4.2 增量更新

五、性能优化

5.1 Startup optimization

5.1.1 使用 v8-compile-cache 缓存编译代码

5.1.2 Priority loading core function,Non-core functions of dynamic loading

5.2 运行时优化

5.2.1 The rendering process 进行 Web 性能优化

5.2.2 The main process of lightweight thin body

六、质量保障

6.1 自动化测试

6.2 崩溃监控

6.3 崩溃治理

七、安全

7.1 源码泄漏

7.2 asar

7.3 源码保护

7.4 应用安全

7.5 编码安全

八、总结

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>Electron application development best practices

Electron application development best practices

一、背景

二、应用技术选型

2.1 编程语言 Typescript

2.2&nbsp;构建工具 Electron-Forge

2.3 Web 方案 Vue3 + Vite

2.4 monorepo方案 pnpm + turbo

2.5 数据库 lowdb

2.6 脚本工具 zx

三、构建

3.1 Application icon to generate

3.2 The binary file building

3.3 按需构建

3.4 性能优化

四、更新

4.1 全量更新

4.2 增量更新

五、性能优化

5.1 Startup optimization

5.1.1 使用 v8-compile-cache 缓存编译代码

5.1.2 Priority loading core function,Non-core functions of dynamic loading

5.2 运行时优化

5.2.1 The rendering process 进行 Web 性能优化

5.2.2 The main process of lightweight thin body

六、质量保障

6.1 自动化测试

6.2 崩溃监控

6.3 崩溃治理

七、安全

7.1 源码泄漏

7.2 asar

7.3 源码保护

7.4 应用安全

7.5 编码安全

八、总结

边栏推荐

猜你喜欢

随机推荐

2.2 构建工具 Electron-Forge