React Native

React Native ist ein JavaScript-Framework von Facebook zur Programmierung von mobilen Anwendungen für iOS, Android, Windows und das Web.
Vier Business Leute sitzen lachend vor einem Laptop am Schreibtisch
© bnenin

Was ist React Native?

React Native ist ein von Facebook gegründetes plattformübergreifendes Open-Source-Framework für die Entwicklung mobile Anwendungen und damit als Computersoftware öffentlich zugänglich. Ein Framework ist ein Ordnungsrahmen, unter dem eine Software durch einen zusätzlichen Code selektiv verändert werden kann, so dass eine anwendungsspezifische Software entsteht. Ein Code, oder auch Programmcode genannt, ist eine Anweisung, welche ein Computerprogramm in bestimmten Programmiersprachen schreiben lässt.

Das Entwicklungskit wird weltweit von Unternehmen und Softwareentwicklern eingesetzt, um mit nur einer Code-Basis Anwendungen für verschiedende Platforms wie Android, iOS, macOS, Windows und das Web zu programmieren. Eine Code-Basis oder auch Codebase genannt ist eine Sammlung von Codes und wird in der Softwareentwicklung zur Erstellung einer bestimmten Software oder Anwendung verwendet. Programmierer entwickeln mit React Native somit nur eine App, welche dann auf iOS, Android und anderen Betriebssystemen funktioniert. Diese Anwendungen werden Benutzern in App Stores, wie zum Beispiel dem Apple App Store oder dem Google Play Store, zur Verfügung gestellt.

Geschichte

React Native begann als internes Hackathon-Projekt innerhalb von Facebook. Ein Hackathon ist eine Veranstaltung, bei der Computerprogrammierer und Softwareentwickler intensiv an Softwareprojekten zusammenarbeiten. Das ursprüngliche Ziel des React Native Hackathons war, den Entwicklungsprozess für iOS und Android zu vereinheitlichen. Vor React Native wurden Apps auf iOS und Android hauptsächlich als Webseiten oder Web-Apps dargestellt, welche nicht in einen native Code kompiliert wurden. Dadurch wurde das Benutzererlebnis der Endanwender negativ beeinflusst.

Zum ersten Mal vorgestellt wurde React Native im Jahr 2015 auf der React.js Konferenz von Facebook. Im März 2015 ist es erstmalig in der Beta-Version auf dem Markt erschienen. Zum Zeitpunkt der Veröffentlichung wurden nur iOS Betriebssysteme unterstützt, mittlerweile werden React Native Anwendungen auch auf Plattformen wie Android, Windows und Tizen problemlos eingesetzt, da das Framework einem starken Wachstum unterlegen ist.

2017 hat Facebook React Native unter MIT Open Source Lizenz gestellt. Die MIT (Massachusetts Institute of Technology) - Lizenz ist eine Lizenz für kostenlose Software, die ihren Ursprung am Massachusetts Institute of Technology in den späten 1980er Jahren hat. Sie schränkt die Wiederverwendung nur sehr begrenzt ein und hat daher eine hohe Lizenzkompatibilität. Dadurch kann das Framework kommerziell und kostenlos genutzt werden. Seit November 2020 ist der Stable Release verfügbar.

Funktionsweise

React Native ist von React inspiriert, einer JavaScript Softwarebibliothek. Mittels React können Benutzeroberflächen erstellt werden. Sie ist die sogenannte Basis bei der Entwicklung von Anwendungen. React Native-Anwendungen sind überwiegend in JavaScript, geschrieben. JavaScript ist eine Programmiersprache, welche häufig in der Software- und Webentwicklung eingesetzt wird.

Es gibt zwei wichtige Threads, die in jeder React Native-Anwendung laufen. Ein Thread ist als Teil eines Prozesses (Computerprogramm zur Laufzeit) die Ausführungsreihenfolge in der Bearbeitung eines Computerprogramms. Dadurch weiß ein Computerprogramm immer genau, für welchen User es gerade aktiv ist.

