What's the differences Between Electron Main Process and Renderer Process

In Electron development, understanding the differences between the Main Process and Renderer Process is crucial, as they each have different responsibilities and runtime environments.

Main Process

Characteristics

• Each Electron application has only one main process
• Runs in a Node.js environment
• Serves as the application entry point, usually specified in the main field of package.json
• Has full access to Node.js APIs

Responsibilities

• Create and manage BrowserWindow instances
• Control the application lifecycle (startup, exit, etc.)
• Handle system-level events and menus
• Manage native windows and dialogs
• Listen for messages from renderer processes via ipcMain
• Access underlying operating system functions (file system, network, etc.)

Example Code

javascript
// main.js
const { app, BrowserWindow, ipcMain } = require('electron')

let mainWindow

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  mainWindow.loadFile('index.html')
})

ipcMain.on('message-from-renderer', (event, data) => {
  console.log('Received from renderer:', data)
  event.reply('message-from-main', 'Hello from main process')
})

Renderer Process

Characteristics

• Each BrowserWindow has an independent renderer process
• Runs in a Chromium browser environment
• Cannot directly access Node.js APIs by default
• Uses standard web technologies (HTML, CSS, JavaScript) to build user interfaces

Responsibilities

• Render and display user interfaces
• Handle user interaction events
• Communicate with the main process via ipcRenderer
• Execute frontend business logic
• Access DOM and browser APIs

Example Code

javascript
// renderer.js
const { ipcRenderer } = require('electron')

// Send message to main process
ipcRenderer.send('message-from-renderer', { data: 'Hello from renderer' })

// Listen for messages from main process
ipcRenderer.on('message-from-main', (event, data) => {
  console.log('Received from main:', data)
})

Key Differences Comparison

Feature	Main Process	Renderer Process
Count	Single	Multiple (one per window)
Runtime Environment	Node.js	Chromium
Node.js API	Fully supported	Not supported by default
DOM Access	Not supported	Fully supported
Main Responsibilities	App lifecycle, window management, system interaction	UI rendering, user interaction
Communication Method	ipcMain	ipcRenderer

Inter-Process Communication (IPC)

Main and renderer processes communicate through IPC, which is the core mechanism of Electron architecture:

From Renderer to Main

javascript
// Renderer process
ipcRenderer.send('channel-name', data)

// Main process
ipcMain.on('channel-name', (event, data) => {
  // Handle message
})

From Main to Renderer

javascript
// Main process
mainWindow.webContents.send('channel-name', data)

// Renderer process
ipcRenderer.on('channel-name', (event, data) => {
  // Handle message
})

Security Best Practices

1. Disable nodeIntegration: Set nodeIntegration: false in webPreferences
2. Enable contextIsolation: Set contextIsolation: true to isolate preload scripts
3. Use preload scripts: Safely expose necessary APIs through preload scripts
4. Use contextBridge: Safely expose APIs to the renderer process

javascript
// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => ipcRenderer.send(channel, data),
  onMessage: (channel, callback) => ipcRenderer.on(channel, callback)
})

Common Questions

Q: Why can't the renderer process access Node.js APIs by default?A: For security reasons, to prevent malicious webpage code from accessing system resources and improve application security.

Q: Can an application have multiple main processes?A: No, each Electron application can only have one main process, but can have multiple renderer processes.

Q: How to use Node.js functionality in the renderer process?A: Safely expose necessary APIs through preload scripts and contextBridge, or communicate with the main process via IPC.