06/2018
Apps mit React Native und Nativescript entwickeln Programmieren Natur pur Native Apps Native
74 Die Javascript-Frameworks React Native und Nativescript versuchen eine Brücke zwischen Webapp-Entwick- lung und nativer App-Entwicklung zu bauen. Worin die Vorteile dieser Native Frameworks liegen, betrachtet
der Artikel vor dem Hintergrund des klassischen App-Framework Meteor. Andreas Möller, Kristian Kißling www.linux-magazin.de
schafft wegen der Code-Redundanz zu- sätzliche Fehlerquellen. Klassische Webapps nutzen hingegen HTML, CSS und Javascript und laufen plattformübergreifend im Browser jedes Systems. Allerdings beschränken die Plattformen den Zugriff auf das System mit Hilfe der so genannten Browser- Sandbox und geben APIs nur punktuell frei, was die Fähigkeiten von Webapps beschränkt. 2009 erschien dann Phone Gap (heute Apache Cordova). Mit ihm lassen sich Webapps besser an das System anbin- den. Unter Cordova laufen Apps in einer Webansicht auf dem System wie in einem Browser. Plugins erweitern den Zugriff
© Leonid Tit, 123RF Tit, © Leonid auf das System für die Apps.
Die beiden quelloffenen Javascript- intern über C oder C++ auf nativen Code E Meteor Frameworks React Native [1] und Nati- zugreifen, stützen sich Entwickler dafür vescript [2] erlauben es, mit Hilfe eige- beispielsweise auf das Java Native Inter- Ein Vertreter dafür ist das Javascript- ner IDEs mit Javascript native Apps für face (JNI, [6]). Die Entwicklungsumge- Framework Meteor [3]. Es hat sich von Android und I-OS zu entwickeln. Der bungen Android Studio [7] und Xcode einem Framework zum Entwickeln echt- Ansatz hat Vorteile gegenüber dem Weg [8] helfen ihnen dabei, die Anwendung zeitfähiger Webapps [9] zu einer Open- der klassischen Webapp-Entwicklung, zu programmieren und in die entspre- Source-Plattform entwickelt, die von sich den etwa das Javascript-Framework Me- chenden App-Stores zu bringen. behauptet der schnellste Weg zu sein, um teor [3] verfolgt, das auf Apache Cordova Dieser Weg hat allerdings einen Nach- Apps an den Start zu bringen. [4] und Webview setzt. teil: Das Installieren von Android Studio Tatsächlich fällt das Installieren und Er- ist recht aufwändig und Xcode läuft ex- zeugen einer Bootstrap-App über klusiv auf Apples Betriebssystem OS X. Ausgangslage curl https://install.meteor.com/ | sh U Wer zudem eine Android-App für I-OS meteor create example Native Apps für Android programmie- übernehmen möchte, muss den Code ren Entwickler traditionell mit Java oder unter Ojective-C oder Swift eins zu eins in der Shell unter Ubuntu 17.10 noch recht Kotlin, für I-OS ziehen sie Objective-C nachprogrammieren. Das erhöht jedoch leicht. Das Bauen der App für Android oder Swift [5] heran. Weil Android-Apps den Entwicklungsaufwand deutlich und mit dem Befehl »meteor add‑platform
Tabelle 1: Feature-Vergleich Framework IDE Cloudbuilds Natives UI Native Module Packen nativer Formate App-Store-Deployment Meteor 1.6.1 nein nein nein ja ja nein React Native 52.0 XDE 2.22.1 ja ja ja ja nein Nativescript 3.4.3 Sidekick 1.5.1 kostenpflichtig ja ja ja nein 06/2018 Programmieren reagierten die Beispiel-Apps von React Native ungefähr so träge wie native Apps unter einer älteren I-OS-Version. Will der Entwickler React-Native-Apps entwerfen, hilft ihm das Projekt Expo Native Apps Native [13] mit einer Reihe von Tools. Dazu zählt die Entwicklungsumgebung XDE, sie startet unter dem Namen Snack [14] 75 auch im Browser. Zugleich lässt sie sich nach dem Ausführen der Installationsan- weisungen aus Listing 1 über die Kom-
mandozeile in der Shell bedienen. www.linux-magazin.de Die Zeilen 1 und 2 installieren die aktu- elle Version von Node 8 über Debians Paketmanager Apt. Nodes Paketmanager Npm holt dann in Zeile 3 Expo (»exp«) inklusive React Native auf das System, Abbildung 1: Cordova: Ohne Java und Android Studio läuft für Android-Entwickler unter Ubuntu nichts. bevor Zeile 4 die Boilerplate-Anwendung »react‑test« einrichtet. Die Zeilen 5 und android« bricht aber bereits mit den Feh- damit eine Brücke zwischen Webapps 6 packen die App zum Laden via Smart- lermeldungen aus Abbildung 1 ab. Denn und plattformspezifischen Apps. phone – Abbildung 3 zeigt die Shell nach intern verwendet Meteor Cordova, das Das Framework React Native [1] über- dem Ausführen der Befehlskette samt ei- nach Java und Android Studio verlangt. lässt zur Laufzeit der Javascript-Engine nem QR-Code zur Installation. Ein Build für I-OS ist unter Ubuntu ohne- das zugrunde liegende System. Der Code Um die gepackte App über den QR-Code hin nicht möglich. läuft in einem eigenen Thread und greift auf ein Android-Gerät oder iPhone zu Immerhin darf der Benutzer beim Erzeu- über eine Brücke (Abbildung 2, [12]) befördern, muss der Nutzer zuvor aus gen der App zwischen Meteors eigenem auf native APIs und nativen Code des dem entsprechenden App-Store den Javascript-Framework Blaze, Angular Systems zu. So entsteht die grafische Be- gleichnamigen Expo-Client auf dem Gerät [10] sowie React [11] wählen. Beim De- nutzerschnittstelle nicht wie unter Me- installieren. Er startet den Client, scannt ployment unterstützt Meteor den Pro- teor über den DOM-Baum der Webview, den QR-Code und lädt anschließend die grammierer aber schon weniger. Zwar sondern über Aufrufe nativer UI-Widgets Boilerplate-App wie in Abbildung 4. paketiert »meteor build« Versionen für in Java oder Objective-C. Android und I-OS, anschließend braucht Löst der Benutzer umgekehrt beim Be- Listing 1: Expo unter Ubuntu 17.10 es jedoch einige Handarbeit, um die Apps dienen der gerenderten Elemente Events installieren in den jeweiligen App-Store zu befördern. aus, reicht das React-Native-System diese 01 curl ‑sL https://deb.nodesource.com/setup_8.x | sudo
über die Brücke zurück und verwandelt ‑E bash ‑ sie in ein Javascript-Event. Performance- E React Native 02 sudo apt‑get install nodejs Einbußen, die beim Synchronisieren bei- 03 sudo npm install exp ‑‑global Native Frameworks wählen im Vergleich der Welten entstehen, wirkt React Native 04 exp init react‑test dazu einen etwas anderen Ansatz. Sie mit einem virtuellen DOM entgegen. Das 05 cd react‑test versprechen native Apps für Android und Vorbild dafür liefert das gleichnamige Ja- 06 exp start I-OS auf Javascript-Basis. Sie schlagen vascript-Framework React. Im Praxistest
Listing 2: React-Native-Beispiel-App
01 import React from 'react'; 13 NetInfo.getConnectionInfo().then(info => alert(info.type+' 02 import { StyleSheet, Button, View, NetInfo } from 'react‑native'; ('+info.effectiveType+')')); 03 14 } 04 export default class App extends React.Component { 15 } 05 render() { 16 06 return ( 17 const styles = StyleSheet.create({ 07
Javascript-Engine Native Code
Aufrufe UI-Widgets React-Native-App APIs
Native Apps Native Events Custom Code
76 Abbildung 2: Eine Brücke verbindet die Javascript-Welt mit nativem Code.
Überschreiten die Anforderungen an eine aus dem stati- App auch die Grenzen des mit React Na- schen Javascript-
www.linux-magazin.de tive und Expo Realisierbaren, rüstet der Objekt »styles« an Benutzer nativen Code nach, um ihn die Komponente über Javascript in seiner App fernzusteu- »View«. Die An- ern. In diesem Fallback-Szenario muss gaben färben den er allerdings Android Studio und Xcode Hintergrund in ei- nachinstallieren. nem Grauton und platzieren den Beispiel einer App Knopf im Zentrum des Displays. Ne- Wie Entwickler React Native einsetzen, ben »NetInfo« bie- Abbildung 3: Expo bietet die App zum Laden im Expo-Client wie eine Website an. deutet Listing 2 an. Den Code speichert tet React Native die Datei »App.js« im Verzeichnis »re- noch eine Reihe weiterer systembezoge- Buildlog nach dem erfolgreichem Bau act‑test«. Wie jede Anwendung unter Re- ner API-Objekte, die Expos so genanntes des Android-Pakets. Hinter den Kulissen act Native basiert auch Listing 2 auf dem SDK noch einmal erweitert. verwendet Expo Instanzen von Android Javascript-Framework React [11], Zeile 1 Der Befehl »exp start« in der letzten Zeile Studio oder Xcode aus ihrer Cloud. Wie importiert es. Zeile 2 holt dann die Kom- von Listing 1 startet unter anderem einen unter Meteor haben die Anbieter aber ponenten »Style«, »Button«, »View« und so genannten Watch-Prozess. Registriert die letzten Meter in den App-Stores nicht »NetInfo« aus React Native. der eine Änderung am Projektverzeich- vollständig automatisiert, hier fällt wie- Auch die Basisklasse App (Zeilen 4 bis nis, informiert er den ebenfalls gestar- der einige Handarbeit an. 16) bildet React Native als Komponente. teten Packager-Server. Er veranlasst ihn, Deren Render-Methode (Zeilen 5 bis 11) die aktualisierte App an verbundene E Nativescript erstellt mit dem XML-ähnlichen JSX-Code Expo-Clients auszuliefern. ein bereichsbezogenes User-Interface Wie die Beispiel-App »react‑test« [18] Auch das Javascript-Framework Na- (Zeilen 7 bis 9). In Zeile 8 kapselt die demonstriert, darf ein Programmierer tivescript [2] verspricht native Apps Komponente »View« einen Button [15]. eine App jederzeit kostenlos unter sei- für Android und I-OS auf den Weg zu Den setzt Android zur Laufzeit mit einer nem Expo-Account im Cloudspeicher bringen. Wie React Native überlässt Instanz der Klasse »android.widget.But- des Projekts veröffentlichen. Dies stößt es auch Nativescript der jeweiligen Ja- ton« um [16]. Unter I-OS kommt dagegen er an, indem er in der XDE-IDE auf den vascript-Engine, den Code auszuführen. »UIButton« [17] zum Einsatz. Publish-Button klickt. Ergänzt er zudem Dabei kommen unter Android V8 und Die Zeilen 13 bis 15 speichern die Call- unter dem Projektver- unter I-OS JSC zum back-Funktion »getConnectionInfo()«, zeichnis die Konfigu- Einsatz. auf die der Wert des Attributs »onPress« rationsdatei »app.json« Auch Nativescript steu- verweist. Beim Knopfdruck ermittelt die passend um die Anga- ert nativen Code über gleichnamige Methode in Zeile 15 den ben »buildidentifier« eine Brücke [19] fern. Verbindungsstatus des Mobilgeräts. und »package«, erzeugt Dabei reicht die Lauf- Auf das asynchron eintreffende Ergebnis »exp build:android« zeitumgebung Aufrufe reagiert die Lambda-Funktion mit dem etwa eine Android-App von Getter- und Setter- Aufruf der Methode »then()«. Eigentlich innerhalb der Anbieter- Methoden eines Ja- soll sie den ermittelten Verbindungstyp in Cloud. vascript-Objekts dyna- einer Alert-Box melden. Wie Abbildung Das Buildlog des Pro- misch an native Ob- 4 zeigt, ließ sich der Verbindungsstatus zesses verfolgt der jekte weiter. im Praxistest aus unbekanntem Grund Entwickler beim Ein- Die Entwicklungsum nicht ermitteln. satz des CLI über eine gebung für Native Die Codereferenz »{styles.container}« URL unter dem Expo- script aufzusetzen er- aus dem Wert des Attributs »style« bin- Account live mit. Ab- Abbildung 4: Die App bedient sich der weist sich unter Linux det in Zeile 7 die Stylesheet-Angaben bildung 5 zeigt das Klasse »UIAlertController« unter I-OS. als besonders dornen- 06/2018 Programmieren work unter Ubuntu in der Shell. Eine geeignete Bootstrap-App erstellt dann:
tns create ns‑test ‑‑template U nativescript‑template‑ng‑tutorial Native Apps Native Die grafische Entwicklungsumgebung Sidekick [20] installiert Debians Pa- ketmanager Dpkg nach dem Download 77 über »sudo dpkg ‑i NativeScriptSide- kick‑amd64.deb«. Anschließend startet Sidekick über einen Aufruf aus der Shell
heraus: www.linux-magazin.de
/opt/Native\ Script\ Sidekick/Native\ U Script\ Sidekick
Beim Programmieren der Apps unter- stützt Nativescript im Gegensatz zu React Native allerlei Skriptsprachen und Frame- Abbildung 5: Expo gewährt Einblick in die Logfiles seiner Cloudbuilds. works: Neben Angular [10] und Vue.js [21] lässt sich auch pures Javascript oder reich. Builds von I-OS-Apps fallen aus be- Anbieters erstellen. Zumindest die ersten Typescript [22] verwenden. kannten Gründen ohnehin aus. Wer Kos- 100 Builds sind kostenfrei. Listing 3 reanimiert die Beispiel-App aus ten (siehe Tabelle 1) nicht scheut, lässt Der Befehl »sudo npm install ‑g nati- Abbildung 4 und Listing 2 unter Angular die Apps wie unter Expo in der Cloud des vescript« installiert das Javascript-Frame- und Nativescript. Der Code landet unter 06/2018 Programmieren dem kostenlosen Cloudspeicher eine ide- ale Umgebung für neue Projekte und ihre Community. Dank Cloudbuilds müssen die Entwickler zudem keine lästigen Kon- figurationsarbeiten und Installationsmü- Native Apps Native hen mit Android Studio und Xcode mehr auf sich nehmen. n 78
Infos [1] React Native: [https://facebook.github.io/ react‑native/] www.linux-magazin.de [2] Nativescript: [https://www.nativescript.org] [3] Meteor: [https://www.meteor.com] [4] Apache Cordova: [https://cordova.apache.org] Abbildung 6: Sidekick nach dem Cloudbuild für Android. Der für I-OS ist mittlerweile kostenpflichtig. [5] Swift: [https://developer.apple.com/ library/content/documentation/Swift/ der zuvor angelegten Bootstrap-App im anders als dokumentiert – mittlerweile Conceptual/Swift_Programming_ Verzeichnis »ns‑test« in der Datei »app/ kostenpflichtig ist. Language/index.html] app.component.ts«. Zeile 1 von Listing [6] Java Native Interface: 3 importiert die Klasse »Component« aus Fazit [https://developer.android. com/training/ Angular, Zeile 2 das Objekt »Connecti- articles/perf‑jni.html] vity« aus Nativescript. Der Dekorator der Meteor-Apps lassen sich dank des Cloud- [7] Android Studio: [https://developer. Zeilen 4 bis 7 überführt die anschließende dienstes Galaxy einfach einrichten und android.com/studio/index.html] Klassendefinition der Basisklasse »App- skalieren. Nur beim Erzeugen mobiler [8] Xcode: Component« (Zeilen 8 bis 22) in eine Ab- Apps hapert es. Da ist der direkte Kon- [https://developer.apple. com/xcode/] leitung der Klasse »Component«. kurrent Ionic [23] schon weiter. [9] Andreas Möller, „Flotte Schnuppe“: Das bereichsbezogene UI erzeugt Zeile 6, React Native und Nativescript bieten Linux-Magazin 03/14, S. 102, indem sie über die Komponente »Button« gleichwertige Lösungsansätze. Sie ver- [http://www.linux‑magazin.de/ausgaben/ einen Knopf generiert, der beim Antip- zichten auf die Webview und nutzen na- 2014/03/meteor/] pen die Callback-Funktion »getConnec- tiven Code für die Interfaces ihrer I-OS- [10] Angular: [https://angularjs.org] tionInfo()« bemüht. Der Nativescript- und Android-Apps. Native-APIs und UI- [11] React: [https://reactjs.org] Code ermittelt den Verbindungstyp auf Komponenten steuern beide über eine [12] React-Native-Brücke: synchronem Weg. Die Funktion »alert()« Brücke an. Für App-Entwickler fühlt sich [http://www.discoversdk.com/blog/ meldet dem Nutzer das Ergebnis. das wie unter einem Browser und DOM how‑react‑native‑works] Abbildung 6 zeigt den erfolgreichen an, zugleich verbessern die nativen UIs [13] Expo: [https://expo.io] Cloudbuild der App mit Hilfe von Side das Benutzererlebnis. [14] Snack: [https://snack.expo.io] kick für Android. Den Cloudbuild für Zudem ergänzt das Expo-Projekt React [15] React-Native-Button: [https://facebook. I-OS hat die Redaktion nicht getestet, da Native geschickt. Es bietet mit dem Expo- github.io/react‑native/docs/button.html] das benötigte I-OS-Entwicklerzertifikat – Client, der Web-basierten IDE Snack und [16] Android-Button: [https://developer.android. com/ Listing 3: Beispiel-App unter Nativescript reference/android/widget/Button. html]
01 import { Component } from "@angular/core"; 13 break; [17] I-OS-Button: [https://developer.apple. 02 import * as connectivity from "connectivity"; com/documentation/uikit/uibutton] 14 case 1: 03 [18] Beispiel-App »react‑test«: 15 alert('WiFi'); 04 @Component({ [https://expo.io/@pam/react‑test] 05 selector: "my‑app", 16 break; [19] Nativescript-Brücke: 06 template: `` featured/nativescript‑works/] 18 alert('Mobile'); 07 }) [20] Sidekick: [https://www.nativescript.org/ 08 export class AppComponent { 19 break; nativescript‑sidekick] 09 getConnectionInfo() { 20 } [21] Vue.js: [https://vuejs.org] 10 switch(connectivity.getConnectionType()) { [22] Tim Schürmann, „Geändertes Skript“: 21 } 11 case 0: Linux-Magazin 05/17, S. 72 12 alert('none'); 22 } [23] Ionic: [https://ionicframework.com]