zurück zum Artikel

Nach etwa einem Jahr Entwicklungszeit haben die Macher von Ionic Anfang 2017 den Nachfolger des erfolgreichen App-Frameworks vorgestellt. Er ist eine komplette Neukonstruktion und macht vieles besser als der Vorgänger. Seit April steht zudem Version 3 mit Optimierungen bereit.

Das Entwickeln von Smartphone- und Tablet-Apps gestaltet sich durch die vielen Werkzeuge auf dem Markt immer angenehmer und nervenschonender. Vor allem das Umsetzen plattformübergreifender Apps mit HTML5, CSS3 und JavaScript hat durch Projekte wie Apache Cordova einen enormen Schub erhalten und gilt noch immer als die Lösung, wenn eine App auf unterschiedlichen Plattformen laufen muss.

Die Anfänge von Ionic

2013 begann das damals unter dem Namen Drifty bekannte Unternehmen, ein Framework zum Implementieren plattformunabhängiger Anwendungen zu erstellen. Als Leitfaden diente die Idee eines modularen Werkzeugs, das angesehene Open-Source-Projekte nutzt und als All-in-one-Paket für Entwickler dienen sollte.

Die erste Version von Ionic zeichnete sich durch eine umfangreiche Kommandozeilenanwendung aus, die sämtliche Stationen der Entwicklung vereinte – vom Installieren einzelner Module, über das Erstellen von Splashscreens für alle Gerätevarianten bis hin zum Debuggen und Packen der eigenen App. Einen weiteren Pluspunkt stellte die selbsterklärende Dokumentation dar. Mit Version 1 wurden bis zum Entwicklungsbeginn von Ionic 2 über 1,3 Millionen Apps entwickelt.

Die erste Version legte ihren Schwerpunkt auf iOS-Anwendungen. Demnach war ein Theming und Styling für andere Plattformen vergleichsweise mühselig und in Eigenarbeit durchzuführen. Außerdem konnte Ionic nicht mit Googles Material Design arbeiten, was für viele Entwickler ein ernst zu nehmendes Manko darstellte.

Wie Ionic 2 und 3 bot Ionic für die Business-Logik-Schicht mit AngularJS eines der bekanntesten MVVM/MVC-Frameworks an. Das war besonders für den Umstieg von Entwicklern hilfreich, die ausschließlich Desktop-Systeme programmieren, da sie wie gewohnt die Oberfläche von der Logik- und Datenschicht trennen konnten. Da AngularJS aber auf JavaScript basiert, waren diejenigen, die sich auf Typisierung verlassen wollten, gezwungen, die auf JavaScript aufsetztende Sprache TypeScript von Hand zu integrieren.

Für die zweite Hauptversion hat das Ionic-Team vor allem auf die aktive Community um das Framework gehört. Das Update nutzt Apache Cordova, Node.js und Angular 2, das sich etwa gleichzeitig in der Entwicklung befand.

Überall mobil mit Cordova

Heutzutage laufen nahezu alle plattformunabhängigen Apps in einer Cordova-Umgebung. Das Framework stellt folglich die Grundstruktur der Anwendung für die einzelnen Plattformen dar. Dem Rumpf entspricht die Seite, die entsprechende JavaScript-Dateien ausführt. Die Grundanwendung setzt sich immer aus einem nativ laufenden Template und den passenden Cordova-Plug-ins zusammen.

Cordova bietet ebenfalls eine Abstraktionsschicht zur Hardware-Integration. Ein Großteil der plattformspezifischen Schnittstellen ist im Kernprojekt enthalten. Weitere nützliche Plug-ins finden sich frei verfügbar im Netz. Somit läuft beispielsweise das Auslesen der GPS-Position in JavaScript auf egal welcher Plattform gleich ab. Im Hintergrund führt das System für jede Plattform unterschiedlichen nativen Code aus. Ionic 3 baut mit den enthaltenen Tools die App zu einer Cordova-Anwendung zusammen, die sich anschließend als fertiges Paket auf den Geräten ausführen und in den einzelnen App-Stores einreichen lassen.

MVVM/MVC-Pattern in einer HTML-App

Aufgrund der fehlenden Typisierung von AngularJS haben sich die Entwickler für Ionic 3 für das wesentlich performantere und auf TypeScript basierende Angular 4 entschieden. Es verfolgt denselben Grundgedanken wie AngularJS, ermöglicht aber unter anderem eine ernsthafte Modularisierung der Anwendung. Entwickler, die mit objektorientierten und typisierten Programmiersprachen wie Java oder .NET vertraut sind, sollten sich schnell einarbeiten können.

Darüber hinaus bieten die Tools von Ionic 3 weitere Hilfsmittel für Entwickler. So können Letztere zum Beispiel eine Seite, eine Komponente (Steuerelement) oder einen Provider über die Kommandozeilenschnittstelle erstellen. Hierfür legt das Werkzeug einen entsprechenden Ordner und die etwa zu einer Seite gehörigen Dateien (HTML-Datei für die Oberfläche, Stylesheet und die TypeScript-Klasse) automatisiert an der richtigen Stelle an. Außerdem verknüpft es die TypeScript-Klasse (die den Controller beziehungsweise das ViewModel darstellt) gleich mit dem entsprechenden Template (der HTML-Datei).

Der Aufruf sieht zum Beispiel wie folgt aus:

ionic generate page about-page

Ein weiterer zentraler Punkt von Angular 4 ist Dependency Injection. Hierfür registrieren Entwickler sämtliche Seiten, Komponenten und Provider in einer vordefinierten Klasse, dem Einsprungspunkt der Anwendung. Alle injizierbaren Bausteine (sogenannte Injectables) lassen sich in den jeweiligen Konstruktoren beispielsweise einer Seite anfordern.

UIs & Entwicklung

Plattformübergreifende Oberflächen

HTML5 und JavaScript plattformübergreifend zum Laufen zu bringen, ist seit etlichen Jahren keine große Kunst mehr. Der Kritikpunkt an damit implementierten Apps war jedoch, dass sie nie ein natives Look-and-Feel aufweisen konnten und sie so im Vergleich mit Originalanwendungen hinten anstand. Das hat sich durch neue Plattformen und Designrichtlinien nicht gerade verbessert.

Viele Frameworks für das Erstellen von HTML5-Apps sind meist auf eine einzelne Plattform spezialisiert. Die Umsetzung erfordert somit den Kompromiss, dass etwa eine Android- wie eine iOS-App aussieht. Die zweite Variante, unterschiedliche GUI-Frameworks einzusetzen, scheint technisch wie ökonomisch die schlechteste.

Der Erfolg von Ionic, aber vor allem Ionic 2 und 3 beruht neben den eingesetzten Frameworks auf der Tatsache, dass sämtliche Komponenten für unterschiedliche Plattformen (iOS, Android und Windows) angepasst vorliegen. Die Entwickler haben alle Design-Guidelines so umgesetzt, dass ein Unterschied zu den nativen Kontrollelementen fast nicht erkennbar ist. Gut zu sehen ist das zum Beispiel bei einer Seite, die Tabs enthält: Unter iOS werden die einzelnen Reiter am unteren Bildschirmrand dargestellt, bei Android und Windows oben.

Entwicklern steht allerdings Raum für Anpassungen zur Verfügung, da Ionic sämtliche Stylesheets mit Sass generiert und so das Verwenden von Variablen und die Vererbung einzelner Styles ermöglicht. Dadurch lässt sich beispielsweise vergleichsweise schnell ein Kontrollelement grundsätzlich oder für eine Plattform anpassen.

CLI und Entwicklungsumgebung

Wie bei den meisten HTML5- und JavaScript-Apps ist die Wahl der Entwicklungsumgebung eine subjektive Entscheidung. Gleiches gilt für Ionic-Anwendungen, wobei es jedoch lohnt zu beachten, welche IDEs den Einsatz von Kommandozeilentools erleichtern oder gar Plug-ins für die Ionic-3-CLI mitbringen.

Das Kommandozeilen-Interface ist das zentrale Werkzeug für die App-Entwicklung und hilft nicht nur beim Packen und Bauen der Anwendung, sondern auch beim Erstellen einer Site. Dazu kommen weitere Tools, die beispielsweise das automatisierte Anlegen von Plattformen und das Generieren von Icons und Splash-Screens sowie die zentrale Verwaltung der Cordova-Plug-ins übernehmen.

