Manuel Rauber Thinktecture AG

Mit Electron haben wir die Möglichkeit, unsere bestehende Webanwendung in native Container für den Desktop zu paketieren und zu verteilen.

Vom einfachen Texteditor über Mailprogramme und vollwertige IDEs bis hin zu 3-D-Anwendungen lassen sich alle möglichen Anwendungsfälle mit der Kombination aus HTML5, CSS3 und JavaScript abbilden. Soll sich die Anwendung wie zu Hause fühlen, muss sie sich oftmals auch ins Betriebssystem integrieren, um dem Benutzer den besten Komfort zu ermöglichen. Mit Electron wird die Möglichkeit geschaffen, aus dem Web heraus auf die Betriebssystem-APIs zuzugreifen.

Im ersten Teil der Artikelserie haben wir uns die Grundlagen von Webanwendungen angeschaut, sprich HTML5, CSS3 und JavaScript – in Kombination mit dem Anwendungsframework Angular. Die APIs von Star Wars und Pokémon haben unsere Anwendung mit Daten versorgt. Im zweiten Teil der Serie haben wir uns mit dem Angular CLI vertraut gemacht und wie es uns als Build-System unterstützen kann. Dazu haben wir uns Begriffe wie Tree Shaking und Ahead-of-Time Compilation detaillierter angesehen und welche Auswirkung dies auf die Performance und Anwendungsgröße hat. Im dritten Teil haben wir mithilfe von Apache Cordova unsere Anwendung in einen echten nativen mobilen Container verpackt, sodass die Anwendung als native App auf mobilen Betriebssystemen wie Android oder iOS lauffähig war. Wir haben hierbei das native „Teilen“-API angesprochen, um die „Teilen“-Funktion des Betriebssystems zu benutzen. Das ermöglichte uns, unser Pokémon mit unseren Freunden via WhatsApp, Twitter, Facebook oder weiteren Anwendungen zu teilen.

Wie auch die ersten drei Teile, wird dieser Teil der Artikelserie durch eine Beispielanwendung begleitet, die auf GitHub zu finden ist. Es empfiehlt sich, den Code zum Artikel zu öffnen, da im Artikel nur Ausschnitte gezeigt werden können. In diesem Teil schauen wir uns genauer an, wie wir unsere Webanwendung als echte Desktopapplikation, also als .exe oder .app, paketieren können und wie wir Zugriff auf Betriebssystem-APIs erhalten. Zudem erweitern wir das Build-System, sodass wir das Paketieren automatisieren können.

Artikelserie

  • Teil 1: Moderne Cross-Plattform-Applikationen mit Angular
  • Teil 2: Von Dev bis Prod: Cross-Plattform-Build-Systeme
  • Teil 3: Touch it: Native Application Packaging mit Apache Cordova
  • Teil 4: .exe, .app und Co.: Mit Electron werden Desktops froh
  • Teil 5: Apps ohne App Store? Cutting Edge mit Progressive Web-Apps

Von Atomen und Elektronen

Electron, ehemals Atom Shell, ist ein Open-Source-Framework, das seit 2013 von GitHub entwickelt wird. Es kombiniert zum einen Node.js, das uns Zugriff auf das Betriebssystem ermöglicht, und zum anderen Chromium, die Open-Source-Variante von Google Chrome zur Anzeige unserer Webanwendung. Auch andere Entwickler setzen auf Electron, um ihre Anwendung auf dem Desktop zur Verfügung zu stellen, bspw. Discord, Slack, Atom oder Visual Studio Code.
Ähnlich wie bei Cordova aus dem dritten Teil der Artikelserie, stellt Electron uns einen nativen Anwendungsrahmen zur Verfügung und integriert Node.js und Chromium. Abbildung 1 zeigt die Architektur von Electron.

Abb. 1: Architektur einer Electron-basierten Anwendung

Abb. 1: Architektur einer Electron-basierten Anwendung

Das Architekturbild zeigt auf, dass jede Electron-Anwendung aus zwei Prozessen besteht. Die Basis bildet hierbei der Node.js-Prozess (Electron Main Process). Der Main-Prozess hat zwei Aufgaben. Zum einen kann er jegliche Node.js-Module benutzen, somit auf alle Betriebssystem-APIs zugreifen und sie der Webanwendung zugänglich machen. Zum anderen kümmert sich der Prozess um das Starten des zweiten Prozesses, dem Electron Rendering Process. In dem Rendering-Prozess läuft ein Chromium-basierter Browser, natürlich ohne den typischen Anwendungsrahmen (wie z. B. die Adress- oder Favoritenleiste), aber mit vollständigen Entwicklertools (Chrome Dev Tools) zum Debuggen. Innerhalb dieses Prozesses wird unsere Webanwendung geladen und dargestellt.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 8.17 - "Auf Nummer sicher"

Alle Infos zum Heft
579804760Native Desktop-Integrationen von Web-Applikationen
X
- Gib Deinen Standort ein -
- or -