Einmal JavaScript-Code schreiben und Apps mit nativen Elementen für iOS und Android erhalten. Mit Facebook’s ReactNative können Software-Entwickler, die Erfahrungen mit nativer App-Programmierung haben, zügig eine einfache App für die aktuellen Hauptplattformen entwickeln und in den Apple App-Store sowie GooglePlay Store bringen.
Was ist ReactNative?
Mit ReactNative lassen sich iOS- und Android-Apps programmieren, die native Elemente verwenden und sich somit nicht von nativ programmierten Apps unterscheiden. Der Code wird nur einmal geschrieben, das Ergebnis ist eine App für iOS-Geräte und eine App für Android-Geräte.
ReactNative ist somit in keiner Weise mit Cordova oder ähnlichen Javascript-Frameworks vergleichbar, da diese lediglich Websites in einem Container sind. Native iOS- oder Android-Elemente kommen eigentlich nicht vor.
Bei ReactNative ist das anders. Das Framework von Facebook benutzt JavaScript und React, um native Elemente miteinander zu verbinden. Geschrieben wird der Code in JSX, einer Erweiterung basierend auf JavaScript und direkt in JavaScript. Hierbei wird die JavaScript-Syntax nach der ECMAScript-6-Norm verwendet. ReactNative-Apps laufen auf Geräten ab iOS 8 und Android 4.1.
Render-Funktion des Frameworks ReactNative zur App-Programmierung
Render-Funktion ReactNative
Im Beispiel sieht man die Render-Funktion einer klassischen ReactNative-Component. Zurückgegeben wird eine gestylte „View“, die als Subview ein „Text“-Element beinhaltet. Das „Text“-Element enthält einen Text und die Variable „name“, die von außen gesetzt wird.
Wie auch „View“ hat „Text“ die Property „style“. Mit „style“ lassen sich UI-Elemente Gestalten und Positionen. Das Naming ist ähnlich zu CSS. Will man Elemente in Abhängigkeit zu anderen Elementen positionieren, benutzt man flex, flex-direction und Ähnliches.
Benutzt man wie im Beispiel den Tag „Text“, wird im Hintergrund eine UILabel (iOS) bzw. eine TextView (Android) genutzt. Der „View“-Tag wird zu UIView bzw. zu einer nativen (Android-)View. Viele dieser Elemente oder auch Components genannt, liefert ReactNative standardmäßig und können ohne zusätzliche Installationen benutzt werden. Oftmals findet man in der npm-Library Erweiterungen zu bestehenden Components oder auch ganz neue, praktische Components. Möchte man eine native Component in ReactNative, die noch nicht verfügbar ist oder bestehenden nativen Code nutzen, muss man zuerst ein natives Bridging-Modul erstellen. Hierfür wird aber erweitertes Wissen in nativer App-Entwicklung für die jeweilige Plattform vorausgesetzt.
Was sind die Voraussetzungen für die App-Programmierung ReactNative?
Will man „nur“ Apps programmieren und sich nicht um das Drumherum (Veröffentlichung, Testphasen, etc.) kümmern, sollte man ein solides Wissen rund um JavaScript und das grundlegende Verständnis für den Aufbau einer App (ViewController, Daten-Handling, etc.) mitbringen.
Außerdem sollte man wissen, wie man mit dem Terminal umgeht, da ein großer Anteil bei der Einrichtung eines Projekts über die Console getätigt wird.
Gehen die Anforderungen über das Programmieren hinaus, sind vor allem auf iOS-Seite Erfahrungen rund um Zertifikate, Provisioning-Profiles und iTunesConnect erforderlich, da es sonst an der Veröffentlichung der App scheitern wird. Mit Android geht es vergleichsweise einfach, da es hierbei mit einigen Terminal-Eingaben und einem Google-Account oftmals getan ist.
Wann macht ReactNative Sinn?
Eine pauschale Antwort auf diese Frage gibt es nicht.
Beherrscht man zum Beispiel die native App-Programmierung für Android und kennt sich mit iOS weniger aus, macht eine ReactNative-App vielleicht mehr Sinn, als sich Swift oder Objective-C beizubringen. Das selbe gilt natürlich auch andersrum. Ist diese App allerdings so umfangreich, dass man nur wenige Codezeilen gemeinsam verwenden kann und somit viel mit Bridging-Modulen arbeiten muss, ist die native Programmierung empfehlenswerter.
Starten sollte man aber auf jeden Fall mit einer „kleineren“ App, um ein Gespür dafür zu bekommen, wo die Grenzen von ReactNative sind. Je umfangreicher die App, desto mehr Probleme können auftreten. Gerade bei vielen Daten oder beim Thema Sicherheit muss man sich bewusst sein, dass ReactNative – Stand Frühjahr 2017 – standardmäßig kein komfortables Datenhandling (Datenbank, Zugriff auf der Platte, etc.) und keinen Zugriff auf den iOS-Keychain mitliefert.
Wie starte ich am besten?
Die aktuell wichtigste Seite im Internet zum Thema ReactNative ist facebook.github.io/react-native/.
Wer noch keine Erfahrung mit ReactNative gemacht hat, sollte sich zuerst eines der vielen Tutorials im Internet anschauen und sich mit den Components, deren Life-Circle, State-Changes und Imports vertraut machen, bevor man mit dem eigentlichen Projekt beginnt. Es macht auch immer Sinn, kleinere Testprojekte anzulegen, um zum Beispiel ein neues Modul oder eine externe Library zu testen. Verzichten sollte man auch nicht auf ein Versionsverwaltungstool.
Da ReactNative ein relativ junges Framework ist, kann man davon ausgehen, dass noch viel passieren wird. Man sollte sich aber auch bewusst sein, dass hinter dieser Technologie Facebook steht.
Quellen:
facebook.github.io/react-native/
