Natur Pur Native Apps Native
Total Page:16
File Type:pdf, Size:1020Kb
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 <View style={styles.container}> 18 container: { 08 <Button title="Connection Info" onPress= 19 flex: 1, {this.getConnectionInfo}/> 20 backgroundColor: '#ddd, 09 </View> 21 alignItems: 'center', 10 ); 22 justifyContent: 'center', 11 } 23 }, 12 getConnectionInfo() { 24 }); 06/2018 Programmieren 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 Zen trum 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.