KAPITEL 1

React Native kurz vorgestellt

React Native ist ein Framework zur plattformübergreifenden Entwicklung nativer Apps mit JavaScript. Es wurde im Frühjahr 2015 zunächst für iOS als Open-Source-Projekt veröffentlicht. Seit 2015 wird auch Android als Zielplattform unterstützt. Zwar wurde React Native von Facebook initiiert, aber seit seiner Veröffentlichung hat sich eine große Gemeinschaft von Programmierern und Unternehmen gebildet, die an der Weiterentwicklung des Frameworks arbeitet.

React Native basiert auf der Webbibliothek React und folgt im Wesentlichen den gleichen Prinzipien zur Erstellung deklarativer Benutzeroberflächen mit JavaScript, wodurch der Zugang zur Entwicklung nativer Apps insbesondere für Webentwickler attraktiv und relativ einfach ist. Nicht zuletzt deswegen hat React Native ähnlich wie React in den letzten Jahren eine große Beliebtheit und eine kritische Masse von Nutzern erreicht. Sowohl React als auch React Native gehören zu den 20 populärsten Projekten auf GitHub.com.1 Es gibt einige Beispiele von bekannten und viel genutzten Apps, die mit React Native entwickelt wurden. Dazu gehören unter anderem Apps von Facebook, Instagram, Airbnb, Tesla, Uber und Walmart.2

Weshalb begeistert und fasziniert React Native? Die wichtigsten Gründe werde ich im Folgenden skizzieren. Anschließend beschreibe ich, wie das Framework prinzipiell funktioniert und wie es dadurch möglich wird, native Apps mit JavaScript zu programmieren.

React Native: viele Vorteile, wenige Einschränkungen

Es gibt verschiedene Vorgehensweisen, um mobile Apps für die beiden wesentlichen Plattformen Android und iOS zu entwickeln. Für die Entwicklung nativer Apps stellen Google und Apple mächtige Werkzeuge zur Verfügung. Die Unterschiede zwischen den beiden herkömmlichen Ansätzen, eine native App für Android bzw. iOS zu entwickeln, sind jedoch beträchtlich. Dies illustriert folgende Auflistung, die allerdings keinen Anspruch auf Vollständigkeit erhebt:

Tabelle 1-1: Unterschiede in der nativen App-Entwicklung zwischen Android und iOS

Soll nun eine native App für Android und iOS mit den herkömmlichen Ansätzen der Hersteller entwickelt werden, ist es offensichtlich, dass dies in der Regel nur mit eigenständigen Teams möglich sein wird, die sich auf die jeweilige Plattform spezialisieren. Dadurch werden nicht bloß hohe Kosten verursacht, sondern es wird auch ein erhöhter Aufwand in Bezug auf die Projektkoordination erforderlich sein. Dies ist die größte Herausforderung, wenn eine native App für beide Plattformen auf herkömmliche Weise entwickelt werden soll.

Ein weiterer Nachteil der herkömmlichen Ansätze entsteht aus der Tatsache, dass jede Änderung an einer App dazu führt, dass die App kompiliert werden muss. Bevor die Änderung auf dem Smartphone getestet werden kann, vergehen für eine Android-App mindestens einige Sekunden und in einem iOS-Projekt oftmals sogar deutlich mehr Zeit (von den häufig berichteten Abstürzen von XCode ganz zu schweigen). Je komplexer die App wird, desto mehr Zeit verbringt ein Programmierer mit Warten. Den meisten Programmierern ist sicherlich bewusst, dass sich dies negativ auf ihre Produktivität auswirken und eine Belastungsprobe für ihre Gelassenheit darstellen kann.

React Native bietet Abhilfe und reduziert sowohl den Entwicklungsaufwand als auch die Reaktionszeiten bei der Entwicklung nativer Apps. Es ist einerseits ein plattformübergreifendes Framework für Android und iOS, wodurch ein Team in die Lage versetzt wird, eine App für beide Plattformen parallel mit nur einer Codebasis zu entwickeln. So werden wir auch in diesem Buch bei der Entwicklung der App MyJournal ab Kapitel 4 vorgehen. Andererseits wird bei der Programmierung mit React Native jede Änderung am Code fast augenblicklich in der App sichtbar. Ermöglicht wird dies durch Features wie Live Reload und Hot Reloading, die Sie im Laufe des Buchs kennenlernen werden. Neben diesen wichtigen Eigenschaften hat React Native weitere Vorteile, auf die ich kurz eingehen möchte:

