© DrHitch/Shutterstock.com
Cross-Plattform

4 .exe, .app und Co.: Mit Electron werden Desktops froh


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 Kapitel des shortcuts haben wir uns die Grundlagen von Webanwendungen angeschaut, sprich HTML5, CSS3 und JavaScript – in Kombination mit dem Anwendungsframework Angular [1]. Die APIs von Star Wars [2] und Pokémon [3] haben unsere Anwendung mit Daten versorgt. Im zweiten Kapitel 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 Kapitel haben wir mithilfe von Apache Cordova [4] 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.

In diesem Kapitel 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.

Von Atomen und Elektronen

Electron [5], ehemals Atom Shell, ist ein Open-Source-Framework, das seit 2013 von GitHub entwickelt wird. Es kombiniert zum einen Node.js [6], das uns Zugriff auf das Betriebssystem ermöglicht, und zum anderen Chromium [7], 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 Kapitel des shortcuts, stellt Electron uns einen nativen Anwendungsrahmen zur Verfügung und integriert Node.js und Chromium. Abbildung 4.1 zeigt die Architektur von Electron.

image

Abbildung 4.1: Archi...

Neugierig geworden?

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