How-To

JavaScript-Framework Electron: Mit JavaScript zur Desktop-App

(Grafik: Electron)

Electron nutzt Webtechnologien, um Cross-Plattform-Anwendungen für den Desktop zu realisieren. Das hat das Open-Source-Framework von GitHub zu bieten und so startet ihr euer erstes Projekt.

JavaScript wurde ursprünglich für den Webbrowser entwickelt. ­Inhalte sollten sich ohne manuelles Nachladen dynamisch verändern können. Das wurde erst mit der Skriptsprache möglich, welche seit Jahren die meistverwendete Programmiersprache auf GitHub ist. Die sehr aktive Entwickler-Community erschafft immer wieder zahlreiche Tools, Frameworks und Bibliotheken, mit denen JavaScript schon lange nicht mehr nur für das Web zum Einsatz kommt. Dazu zählen mobile Cross-Plattform-Apps genauso wie Server- und eben auch Desktop­anwendungen – was seit 2013 mit Electron umgesetzt werden kann.

Die Umfrage „State of JavaScript 2018“ zeigt: Das Interesse an Electron ist unter Programmierern hoch. (Quelle: State of JavaScript 2018)

Seit mehr als fünf Jahren ist das Open-Source-Framework nun öffentlich. Im Dezember 2018 hat Electron auch den Sprung auf die neue Major-Version 4 gemacht. Dennoch haben 2018 ­lediglich rund 22 Prozent der befragten Teilnehmer in der jähr­lichen Entwickler­umfrage „State of JavaScript“ angegeben, bereits mit dem Framework gearbeitet zu haben. Aber das Interesse an Electron scheint riesig. Über 53 Prozent der Programmierer haben nicht nur von Electron gehört, sondern wollen es auch ausprobieren. Damit ist das Framework laut der Umfrage im Bereich Mobile und Desktop das Meistgefragte. Was macht Electron so besonders?

Electron vereinfacht Desktop-­Entwicklung

Eine Desktopanwendung zu entwickeln, ist mit immens vielen Herausforderungen verbunden. Dazu zählen unter anderem Packaging, die Update-Verwaltung oder das Lernen von neuen Programmiersprachen und Tools, wenn die Programmierer aus anderen Bereichen kommen – wie beispielsweise aus der Webent­wicklung. Auch das Bereitstellen der Anwendung für die verschiedenen Betriebssysteme Windows, MacOS und Linux stellt eine große Schwierigkeit dar. Vor allem wenn auch Features wie native Menüs oder Benachrichtigungen implementiert werden sollen.

Webanwendungen haben hingegen beim Thema Plattform­unabhängigkeit die Nase vorn. So gut wie jeder Nutzer hat ­einen Webbrowser installiert, der mit Unterstützung für HTML, CSS und JavaScript daherkommt. Meistens haben Browser wie ­Google Chrome oder Mozilla Firefox außerdem mächtige ­Debugging-Tools an Bord, die Programmierern die Arbeit zusätzlich erleichtern. Außerdem sorgt die riesige JavaScript-Community für ein stetiges Wachstum der Libraries und Frameworks.

Keine Frage: Auch bei der Webentwicklung gibt es einige Stolper­steine. Eine häufige Anforderung an eine Website ist die Unterstützung der vielen verschiedenen Browsertypen und älteren -versionen. Hinzu kommen die vielen verschiedenen Platt­formen: Das Design muss responsive sein, um auf Desktop, Tablet und Smartphone gut zu funktionieren, was den Aufwand schnell in die Höhe treiben kann. Hinzu kommt der eingeschränkte Zugriff auf das Dateisystem. Das direkte Lesen, Schreiben oder Erstellen von Dateien in einem konkreten Verzeichnis auf den Endgeräten ist nicht möglich – deswegen müssen Dateien immer separat hoch- oder heruntergeladen werden. Auch sind Web­anwendungen meist stark abhängig von einer guten Netzwerkverbindung.

Electron macht sich die Vorteile der Webentwicklung zunutze und überträgt sie auf die Desktopentwicklung. So bleiben ­Nachteile wie die Abhängigkeit von der Netzwerkverbindung und der beschränkte Zugriff auf das Dateisystem aus. Um plattform­übergreifende Desktop­anwendungen mit Webtechnologien wie JavaScript, HTML und CSS zu schreiben, werden Chromium und ­Node.js kombiniert: Chromium ist ein Open-Source-Browser, auf den unter anderem auch Google Chrome aufbaut. Die Kombination mit der asynchronen, eventbasierten JavaScript-Laufzeitumgebung Node.js sorgt dafür, dass eine Electron-Anwendung letztlich nichts anderes ist, als eine Art Webbrowser mit der Möglichkeit, auf das lokale ­Dateisystem zuzugreifen. Dateien normal zu lesen und zu schreiben, ist kein ­Problem mehr. Dabei sind die User-Interfaces letztlich nichts anderes als Websites – gestaltet mit HTML und CSS. Zugegeben: Es ist schwer vorstellbar, wie aus einer Internetseite eine Desktopanwendung entstehen soll. Doch Electron-Apps sehen keinesfalls mehr wie Websites aus. Durch die Entwicklung mit Webtechnologien ergeben sich sogar zahlreiche Vorteile. Die machen sich bereits einige Unternehmen zunutze: Verbreitete Software wie Slack oder Visual Studio Code setzen auf das GitHub-Open-Source-Projekt. Ob sinnvoll oder nicht: Selbst Spiele oder Fotobearbeitungstools sind mit dem ­Framework möglich.

Pro und Contra für den Einsatz

Wer in der Webentwicklung zu Hause ist, wird sich schnell in Electron einfinden, ist es doch letztlich ein JavaScript-Framework wie andere auch. Selbst auf Programmierneulinge dürfte ­Electron deutlich weniger abschreckend wirken als so manches andere Tool: Sowohl JavaScript als auch Node.js lassen sich vergleichsweise leicht erlernen. Zu den Vorteilen, die für Electron verbucht werden können, zählen automatische Updates, Absturzberichte sowie Debugging und Profiling. Auch können native ­Features wie Menüs und Benachrichtigungen mit wenig Aufwand genutzt werden.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung