Framework · Seit 2013

Electron

Electron ist ein Open-Source-Framework, mit dem Sie Desktop-Apps für Windows, macOS und Linux mit JavaScript, HTML und CSS entwickeln.

Anleitung starten Diskussionen

Electron ist ein Open-Source-Framework für Desktop-Anwendungen auf Basis von Webtechnologien. Es bündelt Chromium für die Darstellung und Node.js für den Zugriff auf das Betriebssystem in einer Laufzeitumgebung, sodass eine Codebasis als App für Windows, macOS und Linux ausgeliefert werden kann. Es entstand 2013 bei GitHub als Atom Shell, die Grundlage des Editors Atom, und ist heute ein Projekt der OpenJS Foundation.

Seine Stärken spielt Electron aus, wenn ein Team mit Web-Erfahrung schnell eine Desktop-App bauen möchte. Die Desktop-Versionen von Visual Studio Code, Slack und Discord basieren darauf, und Web-Frameworks wie React oder Vue lassen sich samt npm-Ökosystem weiterverwenden. Da jede App ihr eigenes Chromium mitbringt, fallen Installationspakete und Speicherbedarf meist größer aus – das sollte man von Anfang an berücksichtigen.

Für den Einstieg installieren Sie Node.js und legen ein Projekt mit Electron Forge an oder fügen das Paket electron einem leeren Projekt hinzu. Das offizielle Tutorial erklärt Schritt für Schritt Hauptprozess, Preload-Skripte und Renderer sowie deren Kommunikation über IPC. Mit Electron Fiddle lassen sich kleine Beispiele ohne Projekteinrichtung ausprobieren, um die APIs kennenzulernen.

Besonderheiten

Webtechnologien plus Node.js

Chromium stellt HTML und CSS dar, während der Hauptprozess mit Node.js auf Dateisystem, Netzwerk und weitere Betriebssystemfunktionen zugreift.

Eine Codebasis, drei Plattformen

Derselbe JavaScript- oder TypeScript-Code wird zur App für Windows, macOS und Linux und als jeweils passendes Installationspaket verteilt.

Umfangreiche native APIs

Fenster, Menüs, Tray-Symbole, Benachrichtigungen, Dateidialoge, Zwischenablage und automatische Updates stehen als JavaScript-APIs bereit.

Mehrprozess-Sicherheitsmodell

Haupt- und Renderer-Prozesse sind getrennt; Kontextisolation und Preload-Skripte geben der Oberfläche nur die wirklich benötigten Funktionen frei.

Einsatzgebiete

Code-Editoren und Entwicklerwerkzeuge
Desktop-Clients für Chat und Zusammenarbeit
Interne Geschäftsanwendungen
Bestehende Webprodukte als Desktop-App anbieten

Installation

1
Node.js einrichten
Electron wird über Node.js und npm installiert und gestartet. Installieren Sie eine LTS-Version von Node.js und prüfen Sie, ob beide Versionen angezeigt werden.
```
node -v && npm -v
```
2
Electron zum Projekt hinzufügen
Legen Sie in einem neuen Ordner eine package.json an und installieren Sie electron als Entwicklungsabhängigkeit. Setzen Sie anschließend das Feld main auf main.js und ergänzen Sie ein start-Skript mit electron .
```
mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron
```
3
Mit Electron Forge starten
Für ein Projekt, das Paketierung und Veröffentlichung bereits enthält, verwenden Sie den Erstellungsbefehl des offiziellen Werkzeugs Electron Forge. Im erzeugten Ordner startet npm start die App.
```
npm init electron-app@latest my-app
```

Dein erstes Programm

Das erste Fenster öffnen

main.js ist der Einstiegspunkt des Hauptprozesses. Sobald die App bereit ist, erzeugt sie ein BrowserWindow mit 800×600 Pixeln und lädt index.html aus demselben Ordner. Unter macOS laufen Apps üblicherweise weiter, wenn das letzte Fenster geschlossen wird, daher beendet sich die App nur auf anderen Plattformen. Legen Sie eine einfache index.html neben main.js und führen Sie npm start aus.

main.js

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  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()
})

npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start

Wichtige Werkzeuge

Electron Forge: Offizielles Komplettwerkzeug für Projektanlage, Entwicklungsstart, Paketierung, Installer-Erstellung und Veröffentlichung.
electron-builder: Verbreitetes Paketierungswerkzeug für plattformübergreifende Installer, Codesignierung und automatische Updates.
Electron Fiddle: Offizielle Spielwiese, um kleine Electron-Experimente zu schreiben und mit verschiedenen Electron-Versionen auszuführen.
Playwright: Startet Ihre Electron-App für End-to-End-Tests, die Fenster steuern und Code im Hauptprozess auswerten.

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von Electron.

Offizielle Dokumentation und Ressourcen

Sprachen

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu Electron aus.

Noch keine Diskussionen. Starte die erste.