Viacheslav Eremin | Main Process vs. Renderer Process in Electron application

(FRONT) FRONT (2024)

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.

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

2. Handling System Events: The main process handles operating system events like application startup, quit requests, and other system-level notifications.

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

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.

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

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, 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.

   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>

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

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

3. Handling User Input: The renderer process handles user interactions with UI elements (clicks, form submissions, etc.), passing data to Angular components.

   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:  }

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.

Electron context:

(2024) Electron video player with cashing and CSP policy #Electron #Video
(2024) My workable project template for Angular Electron #Angular #Electron
(2024) Node PostProcessor step for Angular and Electron. #Angular #Electron #NodeBackend
(2022) Electron learning #FrontLearning #Electron
...
(2024) Browser Window Options in Electron application.
(2024) Important Parameters in Electron application.
(2024) Core Features and Concepts in Electron application.
(2024) Crucial Programming Techniques in Electron application.
(2024) Main Process vs. Renderer Process in Electron application.
(2024) Inter-Process Communication in Electron application.
(2024) Asynchronous Operations in Electron application.
(2024) Databases in Electron application.
(2024) MySQL and PostgreSQL integration in Electron application.
(2024) LocalStorage in Electron application.
(2024) Native Modules in Electron application.
(2024) Electron APIs in Electron application.
(2024) Multi-window Applications in Electron application.
(2024) Packaging and Distribution in Electron application.
(2024) Node Integration in Electron application.
(2024) Memory Leaks in Electron application.
(2024) Code Security in Electron application.
(2024) Browser Automation in Electron application.
(2024) Testing in Electron application.
(2024) Monetization in Electron application.

AngularElectron context:

Front context:

Order a job

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23> <24> <25>

Link to this page: http://www.vb-net.com/AngularElectron/MainAndRenderingProcess.htm