Visual Studio Code, Slack, Figma, GitHub Desktop – sie alle haben eines gemeinsam: Sie sind mit Electron gebaut. Das Framework von GitHub (heute Maintainer: OpenJS Foundation) hat die Art, wie Desktop-Anwendungen entwickelt werden, nachhaltig verändert. Web-Entwicklerinnen und -Entwickler können damit ihr vorhandenes Wissen direkt für plattformübergreifende Desktop-Apps nutzen.
Was ist Electron?
Electron kombiniert zwei leistungsstarke Open-Source-Projekte: Chromium als Rendering-Engine und Node.js als Backend-Laufzeitumgebung. Das Ergebnis ist eine Umgebung, in der HTML, CSS und JavaScript gleichzeitig eine vollständige Benutzeroberfläche rendern und auf Betriebssystem-APIs zugreifen können. Entwickelt wurde Electron ursprünglich für den Atom-Editor von GitHub und 2013 als Open-Source-Projekt veröffentlicht. Die offizielle Dokumentation findet sich auf electronjs.org.
Electron-Apps laufen nativ auf Windows, macOS und Linux – ohne dass separate Codebasen gepflegt werden müssen. Das macht das Framework besonders für Teams attraktiv, die bereits in der Web-Entwicklung zuhause sind.
Main-Prozess und Renderer-Prozess
Jede Electron-Anwendung besteht aus mindestens zwei Prozesstypen:
Der Main-Prozess (auch Hauptprozess genannt) ist der Einstiegspunkt der App. Er läuft in Node.js und hat Zugriff auf alle nativen APIs: Er erstellt Fenster, verwaltet den Anwendungslebenszyklus, öffnet Dialoge und kommuniziert mit dem Betriebssystem. Es gibt pro App genau einen Main-Prozess.
Der Renderer-Prozess ist eine Chromium-Instanz, die den HTML/CSS/JS-Inhalt eines Fensters darstellt. Jedes Fenster hat seinen eigenen Renderer-Prozess. Aus Sicherheitsgründen hat der Renderer standardmäßig keinen direkten Zugriff auf Node.js-APIs.
IPC-Kommunikation zwischen den Prozessen
Main und Renderer kommunizieren über das Inter-Process Communication (IPC)-System. Electron stellt dafür ipcMain und ipcRenderer bereit. Seit Electron 12 ist Context Isolation standardmäßig aktiviert: Das Renderer-Skript läuft in einem isolierten Kontext, und der Zugang zu Node.js-APIs wird ausschließlich über ein sogenanntes Preload-Skript kontrolliert, das mit contextBridge.exposeInMainWorld() definierte APIs sicher an den Renderer-Kontext übergibt.
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
readFile: (path) => ipcRenderer.invoke('read-file', path)
});contextBridge und deaktiviere niemals nodeIntegration: true in echten Anwendungen. Das öffnet sonst ernsthafte Sicherheitslücken, durch die schadhafte Webinhalte auf das Dateisystem zugreifen könnten. Die offizielle Security-Checkliste von Electron listet alle Best Practices übersichtlich auf.
Auto-Updater und Distribution
Electron bringt ein eingebautes autoUpdater-Modul mit, das auf Squirrel basiert. In der Praxis wird häufig die populäre Bibliothek electron-builder eingesetzt, die sowohl den Paketierungsprozess als auch die Update-Logik stark vereinfacht. Sie erzeugt plattformspezifische Pakete (NSIS/MSI für Windows, DMG/pkg für macOS, AppImage/.deb für Linux) und unterstützt Delta-Updates.
Für die Distribution über den Windows Store, macOS App Store oder als eigenständiger Download ist Code-Signierung unverzichtbar. Ohne gültige Signatur warnen Betriebssysteme Nutzer mit Sicherheitshinweisen oder blockieren die Installation vollständig. Ein Apple Developer-Zertifikat (99 $/Jahr) und ein Windows-EV-Zertifikat sind die typischen Voraussetzungen.
Bekannte Apps auf Electron-Basis
Visual Studio Code ist das bekannteste Beispiel – ein hochwertiger Code-Editor, der zeigt, dass Electron trotz seiner Ressourcen-Anforderungen hochperformante Apps ermöglicht, wenn das Rendering optimiert wird. Slack ist ein weiteres Paradebeispiel für eine erfolgreiche, täglich von Millionen genutzten Electron-App. Weitere bekannte Vertreter sind GitHub Desktop, Discord, Notion, Obsidian und Figma (Desktop-Client).
Vergleich: Electron vs. Tauri vs. NW.js vs. Flutter
| Framework | Sprache | Bundle-Größe (typ.) | RAM (Leerlauf) | Rendering | Bekannte Apps |
|---|---|---|---|---|---|
| Electron | JavaScript / Node.js | ~120–200 MB | ~150–300 MB | Chromium (gebündelt) | VSCode, Slack, Discord |
| Tauri | Rust + JS | ~3–10 MB | ~30–80 MB | System-WebView | Spacedrive, Authme |
| NW.js | JavaScript / Node.js | ~100–180 MB | ~120–250 MB | Chromium (gebündelt) | WeChat (PC), Mango TV |
| Flutter Desktop | Dart | ~20–40 MB | ~60–120 MB | Eigene Rendering-Engine (Skia/Impeller) | Google Pay, Hamilton App |
Projektstruktur und Einstieg
Ein neues Electron-Projekt lässt sich schnell über Electron Forge anlegen:
npm init electron-app@latest my-app -- --template=viteDas Template nutzt Vite als Build-Tool, was sehr schnelle Hot-Module-Replacement-Zyklen während der Entwicklung ermöglicht. Die erzeugte Struktur enthält src/main.js (Main-Prozess), src/preload.js und src/index.html (Renderer). Mit npm start startet die App im Entwicklungsmodus, npm run make erzeugt den distributionsfähigen Installer.
Fazit
Electron ist trotz seiner Schwächen bei Dateigröße und Speicherverbrauch die ausgereifteste und bestdokumentierte Lösung für Desktop-Apps mit Web-Technologien. Das enorme JavaScript-Ökosystem, die große Community und die Vielzahl an Plugins machen den Einstieg leicht. Für Teams mit bestehendem Web-Know-how und Anwendungen, bei denen Paketgröße keine Rolle spielt, bleibt Electron die erste Wahl.
Häufig gestellte Fragen (FAQ)
- Warum sind Electron-Apps so groß?
- Weil jede Electron-App eine vollständige Kopie von Chromium und der Node.js-Laufzeit mitbringt. Das sind allein schon 80–150 MB, bevor eine einzige Zeile eigener Code hinzukommt.
- Ist Electron sicher?
- Electron kann sicher sein, wenn Best Practices eingehalten werden: Context Isolation aktiviert lassen, nodeIntegration deaktivieren und alle externen Inhalte als nicht vertrauenswürdig behandeln. Das offizielle Security-Dokument gibt klare Empfehlungen.
- Kann ich Electron-Apps im Windows Store veröffentlichen?
- Ja. Electron Forge und electron-builder können MSIX-Pakete erzeugen, die im Microsoft Store eingereicht werden können. Eine gültige Code-Signierung ist dabei Pflicht.
- Was ist der Unterschied zwischen Electron und NW.js?
- Beide bündeln Chromium und Node.js, unterscheiden sich aber in der Architektur: In NW.js hat der Renderer direkten Zugriff auf Node.js-APIs (weniger Sicherheitsisolation). Electron trennt die Prozesse strenger und gilt heute als moderner und sicherer.