Wenn es um den Desktop geht, verwenden die meisten von uns ihn lediglich, um über den Browser auf webbasierte Inhalte zuzugreifen, Microsoft Office zu nutzen oder Spiele zu spielen. Je nach Beruf oder Hobby können auch Designer-, Kommunikations- und Entwicklertools hinzukommen. Trotz der begrenzten Rolle, die der Desktop und Desktop-Apps spielen, hat diese Rolle eine große Zielgruppe, die darauf angewiesen ist.
Wenn du eine App entwickelst, wie kannst du den Desktop ansprechen? Der Desktop ist keine einheitliche Einheit. In der obersten Kategorie besteht er aus Windows, macOS und Linux. Wenn man noch einen Schritt weiter geht, gibt es mehrere Versionen von Windows und macOS sowie zahlreiche Variationen von Linux-Distributionen. Die Entwicklung einer App für jede dieser Plattformvarianten ist nicht einfach oder billig. Jede Plattform hat ihre eigenen Eigenheiten bei der Entwicklung, die sich in Sprachoptimierungen, der Verfügbarkeit von APIs, den Vorlieben bei den Toolchains und vielem mehr zeigen. Es war lange Zeit undenkbar, eine App zu entwickeln, die plattformübergreifend auf mehreren Desktop-Betriebssystemen funktioniert, es sei denn, du gehörst zu einem gut finanzierten Team. Doch dann kam dieses kleine aufstrebende Framework namens Electron:
Electron hat das Entwickeln plattformübergreifender Desktop-Apps einfach gemacht und macht es weiterhin. Die damit erstellten Apps werden vollständig in HTML, CSS, JS und einem verbundenen Werkzeugsystem geschrieben. Electron wird offiziell von Github betreut, hat aber eine sehr aktive Community dahinter. Heute sind einige der beliebtesten Desktop-Apps (von vielen wahrscheinlich genutzte) vollständig in Electron geschrieben, wie zum Beispiel Atom, Visual Studio Code, Slack, Microsoft Teams, Github Desktop, Whatsapp Desktop, Figma Desktop und vieles mehr. In vielerlei Hinsicht hat Electron den Desktop-Entwicklungsbereich wiederbelebt, der lange Zeit vernachlässigt wurde, während die mobile Entwicklung alle Aufmerksamkeit erhielt.
In diesem Artikel werden wir uns beide Seiten der Electron-Geschichte ansehen. Wir werden uns ansehen, was Electron so beliebt und beliebt macht. Wir werden uns auch etwas genauer mit einigen Kontroversen rund um Electron befassen und warum nicht alle restlos begeistert sind.
Los geht’s!
Was ist Electron?
Auf der grundlegendsten Ebene ist Electron ein umfassendes Framework zum Erstellen von Desktop-Apps mit Webtechnologien. Was es auszeichnet, sind ein paar große Dinge:
-
Die von Ihnen erstellten Desktop-Apps sind plattformübergreifend und funktionieren unter Windows, Linux und macOS, ohne dass mehrere Code-Basen erforderlich sind.
-
Sie schreiben Code in gewöhnlichem HTML, CSS und JavaScript und verwenden die Tools und Web-Frameworks/Bibliotheken, mit denen Sie bereits vertraut sind.
-
Ihr Webcode kann auf nativen System-APIs und praktisch allem anderen auf dem Computer zugreifen.
-
Installation und automatische Aktualisierung werden kostenlos bereitgestellt.
-
Ihr Code und die zugehörigen Inhalte können lokal in Ihrer App oder von einem Server aus bereitgestellt werden, ähnlich wie bei einer Hybrid-App.
In den folgenden Abschnitten werden wir etwas genauer auf einige dieser Punkte eingehen.
Entwicklererfahrung
Um eine Kultur wirklich schätzen zu können, müssen wir deren Essen probieren (oder mit ihren Menschen sprechen… wer weiß). Um etwas über ein Framework zu erfahren, konzentrieren wir uns am besten auf die Entwicklererfahrung. Der Weg, auf dem du eine Electron-App entwickeln würdest, ähnelt sehr dem Weg, wie du heute eine moderne/progressive Web-App entwickeln würdest. Du kannst Visual Studio Code, Atom, Vim, Emacs, Visual Studio oder deinen bevorzugten Code-Editor verwenden. Deine bevorzugten Client-seitigen Bibliotheken wie React, Redux, Angular, lodash, ramda usw. funktionieren genauso. Du kannst sogar die Chrome-Entwicklertools zum Debuggen und Untersuchen dessen verwenden, was deine Electron-App tut.
Ein Grund, warum der Workflow so vertraut ist, liegt darin, dass eine Electron-App im Kern eigentlich nur eine Web-App ist. Zumindest fast. Ein wesentlicher Unterschied besteht darin, wie eine App in Electron aufgebaut ist.
Architekturüberblick
Normalerweise würden wir annehmen, dass der Ausgangspunkt für eine Web-App eine HTML-Seite ist. Das trifft jedoch nicht auf Electron-Apps zu. In einer Electron-App ist der Ausgangspunkt für deine App eine JavaScript-Datei, die als Controller für das fungiert, was deine App tun wird. Der Code, der hier lebt, ist unter anderem dafür verantwortlich, etwas HTML zu laden, das auf dem Bildschirm angezeigt werden soll. Die Art und Weise, wie das HTML angezeigt wird, geschieht durch ein webview-ähnliches Wesen namens BrowserWindow.
Wenn wir visualisieren müssten, worüber wir gerade gesprochen haben, würde die Architektur unserer Electron-App in etwa so aussehen:
Dein Betriebssystem befindet sich unten, die Electron-App läuft darauf mit unserem Controller-Skript und dem darin enthaltenen BrowserWindow. Wenn du lieber Code anstelle von Diagrammen betrachtest, habe ich gute Nachrichten für dich! Der folgende Code-Schnipsel, der aus der Electron-Dokumentation stammt, ähnelt unserem obigen Diagramm und zeigt, wie unser Start- /Controller-Skript ein BrowserWindow aufruft und eine HTML-Datei darin lädt:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
// and load the index.html of the app.
win.loadFile('index.html')
}
app.on('ready', createWindow)Die meisten realen Apps werden viel komplexer sein und mehr Code im Controller enthalten, als hier sichtbar ist. Sie werden auch viele BrowserWindow-Objekte haben, von denen jedes für einen Teil der Benutzeroberfläche der App verantwortlich ist.
Der Grund, warum wir so viel Zeit mit dem BrowserWindow verbringen, ist, dass es ein ziemlich wichtiges Element ist, dessen Implementierung und Verwendung es zu einer der wichtigsten Mitglieder in der API-Sammlung des Electron-Frameworks macht. Schließlich kann man sicher sein, dass immer wenn eine app-spezifische Benutzeroberfläche in einer Electron-App angezeigt wird, ein BrowserWindow dahintersteckt.
Es gibt eine oder zwei beliebte Komponenten, die alles tun, was das BrowserWindow-Objekt tut. Hier ist ein Hinweis: Es beginnt mit Chrome und endet mit ium.
Ich könnte den ganzen Tag über BrowserWindow sprechen, aber das werde ich nicht tun, weder zu deinem noch zu meinem Besten. Eine Sache, die du beachten solltest, ist, dass es noch viel mehr gibt, worüber wir sprechen könnten, was die Funktionsweise von Electron betrifft und einige der anderen wichtigen APIs, die ebenfalls wichtig sind. Wir haben hier die Grundlagen abgedeckt, aber wenn du mehr über die weniger wichtigen Details erfahren möchtest, schaue dir bitte die offizielle Dokumentation an.
Zugriff auf native Funktionen
Bisher haben wir uns nur mit den grundlegenden, alltäglichen Aufgaben befasst, die Electron unterstützt. Es gibt jedoch eine sehr ungewöhnliche Aufgabe, die Electron unterstützt, nämlich dass dein Webcode auf native APIs zugreifen kann.
Traditionelle Web-Apps können aus verschiedenen sicherheitsbezogenen Gründen nicht auf native APIs zugreifen, da die Browser-Sandbox dies verhindert. Electron bricht diesen Kreislauf. Electron hebt diese Sicherheitsgrenze auf, die von der Browser-Sandbox durchgesetzt wird und ermöglicht deinem Webcode, einfach auf native APIs zuzugreifen. Diese APIs werden Electron (normalerweise) über Node-Module plattformunabhängig zur Verfügung gestellt, sodass du dich nicht einmal darum kümmern musst, wie das Windows- oder macOS- oder Linux-Äquivalent einer API sein könnte. Hier ist zum Beispiel der Code zur Verwendung des nativen Menüs:
const { remote } = require('electron')
const { Menu, MenuItem } = remote
const menu = new Menu()
menu.append(new MenuItem({ label: 'MenuItem1', click() { console.log('item 1 clicked') } }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }))
window.addEventListener('contextmenu', (e) => { e.preventDefault() menu.popup({ window: remote.getCurrentWindow() }) }, false)Beachte, dass der Code nicht zeigt, wie man ein Menü für Windows, macOS oder Linux unterschiedlich instanziiert. Es gibt nur ein Menüobjekt, gegen das du deinen Code schreibst. Das Endergebnis sind plattformspezifische Menüs, die so aussehen und sich so verhalten sollen, wie sie sollten.
Die Möglichkeit, native APIs anzurufen, ermöglicht es Electron-Apps, sich auf Augenhöhe mit nativen Apps in Bezug auf Funktionen zu treffen. Diese Fähigkeit ist zweischneidig. Obwohl unsere Electron-App die Fähigkeit hat, extrem leistungsstark zu sein und mit einer nativen App vergleichbar ist, birgt sie auch Sicherheitsrisiken, wenn unser Webcode in irgendeiner Weise kompromittiert wird. Mit den Worten des großen Philosophen Optimus Prime: Mit großer Macht kommt große Verantwortung.
Installation, Aktualisierung und Verpackung
Eine der anspruchsvolleren Aufgaben beim Erstellen von Desktop-Apps ist das ordnungsgemäße Funktionieren von Installations- und Aktualisierungsvorgängen. Eine App auf einem Benutzergerät zu haben, ist nicht so einfach wie das Navigieren zu einer URL wie bei einer herkömmlichen Web-App… oder, wenn du eine Zeitmaschine hast, einer App, die ClickOnce oder einen Java-Installer verwendet. Glücklicherweise ist dies ein Bereich, in dem Electron alles vollständig abdeckt. Das Erstellen von Installationsdateien für Windows, macOS oder Linux ist so einfach wie das Ausführen eines einfachen Befehls. Du hast auch die Möglichkeit, Updates für deine App zu veröffentlichen und den wichtigen nächsten Schritt zu unternehmen, Benutzer darüber zu benachrichtigen, dass ein Update verfügbar ist.
Ein Beispiel dafür, wie dies in der Praxis aussieht, zeigt der folgende Screenshot der Github Desktop-App, der mich auffordert, auf eine neuere Version zu aktualisieren:
Wenn wir zur Installation zurückkehren, packt Electron ein paar Dinge zusammen, die bereitgestellt und auf den Geräten der Benutzer installiert werden:
- Der App-Code, einschließlich der Node-Module, von denen wir abhängen.
- Die allgemeinen Bibliotheken, die Electron zum Funktionieren benötigt.
- Der Open-Source-Webbrowser, auf dem Google Chrome basiert, Chromium.
- Die NodeJS-Laufzeit, mit der wir JavaScript in einer nicht-browserbasierten Umgebung schreiben können.
Wenn du dir diese Liste ansiehst, werden die ersten beiden Punkte wahrscheinlich viel Sinn ergeben. Was vielleicht überraschend ist, sind die letzten beiden Punkte, bei denen Electron Chromium und NodeJS bündelt:
Wenn du dich jemals gefragt hast, wie Electron es schafft, Webinhalte darzustellen und unseren Webcode auf native APIs und plattformübergreifende Arbeit aus einer einzigen Codebasis zugreifen zu lassen, dann kannst du dies zum großen Teil Chromium und NodeJS zuschreiben. Chromium repräsentiert unsere Darstellungsebene und das, worauf BrowserWindow angewiesen ist, um unser HTML, CSS und JS auszuführen. NodeJS ist der Klebstoff, den unser JavaScript verwendet, um außerhalb der Browser-Sandbox ausgeführt zu werden und auf native APIs zuzugreifen. Es bietet auch eine große Erweiterbarkeit und Zugriff auf den großen Ökosystem von Node-Modulen, die die App-Entwicklung enorm vereinfachen.
Durch das Bündeln von Chromium und NodeJS als Teil des App-Installers hat deine Electron-App eine bekannte und stabile Version beider Komponenten, mit der du weißt, dass deine App funktionieren wird. Dadurch wird das Testen viel einfacher. Wenn es eine andere Regelung gäbe, bei der die Electron-App die neueste Version von Chromium und NodeJS während der Installation herunterladen oder Benutzer die neueste Version manuell installieren würden, gibt es keine Garantie dafür, dass die App funktioniert, da sowohl Chromium als auch NodeJS zwischen den Versionen häufig Änderungen mit schwerwiegenden Auswirkungen einführen.
Electron ist ziemlich fantastisch!
Wenn wir alles bisher Gesehene zusammenfassen, können wir sagen, dass Electron die Entwicklung von Desktop-Apps sehr vereinfacht. Das gilt umso mehr, wenn du eine Desktop-App entwickelst, die plattformübergreifend funktionieren soll. Das gilt besonders, wenn du auch ein Webentwickler bist, da deine vorhandenen Fähigkeiten und Werkzeuge in der Electron-Welt natürlich funktionieren. Wenn es Electron nicht gäbe, müsstest du möglicherweise WebView-basierte Apps erstellen, für die du separate Code-Basen pflegen, separat testen und viele zeitaufwändige Aufgaben erledigen müsstest, die die plattformübergreifende Entwicklung zur Qual machen.
Warum die Kontroverse?
Viele der beliebten Apps, die wir auf dem Desktop verwenden, basieren auf Electron. Entwickler bauen im Allgemeinen gerne Electron-Apps. Das ist definitiv der Fall, wenn man die zusätzliche Arbeit betrachtet, die Entwickler wie du leisten müssten, um eine Desktop-App für mehrere Plattformen anderweitig zu erstellen. Trotz all dem gibt es jedoch eine gewisse unterschwellige Frustration in Bezug auf Electron. Wir werden uns einige der Gründe dafür ansehen.
Hoher Speicher- und Speicherplatzbedarf
Wenn dein Computer knapp an Speicher ist, ist eine Electron-App kein Freund von dir.
Das Ausführen von Chromium ist mit Kosten verbunden, und die Bezahlung erfolgt über den süßen SWEET-Speicher. Obwohl Chromium eine leichtgewichtige Version des Chrome-Browsers ist, ist es immer noch ein Browser – ein Komponente, deren Codezeilen und Komplexität mit dem umfangreichsten Apps mithalten können, die jemals geschrieben wurden.
Eine vollwertige Browserkomponente beansprucht auch viel Speicherplatz. NodeJS ist ebenfalls kein Leichtgewicht. Durch das Bündeln von Chromium und NodeJS in jeder App entsteht ein großer fester Kostenbetrag (~130MB), den du für den erforderlichen Speicherplatz benötigst. Das kannst du sehen, wenn du den Frameworks-Ordner inspizierst, der Teil der installierten Inhalte für jede Electron-App ist:
Du erhältst keine Skaleneffekte mit gemeinsam genutzten Komponenten wie Chromium und NodeJS, wenn du mehrere Electron-Apps installierst. Jede auf dem Gerät installierte Electron-App hat ihre eigene Kopie von Chromium und NodeJS. Selbst wenn mehrere Apps dieselbe Chromium- und NodeJS-Version verwenden, jede App befindet sich in ihrem eigenen Silo mit allem, was sie lokal benötigt. Das löst das Problem der Dateigröße nicht. Je nach Konfiguration des Aktualisierungsprogramms können auch N-1 oder N-2 Versionen deiner App auf der Festplatte vorhanden sein.
Sicherheitsprobleme
Wir haben zuvor darüber gesprochen, wie Electron deinem Webcode das Aufrufen von nativen APIs ermöglicht, indem es die Sicherheitsbarrieren entfernt, die im Browser vorhanden sind, um diesen Zugriff zu verhindern. Dies ist gut, um deine Electron-Apps leistungsfähiger und in der Lage zu machen, Dinge zu tun, die nur native Apps tun können. Der Nachteil ist, dass schlecht geschriebener oder bösartiger Code erheblichen Schaden anrichten kann. Electron ermöglicht es dir, auf Basis jedes BrowserWindow zu spezifizieren, ob der darin geladene Webcode Zugriff auf systemweite APIs benötigt oder nicht.
Diese Kontrolle gewährleistet, dass gut informierte Entwickler potenzielle Sicherheitsrisiken minimieren können. Schlecht informierte Entwickler können potenzielle Sicherheitsrisiken genauso leicht maximieren, indem sie allem BrowserWindow-Objekten Zugriff auf alles gewähren. Wie bei vielen Dingen auf dem Desktop liegt die Verantwortung letztendlich beim Endbenutzer, sich selbst zu schützen. Ein großer Grund dafür ist, dass Desktop-Apps weitgehend nicht von App-Stores und anderen Mechanismen reguliert werden, wie du sie in den (ironischerweise) besser entwickelten App-Stores für Mobilgeräte siehst.
Ein etwas komplizierteres Sicherheitsproblem entsteht durch die Geschwindigkeit, mit der Electron neue Builds von Chromium übernimmt. Chromium funktioniert nicht einfach automatisch mit Electron. Es ist viel Arbeit erforderlich, um sicherzustellen, dass alle verschiedenen Integrationspunkte, die Electron mit Chromium benötigt, weiterhin funktionieren, da sich die von Electron verwendeten Chromium-APIs mit jeder neuen Chromium-Version häufig ändern. Auf den ersten Blick scheint dies kein großes Problem zu sein. Das Problem tritt auf, wenn wir unsere Sicherheitsbrille aufsetzen:
Google patcht Chromium ständig mit Sicherheitskorrekturen, die von ihnen oder anderen identifiziert wurden. Jede neue Chromium-Version enthält in der Regel Sicherheitskorrekturen sowie funktionelle Verbesserungen. Wenn eine Electron-App in der Wildnis auf einer älteren Version von Chromium läuft, auf der die neuesten Sicherheitskorrekturen nicht angewendet wurden, können Angreifer Sicherheitslücken ausnutzen, die in den neuesten Chromium-Versionen bereits behoben wurden.
Generisches Erscheinungsbild
Wenn du ein Betriebssystem-Anbieter wie Apple, Microsoft oder ein Linux-Distro bist, gibt es den Wunsch, dass Desktop-Apps in einer Weise entwickelt werden, die das Look and Feel deiner Plattform respektiert:
Dies dient unter anderem der Konsistenz mit anderen bereits vorhandenen Apps auf der Plattform. Das ist zum Teil auch Eitelkeit geschuldet.
Electron-Apps bieten auf allen Plattformen häufig das gleiche Look and Feel. Obwohl es möglich ist, das Betriebssystem zu erkennen und eine andere visuelle Erfahrung zu bieten, tun dies die meisten Electron-Apps nicht. Das liegt nicht an technischen Herausforderungen. Viele Electron-Apps verwenden tatsächlich spezialisierte native Komponenten für eine bessere Unterstützung unter der Haube, abhängig von der Plattform, auf der sie ausgeführt werden, und den APIs, auf die sie zugreifen können. Der größere Grund ist jedoch, dass es gut ist, eine konsistente App-Erfahrung zu haben. Stell dir vor, Visual Studio Code, Slack oder Microsoft Teams würden auf jeder Plattform unterschiedlich aussehen. Der Aufwand für das Training von Teams würde sich multiplizieren, die Kommunikation über Funktionen wäre schwierig, deine Dokumentationsscreenshots müssten für jede Plattform speziell angepasst werden usw. Diese Bedenken sind besonders relevant in Unternehmens-/Geschäftsumgebungen, in denen Electron-Apps am häufigsten verwendet werden.
Fazit
Electron hat viele großartige Eigenschaften, aber auch einige Mängel. Wenn du ein Endbenutzer bist, möchtest du eigentlich nur eine App, die deine Probleme löst und dies auf eine Weise tut, die deinen Computer nicht verlangsamt. Um diesen Wunsch zu erfüllen, ist die ideale Lösung, eine native App zu entwickeln, die für jede Plattform, auf der du bereitstellen möchtest, optimiert ist. Die Realität sieht jedoch so aus: Die Entwicklung nativer Desktop-Apps ist schwierig, insbesondere beim plattformübergreifenden Einsatz. Der einfachste Weg, dieses Problem zu lösen, besteht darin, ein App-Building-Framework zu haben, das eine Mittelschicht einführt, gegen die du deinen Code schreibst. Die Mittelschicht kümmert sich um plattformbedingte Inkonsistenzen, und du konzentrierst dich nur auf die Entwicklung der Benutzererfahrung und der Funktionalität. Diese Lösung bietet Electron. Durch die Verwendung einer Mittelschicht auf Basis von Chromium und NodeJS steigen der Ressourcenverbrauch des Systems und die Entwicklungsvereinfachung. Welches dieser beiden extremen Bedürfnisse du optimierst, ist etwas, das du als Entwickler in Betracht ziehen musst, aber du kannst mit Electron nicht viel falsch machen.
Bevor wir abschließend noch ein Wort sagen, möchte ich dich daran erinnern, dass wir eine hilfreiche, kooperative Community mit über 220.000 anderen Entwicklern wie dir haben. Wenn du Fragen hast oder Teil davon sein möchtest, poste im Forum für schnelle Antworten!
