Electron applications are fundamentally built around a multi-process architecture. This is a crucial concept to grasp because it dictates how your application's code runs and how different parts of your application can communicate with each other. Unlike traditional web applications that typically run entirely within a single browser tab (a single process), Electron leverages the power of Node.js and Chromium to create a more robust and feature-rich desktop experience. This architecture divides your application into two primary types of processes: the Main process and the Renderer processes.
The Main Process is the heart of your Electron application. It's responsible for managing the lifecycle of your application, creating native user interfaces, and orchestrating communication between different Renderer processes. When you start an Electron app, the Main process is the first to be instantiated. Think of it as the application's manager or conductor. It has full access to Node.js APIs and Electron's modules, allowing it to perform operations that are not available in a standard web browser, such as accessing the file system, creating native dialogs, and interacting with the operating system.
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);The Renderer Process is where your application's user interface is rendered. Each browser window (or BrowserWindow in Electron terminology) created by the Main process runs in its own separate Renderer process. These processes are essentially instances of Chromium's rendering engine, allowing you to build your UI using standard web technologies like HTML, CSS, and JavaScript. While a Renderer process can execute JavaScript and interact with the DOM, it has limited access to Node.js APIs and Electron's native modules by default for security reasons. This separation is similar to how different tabs in a web browser run in their own processes, preventing one tab from crashing the entire browser.
// In your renderer process (e.g., renderer.js)
console.log('This is running in the Renderer process!');graph TD;
A[Main Process] --> B(BrowserWindow 1);
A --> C(BrowserWindow 2);
B --> D[Renderer Process 1];
C --> E[Renderer Process 2];
D -- Web Technologies --> F(UI);
E -- Web Technologies --> G(UI);