Einer der zwei Threads ist der Haupt-Thread. Er kümmert sich um die Anzeige der Elemente der Benutzeroberfläche und verarbeitet Benutzergesten. Der andere ist spezifisch für React Native. Seine Aufgabe ist es, den JavaScript-Code separat auszuführen. Das JavaScript befasst sich mit der Geschäftslogik der Anwendung. Es definiert auch die Struktur und die Funktionalitäten der Benutzeroberfläche.

Diese beiden Threads kommunizieren nie direkt miteinander und blockieren sich nicht gegenseitig.

React Native Entwickler

Um eine App mit React Native zu entwickeln, gibt es für Privatpersonen und Unternehmen verschiedene Möglichkeiten. Sie können entweder eine Application selber programmieren oder professionelles Personal einstellen. Außerdem können für den Development Prozess Freelancer oder Softwareagenturen beauftragt werden.

Für die Entwicklung einer App mittels React Native wird zuerst der Code in JavaScript geschrieben. React Native generiert daraus einen plattform-spezifischen Code, so dass eine mobile App entsteht. Entwickler müssen mit React Native somit nur eine App entwickeln, welche dann auf iOS und Android funktioniert.

Zu den wichtigsten Funktionen, die React Native für Entwickler bietet, gehören die Folgenden:

Hot Reload

Der Hot Reload ist ein wesentliches Bestandteil hinter der Technologie von React Native. Mittels dieser Eigenschaft können User Interface (kurz: UI; Deutsch: Benutzeroberfläche) erstellt, Funktionen hinzugefügt und Fehler behoben werden.

Die Idee hinter Hot Reloading ist, die App am Laufen zu halten und neue Versionen der Dateien, die während der Laufzeit von Benutzern bearbeitet wurden, zu injizieren. Ohne der Hot Reload Funktion müssten Nutzer nach jedem Update die Seite in ihrem Webbrowser aktualisieren und Data müsste erneut hinzugefügt werden. Ein Webbrowser ist ein Programm auf dem Computer zu Darstellung von Websites im Internet.

JSX

React Native verwendet JavaScript XML (kurz JSX), eine Syntax-Erweiterung zu JavaScript, um Komponenten zu erstellen und zu verändern, ohne die Struktur oder den Code zu verkomplizieren.

Flexbox

React Native verwendet ein Layout-Modell aus dem Web namens Flexbox. Die Aufgabe der Flexbox ist das Zusammenfügen alle Elemente einer Website in ein Layout. Dabei passt sich das Layout flexibel an das jeweilige Display an. Flexbox vereinfacht somit den Prozess der Erstellung gängiger UI-Layouts.

Node Package Manager

Für die Entwicklung einer App verwendet React Native node.js und den dazugehörigen Node Package Manager (NPM).

Node.js ist eine plattformübergreifende Open-Source-JavaScript-Laufzeitumgebung. Laufzeitumgebung kann als die zur Laufzeit von Programmen verfügbaren Voraussetzungen eines bestimmten Laufzeitsystems definiert werden. Mit node.js kann ein JavaScript Code außerhalb eines Webbrowsers ausgeführt werden. NPM ist der dazugehörige Paketmanager und ist zuständig für die Verwaltung, beispielsweise Installieren und Aktualisieren, von Softwares, die in Programmpaketen vorliegen.

React Native Endanwender

Auch für die Endanwender einer mit React Native programmierten App gibt es verschiedene sichtbare Funktionen, von denen sich React Native von anderen Frameworks unterscheidet:

Bildschirminteraktion

Da die Gestenerkennung auf einem mobilen Endgerät weiter fortgeschritten ist als jene im Web, gibt es verschiedene Aktionen, die durch den Touch interpretiert werden können, wie zum Beispiel Scrollen, Schieben oder Tippen.

Auch mehrere Berührungen können gleichzeitig durchgeführt werden. Normalerweise bemerken Nutzer den Unterschied zwischen einer Web App und einer nativen App schnell. Jeder Nutzer sollte die Möglichkeit haben, eine Aktion abzubrechen, indem er den Finger wegzieht. Dies ist jedoch nicht immer möglich.

