How to use main and renderer processes in Electron

In Electron, the main process and renderer process work together to implement application functionality. These two types of processes have distinct responsibilities and communicate in specific ways to accomplish tasks. I will now explain the roles of these processes and how they interact.

Main Process

The main process is responsible for managing the entire application lifecycle, including opening and closing windows, handling menu events, and other related tasks. It operates within the Node.js environment and can directly invoke native OS interfaces. The main process uses the BrowserWindow class to create and manage renderer processes, with each BrowserWindow instance running a web page in its own renderer process.

Renderer Process

The renderer process is based on Chromium and is responsible for rendering web pages. Since Electron uses Chromium, the renderer process operates similarly to a regular web page, but it can also access additional system resources via Node.js APIs. Each BrowserWindow window corresponds to a renderer process.

Inter-Process Communication

Communication between the main process and renderer process primarily relies on Electron's IPC (Inter-Process Communication) mechanism. Electron provides the ipcMain and ipcRenderer modules to achieve this.

Example: Communication Between Main Process and Renderer Process

Suppose we need to display some information obtained from the operating system (such as the user's home directory path) on the web page in the renderer process:

1. In the renderer process (web page code), we can use ipcRenderer to send a message to request this information:

   javascript
   const { ipcRenderer } = require('electron');
   
   ipcRenderer.send('get-user-home-directory');

2. In the main process, we listen for requests from the renderer and use Node.js APIs to handle the request and respond:

   javascript
   const { ipcMain, app } = require('electron');
   
   ipcMain.on('get-user-home-directory', (event) => {
       event.reply('user-home-directory', app.getPath('home'));
   });

3. Back in the renderer process, we listen for the response from the main process and use the data:

   javascript
   ipcRenderer.on('user-home-directory', (event, path) => {
       console.log('User Home Directory:', path);
   });

Through this approach, Electron enables efficient communication between the main process and renderer process, managing different tasks and resources. This separation also enhances security, as the renderer process cannot directly access critical system resources and must go through the main process.