Was ist React Native? – Tutorial zu React Native

React Native ist eine Bibliothek, die in den letzten Jahren von sich Reden macht. Was genau sich hinter dem Begriff React Native verbirgt, möchte ich Ihnen in den nächsten Minuten näher bringen. Allem voran ist React Native zunächst einmal ein Framework, um Frontends zu entwickeln. Allerdings kann man genau das Gleiche über die normale Bibliothek React sagen. Wichtig ist, dass React Native nicht React ersetzt, denn anders, als viele glauben, ist React tatsächlich keine Bibliothek, die ausschließlich für Web Browser geeignet ist. Bei React selbst handelt es sich nämlich lediglich um das Modell, wie beispielsweise Daten und UI-Komponenten verknüpft werden. Somit lässt sich also React Native nicht mit React selbst vergleichen, sondern mit ReactDOM. ReactDOM nämlich ist die Bibliothek, die React nutzt und innerhalb des Document Object Model des Browsers anwendet. Bei React Native kommt nun also die native Komponente zum Tragen. Native soll bedeuten, dass hier die UI-Komponenten des jeweiligen Betriebssystems, auf dem React Native eingesetzt wird, verwendet werden. Das heißt, anders als bei ReactDOM, wo man mit HTML-Elementen arbeitet, arbeitet man in React Native mit abstrakteren Konzepten. Diese abstrakten Konzepte werden dann innerhalb jeder der möglichen Plattformen abgebildet. Selbstverständlich kann man mit React Native, ähnlich wie mit ReactDOM das UI mit JSX deklarieren. Das soll heißen, dass die Entwicklung mit React Native sich ähnlich anfühlt, wie die Entwicklung im Web. Nichtsdestotrotz sind die Zielplattformen von React Native selbst eher Betriebssysteme, wie iOS, Android und Windows. Theoretisch ist React Native aber nicht auf diese Plattformen limitiert. Lediglich ist das aktuell der Fall, dass nur für diese Plattformen eine Integration besteht. Dank diverser großer Apps konnte sich React Native bereits im Markt einen Namen machen. Allem voran ist hier vor allem Facebook zu nennen. Nicht nur ist Facebook der Entwickler der ursprünglichen React-Bibliothek, sondern auch von React Native. Das bedeutet, dass React Native vor allen Dingen eine Antwort auf Probleme bei der App-Entwicklung bei Facebook war. Für eine Firma, wie Facebook, steht die User Experience im Vordergrund. Somit ist es sehr wichtig, dass die Geschwindigkeit des User Interface sehr schnell ist. Mit einer einfachen Web View und React ist das nicht zu gewährleisten. Aus diesem Grund hat man sich dafür entschieden React Native zu entwickeln. Nichtsdestotrotz sind auch bereits andere große Firmen auf den Zug aufgesprungen, allen voran Microsoft. Mit den Office-Apps hat Microsoft die wohl bedeutendsten Apps sowohl für iOS, als auch Android entwickelt. Und viele von diesen Apps basieren heute auf React Native. Allein aus diesen beiden Firmen deckt React Native also schon einen sehr hohen Prozentanteil der bedeutendsten Apps in iOS und Android ab. Aber selbstverständlich gibt es noch viele weitere Firmen, die bereits auf React Native setzen, wie Uber, Discord, Tesla, Walmart. Doch wie funktioniert React Native nun wirklich? Die Basis von React Native ist das jeweilige Betriebssystem, entweder iOS oder Android. Darauf aufbauend gibt es die sogenannte React Native Runtime. Über die React Native Runtime werden Integrationen in die Betriebssystem üblichen Bibliotheken gewehrt. Somit gibt es beispielsweise eine Integration mit der Vibrations API jeweils für iOS und Android in der React Native Runtime. Der Entwickler einer App nutzt dann eine konsistente API, die über die React Native Runtime die Betriebssystemfunktion aufruft. Die Runtime selbst ist selbstverständlich für jede der beiden Plattformen in der individuellen Programmiersprache, also entweder Objective-C für iOS oder Java für Android abgebildet. Verwendet man später andere Bibliotheken, die es möglich machen beispielsweise Videos abzuspielen, so sind diese auch auf dieser Ebene implementiert. Alle UI-Komponenten, die am Ende des Tages auf der Oberfläche dargestellt werden, sind auch Teil der React Native Runtime. Da man React Native nun in JavaScript entwickelt, ist es weiterhin notwendig eine JavaScript Runtime zu haben, dies ist JS Core auf iOS und Webkit JS auf Android. Das bedeutet, ähnlich wie die Crown JavaScript Engine, wie Aid, wird je nach Plattform eine andere JavaScript Engine eingesetzt. Seit kurzem bietet Facebook auch die sogenannte Hermes VM an für Android. Mit der Hermes VM wird der JavaScript Code initial optimiert. Damit verbessern sich später die Startzeiten einer App deutlich. Aufgrund verschiedener Restriktionen des iOS Betriebssystems ist es allerdings nicht möglich eine andere JavaScript Engine als JS Core zu verwenden. Aufbauend auf diesen JavaScript Runtimes ist nun React Native und React. Das bedeutet, dass auch die React Native Runtime einen JavaScript Anteil hat. Dabei handelt es sich also um Funktionen und Bibliotheken, die innerhalb des eigenen JavaScript Codes verwendet werden. Vor allem stellen diese eine Brücke zwischen React Native Runtime und der JavaScript Runtime dar. Das React Framework als solches, also, das Live Cycle Management findet auch auf der JavaScript-Ebene statt, da die React Bibliothek auch in JavaScript geschrieben ist. Wenn all diese Ebenen korrekt zusammen wirken, kann der eigene Code, beispielsweise hier in Form einer View, abgebildet werden. Das bedeutet also, bis die Views, die der eigene Code erzeugt, tatsächlich auf dem Gerät angezeigt werden, werden all diese Ebenen durchlaufen. Wenn auch dieser Prozess und die Ebenen sehr aufwendig wirken, funktioniert React Native deutlich schneller als eine klassische Web-Darstellung. Sie sollten also nun einen groben Eindruck davon bekommen haben, wie React Native funktioniert. Außerdem habe ich Ihnen erklärt, welche Firmen bereits auf React Native setzen und wie sich React Native von ReactDOM abgrenzt.