Electron ist ein Framework, mit dem du echte Desktop-Anwendungen entwickeln kannst – ohne separate Codebases für macOS, Windows und Linux. Es kombiniert die Rendering-Engine Chromium mit der Laufzeitumgebung Node.js. Das Ergebnis ist eine Anwendung, die sich wie eine native App anfühlt, aber mit Web-Technologien entwickelt wird.

01 · Abschnitt

Die Architektur

Jede Electron-Anwendung besteht aus zwei fundamental verschiedenen Prozessarten, die strikt voneinander getrennt sind.

Main-Prozess

Der Main-Prozess läuft als Node.js-Prozess. Er ist verantwortlich für:

  • Erzeugen und Verwalten von Fenstern
  • Systemzugriffe (Dateien, Netzwerk, Kindprozesse)
  • Menüs, Tray, Dialoge und Auto-Updates
  • Den gesamten Anwendungslebenszyklus

Renderer-Prozess

Jeder Renderer ist ein Chromium-Prozess. Er rendert die Oberfläche und hat Zugriff auf:

  • Alle modernen Web-APIs (DOM, Canvas, WebGL, WebRTC)
  • JavaScript und TypeScript
  • Das komplette Frontend-Framework deiner Wahl

Die Kommunikation zwischen diesen beiden Welten erfolgt ausschließlich über IPC (Inter-Process Communication). Ohne IPC können Main und Renderer nichts voneinander wissen – sie sind bewusst isoliert.

02 · Abschnitt

Wann ist Electron die richtige Wahl?

Electron lohnt sich vor allem dann, wenn du:

  • eine komplexe Benutzeroberfläche mit Web-Technologien bauen willst
  • starke native Systemintegration brauchst (Tray, globale Shortcuts, native Dialoge, Drag & Drop)
  • dieselbe Codebasis für macOS, Windows und Linux nutzen möchtest
  • Auto-Updates, Code-Signing und professionelles Packaging benötigst

Electron ist in der Regel nicht die beste Wahl bei:

  • sehr kleinen Tools, bei denen Bundle-Größe kritisch ist
  • Anwendungen mit extrem hohen Performance-Anforderungen im 3D- oder Video-Bereich
  • Projekten, die nur eine installierbare Web-App brauchen (dann reicht oft eine PWA)
03 · Abschnitt

Erste Schritte

Die schnellste Möglichkeit, eine neue Electron-App zu starten, ist der offizielle Generator:

bash Terminal 
npm create electron-app@latest meine-erste-app
cd meine-erste-app
npm start

Alternativ kannst du auch manuell vorgehen.

Zuerst legst du ein normales Node-Projekt an und installierst Electron:

bash Terminal 
mkdir meine-app && cd meine-app
npm init -y
npm install electron

Danach erstellst du die drei zentralen Dateien.

04 · Abschnitt

Die drei wichtigsten Dateien

main.js – Der Main-Prozess

JavaScript main.js 
import { app, BrowserWindow } from 'electron';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

function createWindow() {
    const win = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });

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

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

preload.js – Die sichere Brücke

JavaScript preload.js 
import { contextBridge } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
    // Hier werden später sichere Methoden bereitgestellt
});

index.html – Der Renderer

HTML index.html 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Electron-App</title>
</head>
<body>
    <h1>Hallo Electron!</h1>
</body>
</html>
05 · Abschnitt

Häufige Stolperfallen beim Einstieg

require versus import in modernen Projekten

Viele ältere Tutorials verwenden require("electron"). Bei Projekten mit "type": "module" in der package.json musst du import verwenden, sonst gibt es Runtime-Fehler im Preload-Kontext. Mische die beiden Modulsysteme niemals innerhalb eines Projekts — das führt zu schwer auffindbaren Bugs.

Unsichere webPreferences aus Alt-Tutorials

Die Kombination nodeIntegration: true und contextIsolation: false wird in vielen Tutorials noch gezeigt. Sie ist seit Electron 12 als unsicher eingestuft und sollte in produktiven Projekten nicht mehr auftauchen — sie öffnet jedem Renderer den vollen Zugriff auf das Dateisystem und Node-Module.

Versionsabhängigkeiten unterschätzen

Electron, Chromium und Node.js sind eng gekoppelt. Ein Update von Electron bringt automatisch eine neue Chromium- und Node-Version mit. Native Module brechen dann oft, weil das ABI nicht mehr passt — electron-rebuild ist Pflicht nach jedem Major-Update.

Renderer und Main als denselben Prozess denken

Beide haben eigene globale Variablen, eigene Module, eigenen Speicher. Was du im Renderer setzt, sieht der Main nicht — und umgekehrt. Jede Kommunikation läuft ausschließlich über IPC. Wer das übersieht, baut Pseudo-State, der nie synchron ist.

Bundle-Größe unterschätzen

Eine leere Electron-App startet bei rund 80–150 MB. Wer das nicht früh einplant, ist später überrascht: Code-Splitting im Renderer hilft kaum, weil Chromium und Node selbst den Großteil ausmachen. Für sehr kleine Tools lohnt der Blick auf Tauri oder eine PWA.

Plattform-Unterschiede ignorieren

macOS, Windows und Linux verhalten sich beim Schließen, beim Tray-Icon, bei Notifications und beim Auto-Update unterschiedlich. Wer nur auf einer Plattform entwickelt und am Ende baut, findet auf den anderen oft kaputte Stellen. Frühe Tests auf allen Zielplattformen sparen viel Schmerz.

Weiterführende Ressourcen

Externe Quellen

/ Weiter

Zurück zu Einstieg

Zur Übersicht