© TopStudio/Shutterstock.com
Einfache Desktopanwendungen mit Electron und React erstellen

Write once, run everywhere


Eine Desktopapplikation für ein bestimmtes Betriebssystem zu schreiben, ist heutzutage relativ einfach. Für die gängigen Betriebssysteme sind zahlreiche Entwicklungsumgebungen und Bibliotheken verfügbar, mit denen mit wenig Aufwand Anwendungen mit grafischer Oberfläche erstellt werden können. Allerdings sind die so erstellten Programme nicht plattformunabhängig. Hier setzt Electron als vielversprechende Lösung an.

Plattformunabhängige Desktopanwendungen zu schaffen, ist nicht wirklich ein Kinderspiel. Eine mit Visual Studio erstellte Windows-Applikation lässt sich unter Linux etwa nicht verwenden. Seit langer Zeit werden daher Möglichkeiten gesucht, eine Anwendung einmalig zu implementieren (write once), und sie dann ohne wesentlichen Zusatzaufwand für verschiedene Betriebssysteme bereitstellen zu können (run everywhere). Electron [1] ist ein weiterer Versuch, dieses Problem zu lösen. In diesem Artikel sehen wir uns anhand eines einfachen Beispiels an, wie eine Anwendung mit Electron und React implementiert und für verschiedene Betriebssysteme bereitgestellt werden kann.

Plattformunabhängige Programmierung

Seit Computer in Textform programmiert werden, besteht aus Sicht des Programmierers der Wunsch, ein Programm, das einmalig für einen bestimmten Computer geschrieben wurde, auch auf einem anderen Computer ausführen zu können. Der Grund liegt auf der Hand: Ist der Algorithmus für ein bestimmtes Problem korrekt formuliert, sollte es reichen, diese Arbeit einmalig durchzuführen, um das Programm in verschiedenen Umgebungen lauffähig zu machen. Zur Anfangszeit der Programmierung, als nur die maschinennahe Programmierung (Maschinensprache oder Assembler) verfügbar war, war das nicht gegeben, da diese Programmiertechniken es nicht erlaubten, eine Problemlösung bzw. einen Algorithmus unabhängig von der Ausführungsumgebung, der konkreten Maschine, zu formulieren. Die Lösung für dieses Problem war die Einführung der höheren Programmiersprachen. Diese erlaubten es, Algorithmen weitgehend unabhängig von der konkreten Ausführungsumgebung zu formulieren. Um die Programme ausführbar zu machen, wurden Übersetzerprogramme, Compiler und Interpreter eingeführt.

Eine typische Compilersprache ist etwa C. C wurde ursprünglich entwickelt, um Betriebssysteme schreiben zu können, die auf verschiedenen Computerarchitekturen lauffähig sein sollten. Ein C-Compiler übersetzt dabei den maschinenunabhängigen C-Code in für die konkrete Maschine ausführbaren Maschinencode. Soll das Programm für eine weitere Maschine verfügbar gemacht werden, muss es vorher mit dem Compiler für diese Maschine neu übersetzt werden. Die Übersetzung geschieht also, bevor das Programm ausgeführt wird.

Interpreter arbeiten anders: Ein Interpreter ist ein Programm, das auf der Zielmaschine läuft und maschinenunabhängigen Code zur Laufzeit in Maschinencode übersetzt. Der Quellcode für den Interpreter kann dabei Hochsprachencode sein (wie etwa in BASIC oder Skriptsprachen wie Python und Perl), oder bereits vorkompilierter Code (wie im Fall der Java Virtual Machine, die Java-Byte-Code ausführt, der vorher mit einem Compiler erzeugt wurde). In einer Interpretersprache geschriebener Code funktioniert prinzipiell auf allen Maschinen, auf denen ein entsprechender Interpreter zur Verfügung steht (sofern die Sprache und die Interpreter standardisiert sind).

