Electron process model

Source: Electron Process Model
Release time: 2021-06-08 07:00:40

1. What is electron

help front-end developers to quickly develop cross-platform desktop (macOS, Linux, windows) applications. It contains tools for chromium and nodejs.

​

​

2. The electron process

electron is essentially a redevelopment of chromium, which means it is a multi-threaded architecture like chromium.




please click here to view: Chromium cross-platform basic library: multi-threaded , simple as shown below:



For developers, the need to pay attention to in electron is the following two processes: the main process and the rendering process.

2.1 main process

What is the main process? Quoting from the official website: Each Electron application has a single main process that serves as the entry point of the application. The main process runs in the Node.js environment, which means it has the ability to require modules and use all Node.js APIs.


means that the main process runs the electron window and creates various other functional child processes. In the main electron process, it has the ability to access files, networks, and hardware, and can interact with the host. In other words, all functions of the basic system can be used and accessed.


Electron primary process three main functions:

1. Window management
2. Application lifecycle management
3. Native api use

2.2 Renderer process

rendering process of 160c1793a58e2d in electron is for a single window, which means that a main process corresponds to multiple rendering processes, and each rendering process generates a browser window to render html, css, js, image and other resources.

The reasons can be found here:

Picture source: https://www.google.com/googlebooks/chrome/
The rendering process is independent, avoiding the poor performance of a single web page and causing other web applications to hang up.

​

The rendering process in electron refers to the preloading process. When the BrowserWindow is initialized, the js script is loaded through the webPreferences.preload property. This script runs before the page is loaded and can access the renderer api of the electron in the process.

2.3 Process communication

runs JS in electron, the actual running process is different. The main process and the rendering process are independent, so the processes need to be peers. In electron, contextBridge is used for intercommunication. Here is a simple bridge to use:

​

preload.js

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true,
});

renderer js

console.log(window.myApi.desktop); // true

​

3. Impressions

For electron applications, it can be said that "every electron app is equivalent to a chrome+ web application". Its prerequisite for use must be a complete chromium operating environment. This is the prerequisite for cross-platform applications and can run chromium. It must be possible to run electron. At its root, it is still web applications. The optimization of web technology can also use desktop applications. For him, to reduce the volume of the package, if there is an essential change, the volume of the electron must be optimized, and other optimizations can only be minimal~