Indem eine abstrakte Touchable- und Touchable-Highlight-Implementierung hinzugefügt wurde, welche sich gut mit Scrolls und anderen Elementen verträgt, ohne dass eine zusätzliche Konfiguration notwendig ist, konnte dieser Umstand behoben werden.

Community-Unterstützung

Flutter ist ein Open-Source Framework. Das bedeutet, dass es immer wieder externe Beiträge gibt, Wissen weitergegeben wird und Probleme effektiv durch verschiedene Community-Mitglieder gelöst werden.

Upgrade Helper

Das Tool wurde entwickelt, um eine ältere Version von React Native in ein neueres umzuwandeln. Mit dem Upgrade Helper können Nutzer den Unterschied zwischen der alten und der neuen Version sehen.

Anwendungsbeispiele

Ein Beispiel für eine mobile App, die mit React Native entwickelt wurde, ist die Anwendung Skype. Skype ist ein seit 2003 verfügbarer internetbasierter Instant-Messaging-Dienst, welcher seit 2011 zu Microsoft gehört. Mit Skype können Nutzer Text, Video, Audio und Bilder übertragen. Außerdem ermöglicht die Anwendung Videokonferenzen. Anfang 2017 gab Skype bekannt, dass das Unternehmen an einer neuen App arbeitet, die in React Native geschrieben ist. Die neue Version wurde komplett überarbeitet und es wurden neuen Features hinzugefügt. React Native wurde nicht nur für die mobile App von Skype sondern auch für die Windows Desktop App verwendet.

Die App Instagram wurde ebenfalls mit React Native entwickelt. Instagram ist ein US-amerikanischer Foto- und Video-Sharing-Dienst des sozialen Netzwerks Facebook, der von Kevin Systrom und Mike Krieger gegründet und ursprünglich im Oktober 2010 für iOS eingeführt wurde. React Native wurde für Instagram aufgrund der integrierten Funktionen wie Push-Benachrichtigungen, der Bereitstellung einer ansprechenden Benutzeroberfläche, der schnelleren Auslieferung von Funktionen, der höheren Geschwindigkeit für Entwickler und vielem mehr verwendet.

Bedeutung

In den letzten Jahren ist die Anzahl an solchen Mobile App Frameworks gestiegen. Weitere Open Source Frameworks sind beispielsweise Flutter von Google und Xamarin von Microsoft. In den Jahren 2019 und 2020 war React Native laut einer Studie von Statista das meistgenutzte plattformübergreifende mobile Framework. 42% der befragten Programmierer benutzten in den beiden Jahren React Native zur Entwicklung von Webanwendungen.

Vorteile

Ein Vorteil von React Native ist die Codebase. Mit nur einer einzigen Codebasis können Apps auf verschiedenen Plattformen entwickelt werden.

Während der Programmierung mit React Native wird jede Veränderung am Code sofort in der App sichtbar. Außerdem ist der Zugriff auf React Native kostenlos für Nutzer.

Zusätzlich bietet React Native die Möglichkeit an, entweder die Benutzeroberfläche mithilfe vorgefertigter Komponenten, beispielsweise Auswahl oder Schaltfläche, oder mit eigenen Komponenten zu erstellen.

TenMedia - Webagentur in Berlin

TenMedia ist eine dynamische Softwareagentur im Herzen von Berlin, direkt am Rosa-Luxemburg-Platz. Seit unserer Gründung im Jahr 2011 sind wir Spezialisten für Individualsoftware, Online-Plattformen, Datenbanken und Cloudanwendungen. Außerdem entwickeln wir Apps für Android, iOS und viele andere Betriebssysteme. Für die Ausführung von Kundenaufträgen verwenden wir stets modernste Technologien und Frameworks.

Wir freuen uns über Ihre Ideen und sind jeder Zeit telefonisch, per E-Mail oder persönlich in unserem Büro in Berlin Mitte für Sie erreichbar.