How Electron Works?

How Electron Works: Main and Renderer Processes

Electron’s architecture is based on a multi-process model, similar to modern web browsers like Chromium. Understanding this model is crucial for developing Electron applications effectively.

When you launch an Electron application, it starts a Main Process. This process is unique and acts as the entry point and controller for your entire application. The script defined as "main" in your package.json file is executed by the main process.

The main process is responsible for:

• Creating and managing application windows (instances of BrowserWindow).
• Interacting with the native GUI of the operating system (e.g., creating menus, dialogs, tray icons).
• Handling application lifecycle events (e.g., startup, quit).
• Performing operations that require OS-level access or Node.js APIs (like file system access, network requests, or running child processes).
• Coordinating communication between different parts of your application.

The main process itself does not render any visible user interface. To display a UI, the main process creates Renderer Processes. Each BrowserWindow instance it creates runs its own separate renderer process. A renderer process is responsible for rendering web content (HTML, CSS, JavaScript) within its window.

Key characteristics of renderer processes:

• Each renderer process is isolated from others and from the main process.
• They are essentially embedded Chromium browser instances.
• For security reasons, renderer processes (especially with modern defaults like contextIsolation: true and nodeIntegration: false) do not have direct access to Node.js APIs or sensitive Electron APIs. They must communicate with the main process via Inter-Process Communication (IPC) to request such operations.
• If a renderer process crashes, it typically does not affect the main process or other renderer processes, enhancing application stability.

Difference between Main and Renderer Processes Summarized

Main Process:

• One per application.
• Manages application lifecycle and native OS interactions.
• Creates and manages BrowserWindow instances (and thus, renderer processes).
• Has full Node.js API access and Electron’s main-process-only modules.
• No direct UI rendering capabilities (it orchestrates windows that do).

Renderer Process:

• One per BrowserWindow (web page).
• Responsible for rendering HTML, CSS, and executing JavaScript for the UI within its window.
• Isolated and sandboxed for security by default.
• Accesses Node.js or OS features indirectly via IPC through the main process (typically using a preload script).
• Can be multiple, depending on how many windows your app opens.

This separation of concerns is fundamental to Electron’s design. The main process acts as the privileged backend, while renderer processes handle the user interface in a more restricted environment. Communication between them is achieved using Electron’s IPC mechanisms (ipcMain and ipcRenderer).