Wenn heutzutage von Plattformen gesprochen wird, so sind damit nicht nur konkrete Maschinenarchitekturen gemeint, sondern Klassen von Umgebungen, die neben Hardwareeigenschaften auch Software teilen. In den meisten Fällen wird eine Plattform dabei durch die verwendete Hardware und das dazugehörige Betriebssystem gekennzeichnet. Entsprechend bedeutet plattformunabhängige Programmierung in diesem Zusammenhang die Bereitstellung der Software für verschiedene Betriebssysteme. Für den Zugriff auf spezielle Funktionalität, wie etwa GUI-Elemente, wird dabei dann meist noch eine RTE (Runtime Environment) benötigt, die diese Funktionen für die jeweilige Plattform bereitstellt. Bei Code, der in einer Interpretersprache bereitgestellt wird, gehört zur RTE unter Umständen auch der Interpreter.

Electron-Grundlagen

Programmiert man mit HTML und JavaScript Anwendungen für den Browser, ist der Browser selbst die Ausführungsumgebung. Da es für die meisten Betriebssysteme Browser gibt, die weitgehend kompatibel sind, stellt die Bereitstellung von Anwendungen auf Basis dieser Technik keine Schwierigkeit dar. Die Anwendungen sind automatisch betriebssystemübergreifend lauffähig. Das ist einer der Gründe, warum Webtechnik für das Schreiben von Anwendungen attraktiv ist.

Allerdings hat die Ausführung im Browser auch Nachteile. Anwender von Desktopbetriebssystemen sind es gewohnt, spezialisierte Applikationen für bestimmte Zwecke verwenden zu können. Gegenüber der Benutzung von Browseranwendungen gibt es unter anderem folgende Unterschiede:

  • Die Anwendungen können unabhängig voneinander und vom Browser gestartet, beendet und positioniert werden.

  • Anwendungen können eigene Eigenschaften haben, wie etwa eine feste Fenstergröße.

  • Ein Wechsel zwischen den Anwendungen erfolgt über die Mittel des Betriebssystems – etwa über ALT + TAB oder die Taskleiste unter Windows.

  • Die Anwendungen laufen als eigenständige Betriebssystemprozesse und können im Fehlerfall auch isoliert beendet werden.

Die Arbeit mit eigenen Desktopanwendungen gestaltet sich dabei für die Anwender aufgrund der genannten Punkte deutlich handlicher. Außerdem kann der Browser dafür verwendet werden, für das er in in vielen Fällen noch hauptsächlich benutzt wird – zum Navigieren und Recherchieren im WWW – und wird nicht durch die Darstellung anderer Anwendungen blockiert.

Electron ermöglicht es nun, Anwendungen auf Basis von Webtechnik als Desktopanwendungen bereitzustellen. Die Technik ist mittlerweile sehr ausgereift, so basieren etwa der Editor Atom [2] und Microsofts Visual Studio Code [3] darauf. Als Grundlagen werden Node. js und Chromium verwendet.

Um eine Electron-Anwendung zu erzeugen, muss zuvor eine Webanwendung vorliegen, die dann mit einem speziellen Verarbeitungsschritt in eine Desktopanwendung überführt wird. Das ähnelt äußerlich der Verwendung eines Compilers, funktioniert aber etwas anders. JavaScript-Code, HTML-Code und ein Chromium-Browser werden dazu so zusammen gebündelt, dass eine ausführbare Datei entsteht, die wie alle anderen Desktopanwendungen gestartet werden kann. Beim Start wird dann zunächst die Laufzeitumgebung (die Browserkomponente) innerhalb eines nativen Betriebssystemfensters gestartet, und in dieser die Webanwendung ausgeführt. Das bedeutet:

  • Der Rahmen des Anwendungsfensters wird durch das Betriebssystem bzw. durch den verwendeten Windowmanager vorgegeben, ebenso die dazugehörigen Controls zum Schließen des Fensters etc.

  • Der Inhalt des Anwendungsfensters wird durch den in JavaScript, HTML und CSS implementierten Anwendungscode festgelegt. Er ist weitestgehend unabhängig vom verwendeten Betriebssystem.

Wir werden jetzt an einem Beispiel zeigen, wie die Überführung einer Webanwendung in eine Electron-Desktopanwendung konkret durchgeführt werden kann.

Fallbeispiel

Um das Beispiel einfach zu halten, setzen wir eine sehr einfache Anwendung, einen Teetimer, wie es ihn in vielen Haushalten als kleinen Kurzzeitmesser gibt. Er...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang