Electron

Was ist Electron? 🤔

Electron ist ein populäres Open-Source-Framework, das es Entwickler*innen ermöglicht, plattformübergreifende Desktop-Anwendungen für Windows, macOS und Linux mithilfe von bekannten Web-Technologien zu erstellen. Anstatt native UI-Toolkits der jeweiligen Betriebssysteme zu verwenden, nutzt Electron HTML für die Struktur, CSS für das Styling und JavaScript für die Anwendungslogik. Das Framework wurde ursprünglich von GitHub für den Texteditor Atom entwickelt (und hieß anfangs Atom Shell) und wird heute von GitHub (Microsoft) und einer großen Community gepflegt.

Die Kernidee von Electron besteht darin, eine Instanz des Chromium-Rendering-Engines (der Kern des Google Chrome Browsers) zur Darstellung der Benutzeroberfläche und eine Instanz der Node.js-Laufzeitumgebung für Backend-Aufgaben und den Zugriff auf das Dateisystem und Betriebssystem-APIs zu bündeln. Dies erlaubt Webentwickler*innen, ihre vorhandenen Fähigkeiten und oft auch bestehenden Web-Code zu nutzen, um native Desktop-Erfahrungen zu schaffen.

Architektur und Funktionsweise

Eine Electron-Anwendung besteht grundlegend aus zwei Arten von Prozessen:

  • Main Process (Hauptprozess): Es gibt nur einen Hauptprozess pro Anwendung. Dieser läuft in einer Node.js-Umgebung und ist der Einstiegspunkt der Applikation. Er hat vollen Zugriff auf Node.js-Module und Electron-spezifische APIs zur Interaktion mit dem Betriebssystem (z.B. Erstellung von Menüs, Anzeige von Dialogen, Zugriff auf das Dateisystem). Der Hauptprozess ist verantwortlich für das Erstellen und Verwalten der Anwendungsfenster (Instanzen von `BrowserWindow`).
  • Renderer Process (Renderer-Prozess): Jedes von Electron erstellte Fenster (jedes `BrowserWindow`) läuft in seinem eigenen, separaten Renderer-Prozess. Dieser Prozess ist im Grunde eine Chromium-Browserumgebung, die die HTML-, CSS- und JavaScript-Dateien der Benutzeroberfläche lädt und darstellt. Aus Sicherheitsgründen hat der JavaScript-Code im Renderer-Prozess standardmäßig keinen direkten Zugriff auf Node.js-APIs oder native Ressourcen. Die Kommunikation zwischen Renderer-Prozessen und dem Hauptprozess, um z.B. native Funktionen anzufordern, erfolgt über Inter-Process Communication (IPC)-Mechanismen, die Electron bereitstellt.

Dieses Modell ermöglicht die Kombination der UI-Gestaltung mit Web-Technologien im Renderer-Prozess und der Nutzung mächtiger Backend- und Systemfunktionen durch Node.js im Hauptprozess.

Vorteile und Anwendungsbeispiele

Der Einsatz von Electron bietet mehrere Vorteile:

  • Plattformübergreifende Entwicklung: Mit einer einzigen Codebasis können Anwendungen für Windows, macOS und Linux erstellt werden, was den Entwicklungsaufwand reduziert.
  • Nutzung von Web-Technologien: Entwickler*innen können auf ihre etablierten Kenntnisse in HTML, CSS, JavaScript und populären Frontend-Frameworks (React, Angular, Vue.js etc.) zurückgreifen und das riesige Ökosystem von npm (Node Package Manager) nutzen.
  • Potenziell schnellere Entwicklung: Die Wiederverwendung von Web-Code und -Kompetenzen kann die Markteinführungszeit verkürzen.
  • Zugriff auf native Betriebssystemfunktionen: Über die Electron-APIs können Desktop-spezifische Funktionen wie native Menüs, Systembenachrichtigungen, Dateioperationen etc. genutzt werden, die reinen Webanwendungen im Browser nicht zur Verfügung stehen.

Viele bekannte und weit verbreitete Desktop-Anwendungen nutzen Electron, darunter:

  • Texteditoren: Visual Studio Code (VS Code)
  • Kommunikations-Tools: Slack, Discord, Microsoft Teams, WhatsApp Desktop
  • Entwicklerwerkzeuge: Postman, Cypress Dashboard
  • Andere: Twitch Desktop App, Figma Desktop App

Nachteile und Alternativen

Trotz seiner Popularität hat Electron auch einige Nachteile:

  • Ressourcenverbrauch: Da jede Electron-Anwendung eine eigene Kopie von Chromium und Node.js mitbringt, können der Arbeitsspeicherbedarf (RAM) und die CPU-Last im Vergleich zu nativ entwickelten Anwendungen relativ hoch sein.
  • Anwendungsgröße: Die Installationsdateien von Electron-Apps sind oft recht groß (typischerweise über 50-100 MB), da die Runtimes enthalten sind.
  • Performance: Für sehr rechenintensive oder grafisch anspruchsvolle Aufgaben erreichen Electron-Anwendungen möglicherweise nicht die Performance von nativen Pendants.
  • Sicherheitsaspekte: Die Ausführung von Web-Code mit potenziell privilegiertem Zugriff auf das System über den Main-Prozess erfordert besondere Sorgfalt bei der Entwicklung, um Sicherheitslücken zu vermeiden.

Aufgrund dieser Nachteile gibt es eine wachsende Zahl von Alternativen, die versuchen, ähnliche Ziele mit geringerem Ressourcenverbrauch zu erreichen. Dazu gehören unter anderem Tauri (nutzt native WebViews und Rust für das Backend), Frameworks wie React Native für Windows/macOS oder Flutter Desktop, sowie NW.js (ein ähnlicher Ansatz wie Electron) oder auch installierbare Progressive Web Apps (PWAs).

Zurück