we see 视界 - electron
type: channel
link: https://wesee.club/tag/electron/
items: 【转】electron 应用开发优秀实践

【转】electron 应用开发优秀实践
type: item
date: 2023-08-16T22:38:07+08:00
description: 之前在腾讯云也做过跨端开发，也是基于Electron的客户端，核心的一点就是开发便捷，社区支持度好，很多问题一搜就能找到。与前端的配合使用上也很方便，上手难度相对较低。做一些基础产品应用足够了，如果是打造专业级产品，确实需要更多的做优化、安全、防止反编译以及本地化应用的一些工作。我之前也遇到一些问题，在后续的文章中我再补充一些，主要是mac 在x86/m1 等不同架构cpu核心的编译与自动化构建、客户端性能优化、内存与cpu等优化。 原文来自 https://xie.infoq.cn/article/b3849f9749a65e99eb33fe020,作者：vivo 互联网前端团队-Yang Kun 一、背景在团队中，我们因业务发展，需要用到桌面端技术，如离线可用、调用桌面系统能力。什么是桌面端开发？一句话概括就是：以 Windows 、macOS 和 Linux 为操作系统的软件开发。对此我们做了详细的技术调研，桌面端的开发方式主要有 Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui 。其各自优劣势如下表格所示：我们最终的桌面端技术选型是 Electron ，Electron 是一个可以使用 Web 技术来开发跨平台桌面应用的开发框架。其技术组成如下： Electron = Chromium + Node.js + Native API 各技术能力如下图所示：整体架构如下图所示：Electron 是多进程架构，架构具有以下特点： 由一个主进程和 N 个渲染进程组成 主进程承担主导作用，用于完成各种跨平台和原生交互 渲染进程可以是多个，使用 Web 技术开发，通过浏览器内核渲染页面 主进程和渲染进程通过进程间通信来完成各种功能 这里说下 Electron 进程间通信技术原理：electron 使用 IPC （interprocess communication） 在进程之间进行通信，如下图所示：其提供了 IPC 通信模块，主进程的 ipcMain 和渲染进程的 ipcRenderer。从 electron 源码中可以看出， ipcMain 和 ipcRenderer 都是 EventEmitter 对象，源码如下图所示：看到源码实现，是不是觉得 IPC 不难理解了。知其本质，方可游刃有余。 看到这，我们回顾上文技术表格，看到 Electron 应用包体积大，那体积大的根本原因是什么呢？ 其实这和 chromium 的框架设计有关，其对很多功能都没有宏控制，导致很难把庞大复杂的细节功能去除掉，也造成了基于 chromium 的开发框架，如 electron 、 nwjs 打出的包起步就是 100 多 M 。综上，electron 具有跨端、基于 Web 、超强生态等优点，是桌面端开发的优秀方案之一。下文将介绍 electron 应用开发实践经验，包括应用技术选型和常用功能。二、应用技术选型2.1 编程语言 Typescript理由如下： 针对开发者 Javascript 的超集 - 无缝支持所有的 es2020+ 所有的特性，学习成本小 编译生成的 JavaScript 的代码保持很好的可读性 可维护性明显增强 完整的 OOP 的支持 - extends, interface， private， protect， public等 类型即文档 类型的约束，更少的单元测试的覆盖 更安全的代码 针对工具 更好的重构能力 静态分析自动导包 代码错误检查 代码跳转 代码提示补齐 社区 大量的社区的类型定义文件 提升开发效率 2.2 构建工具 Electron-Forge理由：简单而又强大，目前 electron 应用最好的构建工具之一。这里提一下 electron-builder 其和 electron-forge 的介绍和区别，看下图所示：两者最大的区别在于自由度，两者在能力上基本没什么差异了，从官方组织中的排序看，有意优先推荐 electron-forge 。2.3 Web 方案 Vue3 + Vite我们采用的是 Vue3 ，同时使用 Vite 作为构建工具，具体优点，大家可以查看官网介绍，这套组合是目前主流的 Web 开发方案。2.4 monorepo方案 pnpm + turbo目前的 monorepo 生态百花齐放，正确的实践方法应该是集大成法，也就是取各家之长，目前的趋势也是如此，各开源 monorepo 工具达成默契，专注自己擅长的能力。如 pnpm 擅长依赖管理， turbo 擅长构建任务编排。遂在 monorepo 技术选型上，我选择了 pnpm 和 turbo 。pnpm 理由如下： 目前最好的包管理工具， pnpm 吸收了 npm 、 yarn 、 lerna 等主流工具的…