Welcome to the exciting world of desktop application development with Electron! As web developers, you're already equipped with the skills to build amazing user interfaces using HTML, CSS, and JavaScript. Electron lets you take those skills and craft powerful, cross-platform desktop applications. But before we dive into building, it's crucial to understand the fundamental architecture that powers every Electron app: the separation between the Main Process and the Renderer Process.
Think of your Electron app as having two distinct personalities, each responsible for different tasks. This separation is the key to Electron's power and flexibility.
graph TD; A[Main Process] --> B(Renderer Process); A --> C(Node.js APIs); B --> D(Web APIs); B --> E(DOM Manipulation);
The Main Process is the powerhouse, the orchestrator of your application. When you launch an Electron app, the main process is the first thing that starts. It runs Node.js and has full access to the operating system's capabilities. This means it can interact with your file system, create native dialogs, manage windows, and perform other system-level operations. It's where you define your application's overall behavior and manage its lifecycle.
Key responsibilities of the Main Process include:
- Creating and managing browser windows (which are essentially rendered by the Renderer Process).
- Interacting with the operating system (e.g., file system access, native menus, notifications).
- Handling application events (e.g., app startup, window closing).
- Communicating with Renderer Processes.
In your Electron project, the main process code typically resides in your main.js (or index.js, or whatever you've configured as your entry point) file. You'll often see it using Node.js modules and Electron's specific main process modules.
const { app, BrowserWindow } = require('electron');
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false // Recommended for security
}
});
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html');
}
app.whenReady().then(createWindow);The Renderer Process, on the other hand, is where the magic of your user interface happens. Each browser window you create in your Electron app runs in its own separate renderer process. These processes are essentially Chrome renderers, meaning they can run HTML, CSS, and JavaScript just like a regular web page. They have access to Web APIs and can manipulate the DOM, making them perfect for building interactive user interfaces.
Key responsibilities of the Renderer Process include:
- Rendering the HTML, CSS, and JavaScript of your application's UI.
- Handling user interactions within a window.
- Displaying dynamic content.
- Communicating with the Main Process when system-level actions are required.
The code you write for your web pages (e.g., in index.html, renderer.js, style.css) runs within the renderer process. You'll be using familiar web technologies here.
// In your renderer.js file
document.body.innerHTML = '<h1>Hello from the Renderer Process!</h1>';The separation between the Main and Renderer processes is a core concept in Electron. The Main Process manages the application's resources and native features, while the Renderer Process handles the user interface. They communicate with each other using IPC (Inter-Process Communication) mechanisms, which we'll explore in more detail later. This architecture allows you to leverage the power of Node.js while building rich, interactive desktop applications using your existing web development skills.