What is Electron and Its Core Architecture

Electron is an open-source framework that allows developers to build cross-platform desktop applications using JavaScript, HTML, and CSS. Developed by GitHub, it is widely used in popular applications such as Atom, VS Code, Discord, and Slack.

Core Architecture

Electron's architecture consists of three main components:

1. Main Process

• Each Electron application has a single main process
• The main process runs in a Node.js environment and can use all Node.js APIs
• Responsible for creating and managing renderer processes
• Controls the application lifecycle (startup, exit, etc.)
• Manages native windows and menus
• Handles operating system-level interactions

2. Renderer Process

• Each window has an independent renderer process
• The renderer process runs in a Chromium environment and is responsible for rendering web pages
• Can use HTML, CSS, and JavaScript to build UI
• By default, cannot access Node.js APIs, needs to communicate securely through preload scripts or contextBridge

3. IPC (Inter-Process Communication)

• Communication between main and renderer processes through IPC
• Uses ipcMain and ipcRenderer modules for message passing
• Supports both synchronous and asynchronous communication
• Is the core mechanism for data exchange in Electron applications

How It Works

1. Application Startup: Main process starts, reads package.json configuration
2. Create Window: Main process creates BrowserWindow instance
3. Load Page: Window loads HTML file, starts renderer process
4. Render Content: Renderer process uses Chromium engine to render web pages
5. Interactive Communication: Data exchange between main and renderer processes through IPC

Technology Stack

• Chromium: Provides rendering engine, supports modern web standards
• Node.js: Provides backend capabilities, access to file system, network, and other system resources
• Native APIs: Provides operating system-level features such as notifications, menus, tray icons, etc.

Advantages

• Cross-platform support (Windows, macOS, Linux)
• Uses familiar web technology stack
• Active community and rich ecosystem
• Can access native system functionality
• High development efficiency, low maintenance cost

Considerations

• Application package size is relatively large (includes complete Chromium and Node.js)
• Memory usage is relatively high
• Need to pay attention to security, avoid exposing sensitive Node.js APIs
• Need to handle compatibility issues across different platforms