What's Electron

1. What's Electron

Electron is an open-source framework for building cross-platform desktop applications using JavaScript, HTML, and CSS.

It embeds the Chromium rendering engine and Node.js runtime into a single executable, allowing developers to maintain a unified JavaScript codebase that runs on Windows, macOS, and Linux.

Which means Electron enables web front-end developers to build desktop applications quickly "without native development experience".

Main Process and Renderer Process

Electron inherits Chromium’s multi-process architecture. An Electron app consists of two types of processes: the main process and the renderer process.

• Main Process: Each Electron app has a single main process that serves as the entry point. It runs in a Node.js environment and has access to all Node.js APIs. The main process manages the app lifecycle and handles the creation and control of application windows. For example, it uses BrowserWindow to create browser windows and controls menus, dialogs, system tray, and more.

• Renderer Process: Each BrowserWindow has a corresponding renderer process, responsible for loading web pages and rendering the user interface. Code in the renderer process adheres to web standards and can utilize common front-end technology stacks. Multiple windows run in separate, isolated renderer processes, ensuring one crash doesn’t affect others.

Integrating Chromium and Node.js

A key point: Electron integrates Node.js’s event loop (libuv) into Chromium’s message loop, unifying their event handling mechanisms.

Electron 集成 Node event loop 和 Chromium message loop 事件循环原理探究

Also, Chromium and Node.js share the same V8 engine. During build time, Electron sets node_shared=true and disables Node.js's built-in V8, so both the main and renderer processes use Chromium’s bundled V8.

At runtime, Electron follows Chromium’s multi-process model: each renderer and the main process has its own V8 runloop and they are completely isolated.

Node.js Access in Renderer Process

When nodeIntegration is enabled, the renderer process has full access to Node.js APIs (like require, fs, path, etc.) and runs them within its own process:

• Independent Runtime: On startup, the renderer process is injected with Node.js global objects (process, Buffer, require, etc.) and initializes libuv and core Node modules. Each renderer process acts as both a Chromium sandbox and a full Node.js runtime.

• Local Execution: When the renderer calls any Node.js API (e.g., file operations), it executes locally in the renderer's Node.js runtime, using libuv's I/O thread pool or event loop, and does not delegate to the main process.

• IPC with Main Process: The main and renderer processes communicate only via ipcRenderer/ipcMain for tasks like window control, privilege boundaries, or sandbox security. Node APIs themselves do not rely on IPC.

However, for security reasons, Electron officially recommends disabling nodeIntegration and using preload scripts with contextBridge to expose only necessary APIs, rather than enabling the full Node.js environment.

2. Why Electron