Electron — Cheat Sheet

Tag: electron, node.js, chromium, ipc, desktop, frontend

Livello: intermedio

TL;DR: Framework per creare applicazioni desktop cross-platform usando tecnologie web. Basato su un'architettura multi-processo che unisce Chromium e Node.js.

Concetti chiave

Architettura multi-processo basata su Chromium per la UI e Node.js per il backend.

Il Main process gestisce il ciclo di vita dell'app, le finestre e le API native di sistema.

Il Renderer process si occupa esclusivamente di visualizzare l'interfaccia utente web.

IPC (Inter-Process Communication) è il canale ufficiale per far comunicare Main e Renderer.

Il Preload script fa da ponte, eseguendo codice Node prima del caricamento della pagina.

Context Isolation separa l'ambiente globale del Renderer da quello del Preload per massima sicurezza.

Le API di sistema (file system, hardware) sono accessibili solo dal Main process o via Preload.

Domande tipiche e risposte pronte

Q: Qual è la differenza tra Main process e Renderer process?R: Il Main gira in ambiente Node.js e controlla il sistema operativo e il ciclo di vita. Il Renderer è una tab di Chromium che renderizza la UI e non ha accesso diretto al sistema.

Q: Come fai comunicare in sicurezza l'interfaccia col sistema?R: Uso contextBridge nel Preload script per esporre funzioni specifiche al Renderer. I messaggi vengono poi passati al Main tramite ipcRenderer.invoke o send.

Insidie e errori comuni

Abilitare nodeIntegration: true nel Renderer. Espone l'intero sistema operativo a vulnerabilità XSS.

Disabilitare contextIsolation: false. Permette al codice web di interferire con gli oggetti globali Node.

Bloccare il Main process con operazioni sincrone prolungate, causando il freeze totale dell'applicazione.

Non fare il cleanup dei listener IPC (ipcMain.on), generando memory leak alla chiusura delle finestre.

Snippet e comandiJavaScript

// main.js - Setup sicuro
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  win.loadFile('index.html');
});

ipcMain.handle('get-data', async (event, args) => {
  return "dati dal sistema";
});

JavaScript

// preload.js - Esposizione API
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  fetchData: (args) => ipcRenderer.invoke('get-data', args)
});

JavaScript

// renderer.js - Utilizzo (Frontend)
async function load() {
  const data = await window.api.fetchData('test');
  console.log(data);
}
Jarvis Interviews
Jarvis