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);