Nach Erfahrung des Autors zählt Visual Studio Code von Microsoft zu den IDEs, die mit der Integration von Ionic am besten klar kommen und ausreichend Erweiterungen bereitstellen. "Ionic 2 Commands & Snippets for VS Code" etwa ermöglicht den Einsatz der CLI im Editor. Mit entsprechenden Shortcuts ist in wenigen Schritten die Anwendung im Browser gestartet oder eine neue Komponente angelegt. Die entsprechenden Snippets sorgen dafür, ständig wiederkehrende Elemente (zum Beispiel eine einfache Liste) zeitsparend einfügen zu können.

Mit der Entwicklung beginnen

Um eine Ionic-App entwickeln zu können, muss eine aktuelle Version des Node.js-Frameworks auf dem Arbeitsrechner vorliegen. Von hier an funktioniert alles plattformübergreifend.

Zum Installieren von Ionic und Cordova reicht folgender Befehl:

npm install ionic cordova -g
 

Um ein Projekt anzulegen, ist im gewünschten Verzeichnis über die Kommandozeile

ionic start meineApp --v2 
 

auszuführen. Der Parameter meineApp steht für den ausgewählten App-Namen. Nun lädt das Framework das aktuelle Ionic-2-Template herunter und kopiert es in den Unterordner meineApp.

Im Template befinden sich nun der Grundstamm der App, der alle zwingend erforderlichen Konfigurationen und Module enthält.

Für Entwickler ist in erster Linie der src-Ordner von Bedeutung, da in ihm die Quelltexte lagern. Um Neueinsteiger zu unterstützen, ist der Ordner mit einer kleinen Demo-Anwendung befüllt. Sie besteht aus der App mit einer Registrierung der unterschiedlichen Anwendungskomponenten und vier Seiten.

Anfängern empfiehlt es sich, sich eine Weile mit der Demo zu beschäftigen, einige Seiten anzupassen oder sich mit Dependency Injection und der Registrierung der einzelnen Anwendungskomponenten vertraut zu machen. So fällt es am leichtesten, die Zusammenhänge zwischen Ionic 3, Angular und Cordova zu erkennen.

Testing & Cloud

Apps testen

Nachdem alles für die Entwicklung vorbereitet ist, soll eine lauffähige App entstehen, die sich im Anschluss testen lässt. Dafür kommt erneut die Ionic-3-CLI zum Einsatz. Der Vorteil von HTML5-Apps liegt darin, dass keine trägen Emulatoren oder VMs einzusetzen sind, um die Funktion der Anwendung zu prüfen. Die Apps lassen sich einfach im Browser ausführen und debuggen. Mit dem Befehl

ionic serve
 

lässt sich ein Webserver starten, der nicht nur die App für den Browser hostet, sondern standardmäßig nachlädt, sobald sich die App geändert hat. So ist es möglich, Änderungen "on the fly" umzusetzen und die Ergebnisse live zu sehen, ohne dass die Anwendung komplett neu kompiliert und auf das Gerät übertragen werden muss.

Eine weitere Annehmlichkeit bietet das Anhängen des Parameters --lab an den gerade gezeigten Befehl. Im Browser ist es durch ihn möglich, die Apps im Design der drei Plattformen (iOS, Android und Windows) parallel zu begutachten und zu nutzen. Änderungen der Gestaltung lassen sich so ebenfalls schnell und zügig umsetzen und etwaige Interferenzen der Anpassungen mit dem Plattform-Design ausschließen.

Auf dem mobilen Gerät

Sobald die App im Browser läuft, ist es an der Zeit, sie fit für Smartphone und Tablet zu bekommen. Ab dem Punkt wird es leider wieder plattformspezifisch.

Am einfachsten ist es, die Anwendung auf ein Android-Gerät zu bringen. Notwendig sind hierfür ausschließlich das Android Development Kit und das dazugehörige Java Development Kit (JDK). Sobald die Installation der beiden Komponenten abgeschlossen ist, ist der Anwendung die entsprechende Plattform hinzuzufügen. Das geschieht wie nahezu alles unter Ionic 3 über die Kommandozeile:

