Main and Renderer Process: The Fundamentals of Electron.js

Electron.js is a powerful framework that makes both web and desktop application development easy. Its application architecture consists of two main components: the Main and Renderer processes. In this article, these processes, how they work, and how to use them in Electron applications will be detailed.

What is the Main Process?

The Main process is the main control center of your Electron application. It runs before the user interface is loaded and manages application windows. In addition, it communicates with all background-running Renderer processes. One of the main features in the Main process is the availability of Node.js.

What is Done in the Main Process?

• Application window management
• Communication with Renderer processes
• Access to local system resources

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

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });
    mainWindow.loadFile('index.html');
});

What is the Renderer Process?

The Renderer process plays a critical role in creating and displaying the user interface. There is a separate Renderer process for each window. This process creates and updates the user interface using web technologies (HTML, CSS, JavaScript).

Basic Functions of the Renderer Process

• Creating the interface with HTML and CSS
• Interaction with JavaScript
• Making network calls

const { ipcRenderer } = require('electron');

document.getElementById('myButton').addEventListener('click', () => {
    ipcRenderer.send('button-clicked');
});

Communication Between Main and Renderer Processes

Communication between the Main and Renderer processes takes place via IPC (Inter-Process Communication). This is important to enable data exchange between processes.

const { ipcMain } = require('electron');

ipcMain.on('button-clicked', (event) => {
    console.log('Button was clicked!');
});

As a result, Main and Renderer processes are two critical components specifically designed to ensure the functioning of Electron-based applications. Understanding how these processes work is the key to developing more effective and efficient applications. Developers can improve their designs by taking these processes into account.