© DrHitch/Shutterstock.com
Shortcuts
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.

Shortcut Autorenteam


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 ElektronenElectron [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.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 Chrom...

Shortcuts
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.

Shortcut Autorenteam


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 ElektronenElectron [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.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 Chrom...

Neugierig geworden?


    
Loading...

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