Der React-Wahnsinn

React, ReactJS, React Native, ReactiveX: Für einen Laien handelt es sich hier um ein und denselben Begriff, doch für Softwareentwickler, die sich genauer mit diesem Thema beschäftigen, hat ReactJS/React Native nichts mit ReactiveX zu tun. Wenn du wissen willst, warum das so ist, und/oder wenn du anderen diesen Unterschied „aufdrücken“ willst, bist du bei diesem Blogeintrag genau richtig.

React und React Native

Der geringste Unterschied bei all diesen Wörtern liegt wohl zwischen React und ReactJS. Die einen verwenden React, die anderen ReactJS und manche sogar React.js, aber alle meinen dasselbe und zwar eine JavaScript Bibliothek, die zum Bauen von User Interfaces verwendet werden kann.

React

React – der Kürze halber habe ich mich für diesen Begriff entschlossen – wirbt mit drei Features auf ihrer Homepage:

+ Deklarativ
+ Komponentenbasiert
+ Einmal lernen, überall anwenden/schreiben.

Mit „Deklarativ“ meinen die Entwickler den Vorgang, wie ein Screen implementiert wird. Ein wesentlicher Vorteil hier ist schon einmal, dass man das Grundgerüst dank JSX mit Tags definiert, welche einem HTML Tag sehr nahekommen. JSX steht für JavaScript XML und ist eine Erweiterung für XML-ähnlichen Code. JSX hat keine Semantik, was es einem einfach macht Objekte oder Elemente in einer an XML angelehnten Struktur darzustellen.

Komponentenbasiert: Viele Frontendentwickler kennen und verwenden sicher noch das klassische MVC-Pattern, um User Interfaces zu bauen. Hierbei werden Model, View und Controller strikt getrennt. Seit Facebook 2013 jedoch React veröffentlich hat, geht der Trend sehr stark in Richtung einzelne Komponenten, die ineinander verschachtelt werden und ihren eigenen State haben. Somit beinhaltet jede Komponente nur jene Funktionen und Daten, die auch benötigt werden. Dafür müssen Model und Controller selbst separiert werden. Dieses Pattern soll es einfacher machen, komplexe UIs zu bauen, ohne den Überblick zu verlieren.

Zu guter Letzt kommen wir zum so oft falsch wiedergegebenen und missverstandenen Slogan „Einmal lernen, überall anwenden.“. Die Entwickler wollen damit stets mitteilen, dass das Prinzip von React einmal verstanden worden sein muss, damit man es an vielen Stellen anwenden kann. Unabhängig davon, ob man den Content client- oder serverseitig rendern will, man verwendet die gleiche Bibliothek. Sogar für Mobile-Entwicklung gibt es ein eigenes Framework, was uns direkt zum nächstem Begriff bringt: React Native.

React Native

React Native ist ein Framework, welches es dem Entwickler mittels React ermöglicht, nativen Code zu produzieren. Nativ bedeutet im Fall von Android Java und im Fall von iOS Objective-C. Wie das Ganze abläuft, zeigt folgende Grafik:

React / React Native Modell

Quelle

Die obere React-Komponente würde zum Beispiel zu einem Inhalt führen, der von Browsern interpretiert werden kann. Wenn jedoch React Native verwendet wird, um eine native App zu entwickeln, ist das Ergebnis plattformspezifisch kompilierter Code, der vom jeweiligen Prozessor ausgeführt werden kann. Sehr klar ersichtlich ist, dass sich die Komponente gleich aufbaut. Sprich, die „Render“-Funktion führt schlussendlich zum User Interface. Auch alle anderen sogenannten „Lifecycle-Methods“ sind ident, lediglich die JSX-Tags unterscheiden sich.

Damit der JavaScript-Code auch von jeder mobilen Plattform verstanden wird, wird eine separate Verbindung benötigt, die sich Bridge nennt. Am häufigsten verwendet werden sicher jene für Android und iOS, jedoch gibt es noch weitere, wie zum Beispiel für MacOS oder Windows. Theoretisch kann man mit genügend Zeit für fast jede Plattform, die man unterstützen möchte, eine Bridge schreiben.

Da der native Look und das native Verhalten eine mobile App im Gegensatz zu einer Web-App ausmachen, sind diese Punkte natürlich sehr wichtig. React Native lässt es einem aber offen, ob man separate Komponenten für jede Plattform schreibt oder nicht. Ein gutes Beispiel ist hier die Navigation. Bei Android ist es ganz normal, dass sich unter der Navigationsleiste noch eine weitere Leiste mit Tabs befindet. Auf iOS gibt es dieses Verhalten so nicht, da die Tab-Bar grundsätzlich unten erscheint. Um dieses Problem zu lösen, gibt es zwei Möglichkeiten: Gleiches Design bei beiden Plattformen verwenden (und damit die Guidelines womöglich verletzen) oder zwei separate Designs implementieren. Ist einem die Material Design Guideline bzw. Apples Human Interface Guideline besonders wichtig, dann sollte man mehr Zeit einplanen und zwei separate Designs implementieren.

Einige fragen sich jetzt vielleicht, worin dann der Vorteil bei React Native liegt, wenn man erst wieder zwei Designs implementieren muss. Hier kommt wieder der Slogan von oben ins Spiel: „Einmal lernen, überall anwenden.“: Es geht NICHT darum, möglichst viele Plattformen mit einer Codebasis zu erreichen, sondern darum, dass man mit der gleichen Bibliothek für verschiedene Pattformen entwickeln kann. Es ist jedoch ein schöner Nebeneffekt, dass man den Großteil der Komponenten für iOS und Android verwenden kann, was wiederum viel Zeit einspart.

ReactiveX

Ganz ohne Überleitung kommen wir zu ReactiveX (kurz RX), da weder React noch React Native auch nur irgendetwas mit RX zu tun haben. RX ist eine API für asynchrones Programmieren durch Observer-Streams, die es für eine Liste von Programmiersprachen und Plattformen bzw. Frameworks gibt. Einfach gesagt, ermöglicht RX die Erweiterung jeder unterstützten Sprache mit dem Observer-Pattern. Das bedeutet, dass alle Variablen und Aktionen als Streams von Events dargestellt werden können. Diese Streams können wiederum beobachtet werden und es lässt sich dementsprechend darauf reagieren.

Was du nun wissen solltest

Zunächst sollte dir jetzt klar sein, dass ReactiveX nichts mit all den anderen Begriffen zu tun hat. Dass es zwischen React, ReactJS und React.js keinen Unterschied gibt, ist dir auch klar. Inwiefern React und React Native zusammenhängen und welche Anwendungsfälle welche Technologie erfordern, hast du nun auch verstanden. Im Grunde hast du das ganze Wissen, das benötigt wird, um direkt mit deiner ersten React App durchzustarten. Dabei wünsche ich dir viel Spaß und falls es Interesse an gemeinsamen Projekten mit React gibt, weißt du spätestens jetzt auch, wer dein Softwarelieferant #1 ist! 😉