Entwickeln von Desktopanwendungen mit Electron

Entwickeln von Desktopanwendungen mit Electron

Webbrowser sind in den letzten Jahren immer mächtiger geworden. Viele Anwendungen laufen heutzutage im Browser; von der Dokumentenverarbeitung bis zu komplexen 3D-Anwendungen ist mittlerweile vieles möglich.

Diesen Trend gibt es nicht ohne Grund. Webanwendungen haben viele Vorteile gegenüber traditionellen Desktopanwendungen:

• Anwendungen laufen auf jeder Plattform, auf der es Browser gibt. Dies ist vor allem für Mobilgeräte wichtig, da man sich dann eventuell auch die Entwicklung einer Mobil-App sparen kann.
• Updates sind automatisch für alle Nutzer verfügbar.
• Es ist kein Download eines Installationsprogramm mit anschließender Installation notwendig, um die Anwendung zu nutzen.

Es gibt natürlich auch einige klare Nachteile, die aber je nach Art der Anwendung unterschiedlich schwer ins Gewicht fallen:

• Webanwendungen funktionieren (standardmäßig) nicht offline.
• Der Zugriff auf das Dateisystem ist nicht direkt möglich.
• Browser können Sicherheitslücken haben, die dann eventuell auch zu Sicherheitslücken der Webanwendung werden.

Der größte Nachteil ist aber, dass manche Arten von Anwendungen einfach nicht als Webanwendungen möglich oder praktikabel sind.

Browser bieten zwar immer mehr Features, aber ein uneingeschränkter Zugriff auf das Dateisystem des Benutzers beispielsweise wird aus Sicherheitsgründen höchstwahrscheinlich niemals möglich sein. Auch einige Features wie Screen-Sharing oder der Zugriff auf Mikrofon bzw. Webcam sind zwar möglich, aber – aus gutem Grund – eingeschränkter als in Desktopanwendungen.

Oft gibt es daher Anwendungen sowohl als Web- als auch Desktop-Version. Die Desktop-Version hat dabei in der Regel den größeren Feature-Umfang, während die Web-Version die zweite Wahl ist, wenn die Verwendung der Desktop-Version nicht möglich oder gewünscht ist. Zwei verschiedene Versionen der gleichen Anwendung zu pflegen, bedeutet jedoch einen großen Entwicklungsaufwand.

Dieses Problem kann man mit Hilfe eines Frameworks zur Entwicklung von Desktop-Anwendungen mit Web-Technologien lösen. Das populärste Framework ist wohl Electron. Bekannte Nutzer sind zum Beispiel Slack, Discord, Microsoft Teams oder auch Visual Studio Code.

Eine Lösung: Electron

Electron ist grundsätzlich nur ein Framework, um Desktopanwendungen zu entwickeln. Durch die strikte Trennung zwischen UI und Logik, die von Electron erzwungen wird, ist es aber relativ einfach möglich, den gleichen Code für die Benutzeroberfläche auch in einer Web-Version der Anwendung wiederzuverwenden. Die oben genannten Anwendungen sind zum Beispiel zusätzlich zu der Desktop-Version auch im Browser verfügbar, wenn auch eventuell mit weniger Features.

Der Grund dafür ist, dass Electron Chromium nutzt, um die Benutzeroberfläche zu rendern. Entwickler können mit den gleichen Tools (HTML, CSS, JavaScript und Libraries wie React) arbeiten, die auch in der modernen Webentwicklung üblich sind.

Da kein neues UI-Framework erlernt werden muss, um auch eine Desktopanwendung anzubieten, hat dies außerdem den Vorteil, dass Webentwickler sehr schnell produktiv werden können.

Architektur

Electron macht starken Gebrauch von Process-Isolation und Sandboxing, um das Rendern der Benutzeroberfläche mit Chromium strikt von dem Code zu trennen, der eventuell auf native Betriebssystemschnittstellen zugreift.

In jeder Electron Anwendung gibt es daher zwei Prozesse: Den Main-Prozess und den Renderer-Prozess.

Im Main-Prozess finden statt:

• Das Initialisieren des (oder mehrerer) Browser-Fensters, in dem die eigentliche Anwendung dargestellt wird.
• Das Definieren von Menüleisten und anderen nativen Betriebssystem UI-Elementen.
• Das Anbieten einer API für den Renderer-Prozess, um auf native Betriebssystem-Features zuzugreifen (z.B. Dateisystem).

Im Renderer-Prozess erfolgt:

• Das Rendern der Benutzeroberfläche.
• Der Zugriff auf die Standard Browser-APIs.
• Das Senden von Nachrichten an den Main-Prozess, um auf dessen API zuzugreifen.

Da beide Prozesse strikt getrennt sind, ist Kommunikation nur durch Electrons Inter-Process-Communication (IPC) Modul möglich. Durch diese Trennung kann zum Beispiel eventueller Schadcode im Renderer-Prozess nicht direkt auf beliebige Betriebssystem-APIs zugreifen.

Weitere Features

Electron kümmert sich außerdem auch um plattformspezifische Unterschiede in den APIs zwischen Windows, Linux und MacOS. Einige APIs sind eventuell nur auf bestimmten Plattformen verfügbar, aber die Verwendung ist prinzipiell immer gleich.

Auch für Updates ist gesorgt: Electron bringt bereits eine Lösung für automatische Updates mit, sodass Benutzer ohne großen Aufwand immer die aktuellste Version der Anwendung verfügbar haben.

Security

Sicherheit ist ein großes Thema beim Entwickeln von Electron-Anwendungen. Electron bietet die Möglichkeit, Code aus dem Internet nachzuladen, so wie dies in vielen Webanwendungen üblich ist.  Dies ist aber natürlich auch ein potentielles Einfallstor für Schadcode.

Um eine Electron-Anwendung sicher zu machen, sollten mindestens folgende Punkte beachtet werden:

• Man sollte Content-Security-Policies nutzen, um das Nachladen von Code ganz zu verbieten oder auf bestimmte Domains einzuschränken.
• Unbedingt bei den Standardeinstellungen von Electron bezüglich Sandboxing und Process-Isolation bleiben. Eine Deaktivierung oder ein Aufweichen dieser Sicherheitsfeatures ist zwar möglich, sollte aber in der Regel vermieden werden, wenn es keinen sehr guten Grund dafür gibt.
• Das Verwenden von sehr spezifischen APIs zwischen Main- und Renderer-Prozess ist geboten. Beispielsweise sollte es nicht möglich sein, dass der Renderer-Prozess beliebige Dateien schreiben kann. Stattdessen sollte der Main-Prozess eine spezifische Schnittstelle bereitstellen, um eine bestimmte Datei oder Klasse von Dateien zu schreiben. Ansonsten könnte eventuell nachgeladener Schadcode auch das System des Benutzers infizieren.

Wann sollte ich Electron verwenden?

Nicht jede Anwendung braucht eine Desktop-Version. Auch wenn es mit Electron relativ einfach ist, Code zwischen Web- und Desktop-Version zu teilen, verursacht es trotzdem einiges an Mehrarbeit.

Auch die Performance kann ein Ausschlusskriterium sein. Electron bringt durch den Umweg über Chromium zum Rendern der Benutzeroberfläche einiges an Overhead mit. Performanceprobleme sind zwar in der Regel lösbar, aber auch das erfordert je nach Anwendungsfall mitunter zusätzlichen Aufwand. Eine native Desktopanwendung wird standardmäßig immer ein bisschen performanter sein.

In Betracht ziehen sollte man Electron daher vor allem dann, wenn eine Desktop-Version eine klar bessere User Experience als eine Webversion bedeuten würde oder die Web-APIs nicht ausreichen, um die Anwendung umzusetzen. Und natürlich muss der Kompromiss, den man mit Electron bei der Performance macht, für das Produkt akzeptabel sein.

In allen anderen Fällen ist eine native Desktopanwendung oder eine reine Webanwendung wahrscheinlich noch immer die bessere Wahl.

---

Foundation – unser Basis-Baukasten für datenbankbasierte Webanwendungen
ECMAScript 2015