Main Process vs. Renderer Process in Electron application
These examples illustrate the clear separation of concerns. The main process manages the backend, system interactions, and overall application state, while the renderer process focuses on the user interface and application logic. Proper communication via IPC is essential for their coordination. Remember to always carefully validate and sanitize data that's passed across processes.
Main Process Examples (Node.js-based):
- 1. Creating the Browser Window: The main process is responsible for creating and managing the browser window(s) where your Angular application will run.
- 2. Handling System Events: The main process handles operating system events like application startup, quit requests, and other system-level notifications.
- 3. Accessing Native Modules: The main process can directly use Node.js modules to interact with the operating system. This is where you might handle file system access, network operations, or other low-level system interactions.
- 4. Managing Application State: The main process typically manages application-wide state (e.g., settings, user data). It's often responsible for storing and retrieving this data using persistent storage mechanisms.
1: const { app, BrowserWindow } = require('electron');
2:
3: let mainWindow;
4:
5: app.on('ready', () => {
6: mainWindow = new BrowserWindow({ /* window options */ });
7: mainWindow.loadFile('index.html'); // Loads your Angular app
8: });
1: const { app } = require('electron');
2:
3: app.on('ready', () => { /* ... */ });
4: app.on('window-all-closed', () => {
5: if (process.platform !== 'darwin') {
6: app.quit();
7: }
8: });
9: app.on('activate', () => {
10: // On macOS, re-create a window if the app is clicked and there are no windows open.
11: });
1: const { app, ipcMain, dialog } = require('electron');
2: const fs = require('node:fs'); // Example: File system module
3:
4: ipcMain.on('open-file-dialog', (event) => {
5: const files = dialog.showOpenDialogSync(null, { properties: ['openFile'] });
6: if (files && files.length > 0) {
7: const fileContent = fs.readFileSync(files[0], 'utf-8');
8: event.reply('file-opened', fileContent); // Send to renderer
9: }
10: });
1: const { app, ipcMain } = require('electron');
2: const Store = require('electron-store'); // Example: Persistent storage
3: const store = new Store();
4:
5: ipcMain.on('get-settings', (event) => {
6: event.reply('settings-received', store.get('settings'));
7: });
Renderer Process Examples (Chromium-based):
- 1. Rendering the Angular App: The renderer process renders the user interface of your Angular application, including components, views, and styling.
- 2. Communicating with the Main Process: The renderer process uses IPC to request actions or information from the main process (e.g., opening a file dialog, accessing system settings).
- 3. Handling User Input: The renderer process handles user interactions with UI elements (clicks, form submissions, etc.), passing data to Angular components.
- 4. Displaying UI elements: The renderer process is entirely responsible for displaying UI elements. Things like menus are created and handled by the main process, but what the menus do is handled by the renderer process.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>My Angular Electron App</title>
5: </head>
6: <body>
7: <app-root></app-root>
8: <script src="angular-app.js"></script> </body>
9: </html>
1: import { ipcRenderer } from 'electron';
2:
3: ipcRenderer.send('open-file-dialog'); // Send message to main
4: ipcRenderer.on('file-opened', (event, fileContent) => {
5: console.log('File content:', fileContent);
6: });
1: // In an Angular component:
2: onButtonClicked() {
3: // Send data to main process via IPC if needed
4: ipcRenderer.send('data-from-angular', { someData: '...' });
5: }
Electron context:
AngularElectron context:
Front context:
Comments (
)
)
Link to this page:
http://www.vb-net.com/AngularElectron/MainAndRenderingProcess.htm
|
|