Native Mobile Apps mit NativeScript-Vue entwickeln

2022 werden voraussichtlich jeden Tag über 700 Millionen Apps heruntergeladen werden. Mobile Apps punkten gegenüber smartphonetauglichen Webseites unter anderem mit besserer Zugänglichkeit und einem übersichtlicheren Design. Anfang 2020 wurden bereits 52% des Web-Traffics ausschließlich von mobilen Geräten verursacht. Mobile Ansätze zu verfolgen wird für Entwickler also ständig wichtiger.

Möchte man als Webentwickler ein mobiles Gegenstück für eine bestehende Webapplikation zur Verfügung stellen, kann das mit viel Aufwand verbunden sein. Native Lösungen müssen oft mit unterschiedlichen Technologien für Android und iOS umgesetzt werden. Am Ende hat man einen Webclient und zwei Apps, die einzeln gewartet und erweitert werden müssen, obwohl sie sich kaum voneinander unterscheiden. Es geht aber auch anders.

Mit NativeScript ist plattformunabhängiges Mobile Development auf JavaScript Basis möglich. Bestehende Business Logik kann somit wiederverwendet werden. TypeScript und gewohnte Frontend Frameworks wie Vue.js, Angular und React werden ebenfalls unterstützt.

^{https://nativescript.org/community/}

Zum Umsetzen unserer Apps haben wir uns für die Variante mit Vue und TypeScript entschieden, da wir mit Vue.js bereits vertraut sind. Außerdem ist, verglichen mit dem Implementierungsoverhead anderer Frameworks, Vues übersichtliche Syntax ein Vorteil. Für besonders große und komplexe Applikationen sind unter Umständen andere Frameworks, wie zum Beispiel Angular, besser geeignet.

Projekt Setup

Zum Aufsetzen eines neuen NativeScript-Vue Projekts ist das Vue CLI zu empfehlen. Sie stellt ein Template bereit, bei dem einige nützliche Voreinstellungen bereits inkludiert sind. So kann man schneller mit der eigentlichen Implementierung beginnen.

Sobald die Projektstruktur vorhanden ist kann man sich die automatisch erstellte „Hello World“ Seite anzeigen lassen. Dazu gibt es die Möglichkeit mit dem Command „tns preview“ einen QR-Code zu generieren und mit dem eigenen Smartphone einzuscannen (nachdem man 2 Apps installiert hat). Schon hat man die „Vorschau“ der App am Handy.

Diese Funktionalität kommt vom NativeScript Playground, einer webgehosteten NativeScript Entwicklungsumgebung. Der Playground bietet die Möglichkeit sich mit der Technologie grundsätzlich vertraut zu machen. Selbst für nur leicht komplexere Projekte ist dieses Tool jedoch zu langsam und unzuverlässig. Für den Entwicklungsprozess ist es ungeeignet, da Änderungen des Sourcecodes teilweise erst nach mehrmaligem Neustart in Kraft treten.

Stattdessen kann die Applikation auf verbundenen Smartphones oder verfügbaren nativen Emulatoren als virtuelles Gerät ausgeführt werden. Dass verbundene Geräte allerdings richtig erkannt werden, ist nicht immer sicher.

Um einen Emulator zu erstellen, bieten sich Programme wie Android Studio an. Wenn das Virtual Device richtig erstellt wurde, sollte es nun dem NativeScript CLI zur Verfügung stehen.

^{SEQIS: Hello World auf Android Virtual Device}

Virtuelle Geräte können in unterschiedlichen Auflösungen und mit diversen Android oder iOS Betriebssystemversionen erstellt werden. iOS darf allerdings nur auf Mac OS emuliert werden. Alternativ gibt es kostenpflichtige Cloudlösungen, die Mac OS anbieten. Auf Windows Entwicklungsumgebungen ist nur das Emulieren von virtuellen Geräten für Android erlaubt.

NativeScript-Vue Komponenten

Nicht nur bei Weboberflächen ist eine komponentenbasierte Architektur ein sinnvoller Ansatz zur Oberflächengestaltung. NativeScript-Vue bietet die gewohnte Vue Syntax für Komponenten an. Zwangsweise jedoch mit einigen kleinen Unterschieden.

Im Templateteil der Komponente ist zu beachten, dass statt der bekannten HTML Tags Mobile-spezifische Alternativen eingesetzt werden müssen. Statt <div> und <p> arbeitet man beispielsweise mit <StackLayout>, <GridLayout> und <Label>. Insbesondere die Layout Tags erlauben ein rascheres Festlegen der groben Seitenstruktur. Nun heißen die Tags zwar anders, aber verwendet werden sie wie gehabt. Attribute lassen sich zuweisen, Property Binding und andere Vue Funktionalitäten wie v-if und v-for werden ebenfalls unterstützt.

Im Skriptabschnitt hat man die Möglichkeit bei der Standard Vue Syntax zu bleiben. Mit TypeScript gibt es eine zusätzliche Möglichkeit: Class Components. Hierfür sind vorab Module zu installieren, und neue Decorators zu lernen. Dafür ist die Syntax inklusive Type Declarations übersichtlicher und das Schachteln von Komponenten wird besser unterstützt.

CSS bzw. SCSS ist auch bei NativeScript-Vue für das Styling zuständig, wobei bestimmte Properties wegen der nativen Umgebung nicht verfügbar sind.

Weitere Ähnlichkeiten und Unterschiede zum Web

Einige nützliche Vue Erweiterungen, wie der Vuex Store sind auch in NativeScript-Vue verfügbar. Mit Vuex können interne Daten und Zustände während der Laufzeit an einer zentralen Stelle abgebildet werden. Bei Zustandsänderungen besteht dann die Möglichkeit Aktionen zu setzen. Wird die Projektstruktur über das Vue CLI aufgesetzt, kann beim Einrichten des Projekts angegeben werden, dass Vuex verwendet werden soll.

Nun fehlt noch eine Lösung für das langfristige lokale Speichern von Applikationsdaten. Der gewohnte LocalStorage ist nämlich außerhalb des Browsers nicht verfügbar. Hierfür gibt es aber glücklicherweise eine einfache Lösung. Das NativeScript Core Modul bietet mit „application-settings“ eine Alternative, mit der Strings, Zahlen und Booleans wie mit LocalStorage gesetzt und ausgelesen werden können.

Allgemein fehlen browserspezifische Funktionalitäten, da diese für eine App nicht vorgesehen sind. Dadurch sind beispielsweise Node Packages, die auf dem DOM basieren nicht verwendbar.

Bei der Navigation gibt es mehrere Möglichkeiten. Der Standardrouter von Vue wird zwar an sich nicht unterstützt, es gibt aber einen NativeScript-Vue Router, der in der Verwendung sehr ähnlich ist, wenn man so nah wie möglich an der Webapplikation bleiben möchte. Der Nachteil besteht darin, dass Komponenten bei jedem Seitenwechsel neu geladen werden. Mit der bei NativeScript üblichen Variante werden alle Komponenten sofort geladen. Angezeigt wird dann immer nur die aktive Komponente, während die anderen im Hintergrund weiter bestehen.

Die Verwendung von UI Plugins ist allerdings nicht so angenehm wie beim gewöhnlichen Vue.js. Die Auswahl ist geringer und die Wahrscheinlichkeit hoch, dass das gewählte Plugin nur teilweise oder überhaupt nicht funktioniert. Sogar das Plugin, das bei der offiziellen Anleitung zum Einbinden von Plugins verwendet wird, ist mit der aktuellen Version von NativeScript-Vue nicht kompatibel. Außerdem gibt es 3 leicht unterschiedliche Wege Plugins zu registrieren. Es ist also eventuell notwendig durch Trial-and-Error den richtigen zu finden, um überhaupt feststellen zu können, ob das Plugin funktioniert. Wir haben zwar auch vollständig funktionsfähige, regelmäßig upgedatete Plugins gefunden, sie sind aber selten genug, dass es anfangs so ausgesehen hat, als würde die Einbindung generell nicht funktionieren.

Unit Testing

Das Testen von klassischen Vue Komponenten ist dank der offiziell zur Verfügung gestellten Test Utils kein schwieriges Unterfangen. Besonders viel Dokumentation für Unit Testing mit NativeScript-Vue scheint es zwar nicht zu geben, aber glücklicherweise sind die Test Utils auch für NativeScript Komponenten verwendbar. Hierfür behandelt man diese als wären sie klassische Vue Komponenten (inklusive Importieren von „vue“ statt „nativescript-vue“). Dann gilt es nur noch Vue die nativen XML Tags von NativeScript beizubringen. Hierfür eignet sich die „stub“ Option beim Mounten von Komponenten. Danach lassen sie sich wie gewohnt testen.

Deployment

Das Deployment einer App kann einerseits über den Google Play Store für Android oder den Apple App Store für iOS Applikationen erfolgen. Zum Testen kann die fertige Applikation auch händisch auf das jeweilige Smartphone übermittelt werden. Dafür wird eine .apk-Datei benötigt, die einfach und intuitiv mit dem CLI generiert werden kann. Diese Datei kann anschließend mit geringem Aufwand auf ein Smartphone übertragen und ausgeführt werden.

Erfahrungen beim Entwickeln

NativeScript hat den klaren Vorteil mit unterstützen Webframeworks eine echt native App zu liefern. Somit kann bereits bestehender Sourcecode für NativeScript wiederverwendet werden. Das kann für den Entwickler eine enorme Zeitersparnis bedeuten.

Probleme oder aufwändige Workarounds können jedoch schnell auftreten, wenn man Packages verwendet, die in NativeScript nicht oder anders unterstützt werden. Veraltete oder fehlerhafte Dokumentation für NativeScript stellen ein weiteres Hindernis dar, besonders im Bereich des Softwaretesting. Aufgrund der kleinen Community kann man sich auch nicht darauf verlassen, im Internet für seine Probleme klare Lösungen zu finden.

Diese Umstände verkomplizieren den Entwicklungsprozess erheblich und stellen in Frage, ob NativeScript tatsächlich die beste Lösung ist. Trotz des vielversprechenden Konzepts ist es bezüglich „Quality of Life“ (noch) weit von modernem Webdevelopment entfernt.