React Native

30.11.2020

React Illustration

Platformübergreifende Entwicklung steht seit der Verbreitung von Smartphones und Tablets im Vordergrund. Ein nahtloser Übergang zwischen Smartphone, Tablet und PC macht eine Anwendung nicht nur angenehmer in der Bedienung, sondern vermittelt auch ein modernes Markenbild. Wirklich abgerundet kann die Präsentation dann werden, wenn die Anwendung von einer Cloud gestützt ist und so ein Übergang zwischen Geräten stattfinden kann, ohne dass sie selbst verbunden sein müssen.

Für die Umsetzung einer solchen Anforderung gibt es verschiedene Ansätze, die an verschiedenen Stellen den Sprung zwischen den Plattformen machen. React Native sieht hier vor schon beim Kompilieren der Anwendung auf das Zielsystem zugeschnitten zu sein. Der zugrundeliegende Code wird für Web-, iOS- und Android-Umgebungen verpackt und kann dann wie eine native Applikation auf dem Gerät ausgeführt werden.

https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/

React als Basis für eine moderne App, nicht nur im Web

Facebooks React-JavaScript-Bibliothek dient vielen großen Plattformen als Grundlage für ihre Apps. Dazu gehören Facebook selbst, Instagram und Netflix neben vielen Anderen. Die Skalierbarkeit einer React-Web-App ist somit ausführlich demonstriert, jedoch gibt es auch viele Beispiele für Plattformen, die auch den weiteren Schritt hin zu React Native gemacht haben. Dazu gehören unter anderem Shopify, Skype und Tesla.

https://reactnative.dev/showcase

Die Gestaltung einer App als Web-Applikation trägt alleine schon dazu bei sie auf verschiedenen Systemen verfügbar zu machen. Dieser Ansatz ist jedoch geplagt von Problemen der Kompatibilität und vor allem der Leistungsfähigkeit der Anwendung. Eine Anwendung, die zuerst von dem Browser des Smartphones interpretiert werden muss, wird nie die gleiche Responsivität und zeigen, die eine native App besitzt.

React Native versucht dieses Problem damit zu lösen, dass die Applikation zwar in JavaScript geschrieben wird, wie eine Web-App und HTML und CSS für Templating und Styling verwendet, wie eine Web-App, jedoch am Ende durch das Verwenden generalisierter Bausteine zu einer gleichwertigen iOS- bzw. Android-App wird, die sich auf den jeweiligen Geräten genauso verhält, als wäre sie in Swift oder Java geschrieben.

Der Erfolg dieses Ansatzes ist in einem immer mehr Prominenten Beispiel zu erkennen. Die Kommunikationsplattform Discord läuft auf iOS, Android, Windows, Mac, Linux und im Browser, augenscheinlich als wäre sie auf das System zugeschnitten. Mit React Native wurde hier eine App geschaffen, dessen Leistungsfähigkeit von essentieller Wichtigkeit für den Nutzer ist und diese Anforderung auch tadellos erfüllt. Anrufe werden ohne Verzögerung durchgestellt und sind von der Latenzfreiheit und Klangqualität auf hohem Niveau. Nachrichten werden innerhalb von einem Augenblick empfangen und versendet und das auf allen möglichen Endgeräten.

https://blog.discord.com/how-discord-achieves-native-ios-performance-with-react-native-390c84dcd502

React Native als Plattform für effiziente Entwicklung

Nicht nur der Nutzer profitiert von der Verwendung von React Native. Auch bei der Entwicklung bieten sich viele Vorteile. Der offensichtlichste ist hierbei der Entfall zweier getrennter Versionen einer App für iOS und Android. Das bedeutet nicht nur, dass der Aufwand der Portierung der Applikation entfällt, sondern auch, dass die beiden Versionen immer identisch sind.

Des Weiteren wird die Anwendung in einer einheitlichen Sprache geschrieben und fordert so nur die Kenntnis der Web-Entwicklung mit React. Hier ist zu beachten, dass React, ähnlich wie Vue.js, lediglich die Nutzeroberfläche der Anwendung abdeckt und prinzipiell vom Back-End der Anwendung entkoppelt ist.

Diese Eigenschaft bedeutet, dass React Native sich wunderbar im API-driven development nutzen lässt, da es konzeptionell für die Rolle der Darstellung der Daten vorgesehen ist, während das Back-End beliebig gewählt werden kann.

Im Kern ist API-driven development lediglich die Besinnung darauf zuerst eine Schnittstelle zu konzeptionieren, um dann den Rest der Anwendung um diese herum zu gestalten.

https://www.mertech.com/blog/api-driven-development

Auch die Modularität ist ein gemeinsames Merkmal der Designsprache von API-driven development und React. Wiederverwendbarkeit ist eines der Hauptziele der Architektur von React. Deswegen werden Funktionen und Templates unabhängig voneinander in Komponenten gelagert, die zwar miteinander kommunizieren können, jedoch nicht darauf angewiesen sind.

Ein weiterer Vorteil dieser Herangehensweise ist, dass Anwendungen so auch für den Cloud-basierten Betrieb geeignet sind. Auch wenn eine Anwendung auf mehreren Geräten ausgeführt werden kann ist der besondere Mehrwert dieser Eigenschaft erst vorhanden, wenn die Daten, die die Anwendung verarbeitet auch gerätunabhängig zur Verfügung stehen.

https://www.cloudbakers.com/blog/what-is-a-cloud-application

Durch das vorrangige Design der Schnittstelle wird dabei sichergestellt, dass es keine grundlegenden Funktionen gibt, die nicht plattformübergreifend zur Verfügung stehen, weil sie an ein spezielles Gerät gebunden sind.

Beispielsweise eignen sich Pimcore und Wagtail in diesem Kontext als Back-End-Lösungen. Dank der Möglichkeit eine Schnittstelle direkt in den Frameworks zu integrieren und so einen erweiterbaren Back-End-Stack zu bauen.

Fazit

Mit React Native wurde eine neue Möglichkeit geschaffen die Vorteile einer Web-Applikation zu nutzen, ohne dabei die Nachteile der Nutzung eines Browsers in Kauf zu nehmen. Effiziente Entwicklung auf einer zentralen Code-Basis kann so mit nativer Leistungsfähigkeit und Kompatibilität verbunden werden. Durch das Erstellen einer nativen App aus dem generellen Quell-Code vermeidet man auch das Problem, dass Apple zwar Konzepte wie die PWA unterstützt, jedoch mit merklichem Widerstand.

Web Digitalisierung Mobile
Verwandte Themen

Digitalisierungsbearatung

Weitere Informationen?

Kontaktieren Sie uns

Autor Jonas Stenger