Electron Basic: Main Process & Renderer Process

date

Jun 10, 2023

slug

electron-basic-main-and-renderer-process

author

status

Public

Main Process and Renderer Process

Electron runs package.json's main script in a special process called the "main process." The main process has access to Node.js and Electron APIs, and it can display graphical user interfaces through web pages.

The main process is responsible for creating each new Renderer process in the application. Each web page in Electron runs in its own Renderer process, which is essentially a multi-threaded Chromium browser. The Renderer processes can use web APIs and a subset of the Node.js APIs, making it possible to use much of the npm ecosystem.

Main Process (main.js)

The main process can be identified by the script that is run by the Electron command in your package.json file. This process has full access to Node.js APIs and all Electron APIs. The main process is responsible for creating and managing application windows through the BrowserWindow instance, and it can also register and handle system-wide shortcuts, custom protocol URLs, open or quit the application, and other system operations. It also controls the application lifecycle.

In essence, the main process acts as the "backend" of your Electron application.


const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

main.js

In the above script, the app module is controlling the application's event lifecycle. A new BrowserWindow is created in the createWindow function and the index.html file is loaded into this window. This script is managing the creation of application windows and handling system-wide events.

Renderer Process (renderer.js)

Each Electron BrowserWindow instance runs the web contents in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The renderer process is where the user interface of your app lives. Each renderer process is isolated and only cares about the web page running in it. In a sense, it's a sandboxed environment that can some Node.js APIs, if enabled, but by default it has the same web sandbox as your web browser.

The renderer process communicates with the main process via IPC (Inter-Process Communication) to perform operations on the native GUI, as renderer processes are not allowed to access native GUI resources directly.

The main and renderer processes in Electron communicate asynchronously through the ipcMain and ipcRenderer modules.


const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }

  // Send a message to the main process
  ipcRenderer.send('message', 'Hello from Renderer Process')
})

// Listen for a message from the main process
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg)  // Prints 'Hello from Main Process'
})

renderer.js

In this script, the page replaces the text of some HTML elements with versions of Chrome, Node, and Electron once the DOM is fully loaded. This script is also sending a message to the main process using ipcRenderer.send and listening for a reply with ipcRenderer.on.

Note that in these examples, the main process and renderer process are communicating with each other using the IPC modules provided by Electron.

Remember, the renderer script is essentially a web page, so you can use any kind of JavaScript libraries/frameworks like React, Vue, Angular etc. to build more complex and interactive UI.

💡

Electron uses a dual-process model, the main process and renderer process, each with its own responsibilities. The main process handles the lifecycle of the application, creates windows, and manages system-level interactions, while the renderer process handles the user interface for each window. The two types of processes communicate with each other to work together in running an Electron application. This model allows for efficient use of system resources and makes it possible to build powerful desktop applications with web technologies.