ionic platform add android
 

Nun lädt das System das entsprechende Cordova-Projekt und bereitet alles für das Kompilieren der eigenen Anwendung vor. Letztere lässt sich nun über folgenden Befehl auf dem angeschlossenen Android-Gerät (USB-Debugging muss aktiviert sein) ausführen oder in einem definierten Emulator starten:

ionic run android
 

Nun fasst Ionic alle TypeScript-Dateien beziehungsweise Sass-Stylesheets zusammen und kompiliert sie als JavaScript-Datei beziehungsweise CSS-Stylesheet. Nach einer kurzen Zeit und einigen Einzelschritten, die das Framework im Hintergrund ausführt, startet die App auf dem Smartphone, Tablet oder im Emulator.

Das Vorgehen für iOS oder Windows ist ähnlich. Jedoch ist zum Kompilieren einer iOS-Anwendung, sofern es lokal geschehen soll, zwingend ein Mac erforderlich und die entsprechenden Apple-Geräte müssen im Entwickler-Portal des Unternehmens freigeschaltet worden sein. Unter Windows ist zum kompilieren der Anwendung ein PC mit Windows und den notwendigen Developer-Tools notwendig. Auf den Windows-Geräten muss dann lediglich der Entwickler-Modus aktiviert werden.

Ionic Cloud

Wer keinen Mac zur Hand hat oder sich nicht auf unterschiedlichen Plattformen mit dem Build-Vorgang und den SDKs herumschlagen möchte, kann auf Ionics Cloud-Dienst zurückgreifen. Er bietet neben einem Build-Dienst auch Cloud-Services, die sich direkt in die Ionic-Apps einbinden lassen. Darunter fallen beispielsweise Analyse-Dienste, ein Push-Notification- und ein Anmeldedienst, der etwa die Integration der Anmeldung durch soziale Netze (Facebook, Twitter) übernimmt. Bei Bedarf lassen sich die Services zum Beispiel um eine Echtzeit-Dokumentendatenbank und einen Feedback-Service erweitern.

Um das alles nutzen zu können, müssen sich Entwickler einen vorerst kostenlosen Basis-Account einrichten. Über eine Weboberfläche lassen sich alle App-Store- und Push-Server-Zertifikate der einzelnen Anbieter hochladen. Mit der Kommandozeile können Nutzer im Anschluss die gesamte Anwendung lokal packen und in die Cloud zu dem Build-Dienst übertragen. Dort wird die App für die entsprechende Plattform kompiliert und kann nachfolgend heruntergeladen werden.

Je nachdem, welcher Dienst in welcher Weise zum Einsatz kommt, wie zum Beispiel das Versenden von Push-Benachrichtigungen im großen Stil (ab einer Million Benachrichtigungen) oder Live-Updates der App (ab 100.000 Geräte), ist ein kostenpflichtiger Account nötig, und es fallen entsprechende Gebühren an.

Fazit

Wenn es darum geht, mobile Anwendungen mit aktuellen Techniken umzusetzen, ist das Ionic-Framework durchaus zu empfehlen. Von der Installation ab ist schnell klar, dass es sich um ein Framework von Entwicklern für Entwickler handelt. Die einfache Handhabung über das Kommandozeilen-Interface sowie die Unmengen an mitgelieferten Werkzeugen helfen, die eigene App schnell umsetzen und testen zu können. Die Community trägt ihren Rest dazu bei. Natürlich gibt es hin und wieder Änderungen zwischen Updates, die zur Nacharbeit zwingen. Jedoch halten sich diese in Grenzen und fallen bei anderen Frameworks erfahrungsgemäß ähnlich aus.

Patrick Schnell [1]
entwickelt seit ca. 10 Jahren Software im .NET-Umfeld und beschäftigt sich seit einigen Jahren mit Cloud- und App-Services, sowie der Umsetzung von hybriden Apps. (jul [2])

URL dieses Artikels:
https://www.heise.de/-3690003

Links in diesem Artikel:
[1] http://schnell.technology
[2] mailto:jul@heise.de

Copyright © 2017 Heise Medien