Electron学习之 -- 一图流

前两节安装了环境，验证了脚手架工具。在更进一步之前，还需要夯实一下基础，学习一下Electron。

一图流是个好文明，但是我在网上找了半天都没有发现好的图，因此自制了一个😳

在往下看之前，先推荐看看这篇：https://www.debugandrelease.com/the-ultimate-electron-guide/

一. 基础之 -- Chromium

Chromium 为 Electron架构之滥觞，而 Chromium 有张架构图也是被经常引用的，就是这张：https://www.chromium.org/developers/design-documents/multi-pr...
可这张图有一点却画得不算好，因此我稍稍改了一下：

修改之前，Renderer 进程名被框在 Main thread 的虚框内，实在让人困惑；修改后，明确了进程和线程的关系，看起来好多了。

基于上图，Electron 之于 Chromium 的部分，其架构基础如下：

二. 扩展之 -- Node.js

Electron 使用 Node.js 处理后台逻辑【js一统江湖】，因此上图扩展为：

三. 通信与安全

详见我上面推荐文章，Electron 通过 preload script 和 context bridge 以提高程序的安全性。

不得不说，一次通信被分成了函数调用+管道传递两个部分，代码会因此显得不直观。跟踪查找代码时明显感觉繁琐不连贯，希望后续能有改进【比如可以根据IPC调用生成默认的 context bridge】。

四. 前端

对于整个 Electron 架构而言，前端架构显得似乎偏于一隅，但也并不意味着不重要，可以说自成一体吧。
表现在此图里，就是这个index.html啦！在我的项目里由 SvelteKit 生成。

五. 说明

画完上图，整体上我还是比较满意的。就是配色实在不是我擅长的，感觉有点丑丑的。
另外，一图流的确不好画，比如这张图里 preload.js 的位置并不是最理想的；renderer 与 main process 两个进程的通信也没有很好的表现出来（context bridge 连不上去...）

暂且如此吧