Im Rahmen unserer KEY-Talks haben wir uns das Cross-Platform Mobile App Development Framework Ionic v4 genauer unter die Lupe genommen. Wer sich mit dem Entwickeln von Apps sowohl für Android als auch iOS bereits beschäftigt hat, hat wahrscheinlich schon einmal davon gehört. Auch wir verwenden das Framework für unsere Entwicklungen. Ionic vereint viele verschiedene Technologien und Konzepte. Diese werden im Nachfolgenden erklärt.
Cordova
Cordova kann man sich als Kern von Ionic vorstellen, ist aber eigentlich ein von Ionic unabhängiges Cross-Platform Mobile App Development Framework von Apache. Mit ihm können mit herkömmlichen Webtechnologien (HTML, CSS, JavaScript) Apps mit nur einer Codebasis geschrieben werden, die auf Android, iOS und als Website veröffentlich werden können. Der Vorteil liegt also vor allem darin, dass man eine App sowohl in den Apple Store als auch in den Google Play Store deployen kann. In der Entwicklungsphase kann man einen Browser anstatt eines echten Gerätes oder Emulators verwenden.
Mit herkömmlichen Webtechnologien ist es allerdings nicht ohne weiteres möglich, auf gerätespezifische Funktionen wie Kamera, Gerätespeicher, Sensoren etc. zuzugreifen. Cordova löst dieses Problem über Plugins, wie z.B. „cordova-plugin-camera“ mit dem auf die Gerätekamera zugegriffen werden kann.
Arbeitet man mit einem Ionic Projekt, ist Cordova eher versteckt und man muss sich in der Regel nicht im Detail damit auseinandersetzen.
Angular
Womit man sich allerdings durchaus auseinandersetzen muss, ist das Front-End-Webapplikationsframework Angular. Es ist von Ionic standardmäßig für das Implementieren aller eigenen Funktionalität vorgesehen. Angular verwendet das Model-View-ViewModel Schema und ist ausgezeichnet für das Entwerfen von Single-Page-Webanwendungen, oft mobile Apps, geeignet. Eine der Stärken von Angular ist die Unterteilung einzelner Bestandteile der Webanwendung in Komponenten, was die Übersichtlichkeit, Wiederverwendbarkeit und Geschwindigkeit verbessern soll. Als Trade-off ist Angular dafür bekannt, für Einsteiger relativ kompliziert zu sein. Zur Komplexität trägt auch bei, dass Angular sich dazu entschieden hat, TypeScript statt JavaScript zu verwenden. Eine Programmiersprache, mit der viele Webentwickler noch nicht besonders vertraut sind.
TypeScript
TypeScript ist eine Programmiersprache, die JavaScript erweitert. Dadurch ist jedes JavaScript Programm auch ein korrektes TypeScript Programm. Trotzdem sollte man sich, wenn man TypeScript verwendet, mit den erweiterten Möglichkeiten der Sprache vertraut machen.
TypeScript erweitert JavaScript um viele Features, die vor allem bei der objektorientierten Programmierung helfen. Es wird deshalb oft als objektorientierte Programmiersprache beschrieben, während JavaScript als Skriptsprache bezeichnet wird. Neue Features sind statische Typisierung, Module, Interfaces und vieles mehr. Da ein Browser TypeScript nicht interpretieren kann, muss TypeScript-Code zu JavaScript kompiliert werden. Viele sehen dies als Pluspunkt, da Fehler gleich vom Compiler gefunden werden können, bevor der Code vom Browser verarbeitet wird.
Ionic
Ionic kombiniert also mehrere Technologien. Nun stellt sich die Frage, welche Features Ionic selbst bereitstellt.
Die Stärke von Ionic liegt in der Bereitstellung zahlreicher UI-Komponenten. Ähnlich wie herkömmliche Frontend-Frameworks, beispielsweise Bootstrap, wird das Programmieren eines User Interfaces dadurch stark vereinfacht. Diese Komponenten spiegeln das native Design meist automatisch wider. Ein Slider beispielsweise sieht also bei einem Deployment auf iOS automatisch wie ein iOS-nativer Slider aus, während bei einem Deployment auf Android ein Andriod-nativer Slider angezeigt wird. Im Vortrag des KEY-Events wurde live programmiert und gezeigt, dass dadurch eine optisch ansprechende App für verschiedene Geräte äußerst schnell entwickelt werden kann.
Ionic + Vue?
Neben Angular existieren noch weitere JavaScript-Frameworks nach dem Model-View-ViewModel Schema. Ein sehr bekanntes davon ist Vue. Da in unserem Unternehmen einige Programmierer mit Vue bereits vertraut sind, stellte sich die Frage, ob man Angular mit Vue austauschen kann, wenn man mit Ionic arbeitet.
Ionic + Vue ist als npm-Paket @ionic/vue in der Betaphase. Während man ein normales Ionic Projekt, nach der Installation von Ionic via npm, einfach mit ionic start initialisieren kann, muss bei der Verwendung von Vue ein anderes Vorgehen gewählt werden. Hier wird zuerst einmal ein Vue Projekt durch vue create *app-name* initialisert. Anschließend muss in das Verzeichnis der neuen Vue App navigiert und vue add router und npm install @ionic/vue ausgeführt werden. Außerdem müssen Änderungen an der Datei main.js vorgenommen werden. Eine ausführliche Anleitung ist unter
https://blog.ionicframework.com/announcing-the-ionic-vue-beta/ zu finden.
Das Setup ist also komplizierter. Dies wäre ein kleiner Preis, wäre das Programmieren mit Vue dann unproblematisch möglich. Bei dem anschließenden Entwerfen einer kleinen Test-App sind aber immer wieder kleine Stolpersteine aufgefallen. Das Ionic Command Line Interface, mit dem sehr einfach neue Komponenten, Seiten, Services etc. erstellt werden können, kann nicht verwendet werden. Ionic-Native Plugins, wie z.B. @ionic/storage funktionieren nicht, so muss auf Plugins von Cordova zurückgegriffen werden. Während Ionic Input Felder mit Angular via [(ngModel)]="variablenName" an eine Variable gebunden werden können, funktionierte das mit dem Vue Equivalent v-model="variablenName" nicht. Stattdessen muss man :value="variablenName" @input="variablenName = $event.target.value" schreiben, um das gewünschte Verhalten zu erzeugen. Es ist vorstellbar, dass sich weitere kleine Probleme bemerkbar machen, wenn man eine App mit großem Umfang programmiert.
Wenn man auf die Ionic-Nativen Plugins verzichten kann, kann man Vue also durchaus mit Ionic zusammen verwenden, unter Berücksichtigung der eben genannten Schwierigkeiten. Ionic + Vue befindet sich in der Betaphase. Es ist deshalb zu erwarten, dass demnächst viele Verbesserungen vorgenommen werden.
Fazit
Das Ionic Framework eignet sich exzellent zum Entwerfen von Cross-Platform-Applikationen. Durch das Zusammenspiel der verschiedenen Technologien kann der Einstieg kompliziert sein. Vue statt Angular zu verwenden lohnt sich nur, wenn man Angular unter allen Umständen vermeiden möchte und sich den Nachteilen bewusst ist.