Native Benutzeroberflächen

React Native erzeugt performante Apps mit nativen UI-Elementen für Android und iOS. Dies ist ein großer Vorteil gegenüber hybriden Frameworks wie z.B. Cordova und Ionic, deren Anwendungscode in einem WebView ausgeführt wird. Die Benutzeroberfläche wird dort mit Webtechnologien erstellt, wodurch UI-Elemente lediglich nachgebildet werden, was sich negativ auf das Erscheinungsbild und die Performance einer App auswirken kann.

Die Basis: JavaScript und React

Da JavaScript die Programmiersprache für React Native ist, können Webentwickler mit weniger Aufwand Apps erstellen, als wenn sie zuerst eine andere Programmiersprache lernen müssten. Durch JavaScript wird es prinzipiell möglich, allgemeine Geschäftslogik ohne spezifischen Code für die App in Webprojekten wiederzuverwenden. Zusätzlich profitiert React Native von dem deklarativen Programmiermodell in React, das einen eleganten und produktiven Ansatz zur Erstellung von Benutzeroberflächen bietet. Gerade dieser Vorteil ist ein Grund für die wachsende Popularität von React Native in den letzten Jahren.

Aktives Umfeld mit vielen Erweiterungen und Werkzeugen

React Native wird von vielen Entwicklern und mehreren Unternehmen aktiv weiterentwickelt. Es stehen viele nützliche Erweiterungen und Bibliotheken zur Verfügung, die z.B. UI-Komponenten implementieren, die nicht direkt von React Native angeboten werden. Hervorzuheben ist hierbei das Start-up Expo (expo.io), das verschiedene nützliche quelloffene Werkzeuge für React Native bereithält. Um nur ein Beispiel zu nennen: Die Expo-App ermöglicht es in Kombination mit React Native, native Apps für das iPhone ohne Apple-Rechner zu entwickeln. Diese App werden wir daher auch in diesem Buch vorstellen und verwenden.

Weitere Plattformen neben Android und iOS

Apps plattformübergreifend mit einer Codebasis für Android und iOS programmieren zu können, ist bereits ein großer Produktivitätsgewinn. Es gibt jedoch zusätzliche Plattformen, für die Apps mit React Native entwickelt werden können. Dazu gehören z.B. Apple TV und Microsofts Universal Windows Platform. Architektur und Funktionsweise von React und React Native erlauben es sogar, Anwendungen im zukunftsträchtigen Bereich der virtuellen Realität umzusetzen (siehe React VR unter facebook.github.io/react-vr).

Nativer Code kann eingebettet werden

In React Native kann einerseits nativer Code für Android und iOS eingebettet werden, sodass native Bestandteile anderer Projekte oder Bibliotheken wiederverwendet werden können. Umgekehrt ist es möglich, React Native in bestehenden App-Projekten einzusetzen, die bisher mit den herkömmlichen Ansätzen von Google bzw. Apple entwickelt wurden. Somit ist es möglich, neue Funktionalitäten in diesen Projekten prototypisch und plattformübergreifend mit React Native umzusetzen.

Meines Erachtens ist React Native das einzige Framework für die plattformübergreifende Entwicklung nativer Apps, das solch eine Fülle von Möglichkeiten und Funktionen bietet. Es gibt aber auch Einschränkungen bei dem Framework, die es zu beachten gilt.

Manche Rahmenbedingungen erfordern nativen Code

Es kann Situationen geben, in denen es nicht möglich ist, bestimmte Funktionalitäten einer App mit React Native umzusetzen. Dies könnte ein besonderes Bedienelement sein, für das es (noch) keine Komponente im Framework gibt. Auch decken die APIs von React Native nicht alle Gerätefunktionen ab, sodass z.B. bestimmte Sensordaten nicht abgefragt werden können. In diesen Fällen kann zwar nativer Code eingebettet werden, aber es bedeutet auch, dass mindestens ein Teammitglied sich mit den nativen Aspekten der App-Entwicklung auskennen sollte. Dieses Wissen wird außerdem dann relevant,...