00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Introduzione a Electron

Edoardo Midali
Edoardo Midali

Electron è un framework open source che permette di costruire applicazioni desktop cross-platform utilizzando tecnologie web. Creato originariamente da GitHub per l’editor Atom, Electron è oggi alla base di alcune delle applicazioni desktop più utilizzate al mondo, tra cui Visual Studio Code, Discord, Slack, Figma e Notion.

Cos’è Electron

Electron combina Chromium (il motore di rendering di Chrome) con Node.js (runtime JavaScript lato server) in un unico runtime. Questo significa che puoi costruire l’interfaccia della tua applicazione con HTML, CSS e JavaScript, avendo allo stesso tempo accesso completo alle API del sistema operativo tramite Node.js.

┌─────────────────────────────────────┐
│          Applicazione Electron       │
│                                      │
│  ┌──────────────┐ ┌──────────────┐  │
│  │ Chromium      │ │ Node.js      │  │
│  │ (UI Rendering)│ │ (Sistema OS) │  │
│  └──────────────┘ └──────────────┘  │
│                                      │
│  HTML + CSS + JavaScript             │
└─────────────────────────────────────┘

Perché Electron

Electron offre vantaggi significativi per lo sviluppo desktop:

  1. Cross-Platform: Una singola codebase funziona su Windows, macOS e Linux senza modifiche.
  2. Tecnologie Web: Se conosci HTML, CSS e JavaScript, puoi già creare app desktop.
  3. Ecosistema npm: Accesso a oltre 2 milioni di pacchetti npm per qualsiasi funzionalità.
  4. Accesso Nativo: API complete per interagire con il file system, le notifiche, i menu di sistema e molto altro.
  5. Auto-aggiornamenti: Meccanismi integrati per distribuire aggiornamenti automatici agli utenti.
  6. Community Attiva: Documentazione completa, community vasta e supporto continuo.

Architettura a Due Processi

La caratteristica fondamentale di Electron è la sua architettura a due processi:

  • Main Process: Il processo principale che gestisce il ciclo di vita dell’applicazione, crea le finestre e interagisce con il sistema operativo. Esiste un solo Main Process per applicazione.
  • Renderer Process: Ogni finestra dell’applicazione esegue il proprio Renderer Process, che gestisce l’interfaccia utente con HTML, CSS e JavaScript. Possono esistere più Renderer Process simultanei.
// main.js - Main Process
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile('index.html'); // Carica la UI nel Renderer Process
}

app.whenReady().then(createWindow);

Applicazioni Famose Costruite con Electron

Electron alimenta molte applicazioni che probabilmente usi ogni giorno:

  • Visual Studio Code - L’editor di codice più popolare al mondo
  • Discord - Piattaforma di comunicazione per community
  • Slack - Strumento di collaborazione aziendale
  • Figma (desktop) - Tool di design collaborativo
  • Notion - Workspace all-in-one per note e progetti
  • Obsidian - Editor di note basato su Markdown
  • Postman - Testing e sviluppo API
  • GitHub Desktop - Client Git visuale

Requisiti per Iniziare

Per sviluppare con Electron hai bisogno di:

  • Node.js (versione 18 o superiore) e npm installati
  • Un editor di codice (consigliato VS Code)
  • Conoscenze base di HTML, CSS e JavaScript
  • Familiarità con Node.js è un plus ma non obbligatoria

Electron vs Alternative

Caratteristica Electron Tauri Flutter Desktop
Linguaggio JavaScript/TS Rust + JS/TS Dart
Dimensione Bundle ~150MB+ ~5-10MB ~20-30MB
RAM Utilizzo Alta Bassa Media
Maturità Molto alta Media Media
Ecosistema Enorme (npm) Crescente Grande
Curva Apprendimento Bassa (se conosci JS) Media Media

Electron rimane la scelta più popolare grazie alla sua maturità, alla vastità dell’ecosistema e alla facilità di sviluppo per chi conosce già le tecnologie web.

SuccessivoInstallazione e Setup