Mobile-App-Entwicklung mit Ionic 3
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.
- Patrick Schnell
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.
