Sebastian Springer MaibornWolff

„Haben Sie bereits erste Erfahrungen mit React gesammelt und sind an der Umsetzung nativer Apps interessiert, sollte React Native der nächste Schritt in Ihrer persönlichen Entwicklung sein.“

In unserer Artikelserie zum Thema React haben Sie bisher die Bibliothek selbst und den State-Container Redux kennengelernt. In diesem Artikel erfahren Sie, wie Sie mithilfe von React Native mobile Apps erzeugen können. Wir beschäftigen uns auf den nächsten Seiten sowohl mit den Gemeinsamkeiten bei der Entwicklung mit React und React Native als auch mit den Besonderheiten der mobilen Entwicklung.

React Native ist ein Framework, mit dem Sie native mobile Apps entwickeln können. Wie der Name des Frameworks bereits andeutet, baut es auf Facebooks React-Bibliothek auf. Im Kern sorgt React durch die verwendeten Komponenten für einen modularen Aufbau des UI der Applikation. Die Struktur des Frontends wird in den Komponenten mithilfe von JSX beschrieben. Der Datenfluss im Komponentenbaum erfolgt über Props, also den Eigenschaften der Komponenten. Jede Komponente kann außerdem selbst ihren mutable State verwalten.

Meist werden React-Applikationen im Browser ausgeführt. In dieser Umgebung beschreiben die React Elements, wie die HTML-Struktur einer Komponente aussehen soll. Natürlich ist es auch möglich, eine solche Applikation auf einem mobilen Gerät auszuführen. Dies hat jedoch eine Reihe von Nachteilen. Ein Smartphone ist nicht in der Lage, Webapplikationen direkt anzuzeigen, sondern benötigt dafür einen Browser oder zumindest eine leichtgewichtigere WebView.

Artikelserie

  • Teil 1: React – ein Blick unter die Haube
  • Teil 2: Redux – State-Management für React
  • Teil 3: Native Applikationen mit React und Redux entwickeln
  • Teil 4: Flow – Typsicherheit auf React-Art
  • Teil 5: React testen – Gute und stablie Applikationen entwickeln

Diesen Weg beschreiten andere Frameworks wie beispielsweise Apache Cordova. Hier implementieren Sie Ihre App komplett in JavaScript, HTML und CSS. Das Rendering der Applikation geschieht über eine WebView, was Cordova-Apps zu hybriden Apps macht. Sie sind keine klassischen Webapplikationen, aber auch keine nativen mobilen Apps. Der größte Nachteil dieser hybriden Apps ist das Look and Feel, das nicht zu 100 Prozent mit dem von nativen Apps übereinstimmt, da nicht auf die nativen Kontrollelemente zugegriffen werden kann. Außerdem ist in den meisten Fällen auch die Performance der hybriden Apps deutlich schlechter als die von nativen Apps.

Aus diesen Gründen geht React Native einen anderen Weg und erzeugt eine vollständig native App. Möglich wird dies durch einen Designaspekt von React. React ist eine Bibliothek, die Ihnen im Kern lediglich die Möglichkeit bietet, Komponenten zu erzeugen. Getrennt davon ist der sogenannte Reconciler. Dieser Algorithmus berechnet die Unterschiede zwischen dem aktuellen Zustand der Oberflächen und dem nächsten. Der Renderer kümmert sich schließlich um die Darstellung. Durch diese Aufteilung wird es möglich, unterschiedliche Renderer für verschiedene Umgebungen zu verwenden. Der Standard-Renderer ist der React DOM Renderer, der für die Darstellung einer React-Applikation im Browser zuständig ist. Ein weiterer Renderer ist in React Native enthalten, der dafür sorgt, dass die React Components nicht in HTML-Strukturen, sondern in native Elemente übersetzt werden. Für Sie als Entwickler bedeutet das zunächst einmal, dass Sie sich auf ein paar Veränderungen und Einschränkungen einstellen müssen, wenn Sie mit React Native arbeiten. Im Gegenzug erhalten Sie jedoch eine native App, die auf Android und iOS lauffähig ist.

React Native ist ein Open-Source-Projekt, das unter der BSD-Lizenz verfügbar ist. Der Quellcode wird auf GitHub verwaltet. Ein Blick auf die wichtigsten Metriken wie Issues, Commits, Stars oder Contributors deuten auf ein sehr aktives Projekt hin. Als Zielsystem für die Apps werden aktuell Android und iOS unterstützt.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 2.18 - "μCMS"

Alle Infos zum Heft
579823302Native Apps mit React Native und Redux
X
- Gib Deinen Standort ein -
- or -