January 17, 2024

React vs React Native - Was ist besser für deine App?

Kurz gesagt wird React Native für die Entwicklung von Apps genutzt, React hingegen für die Entwicklung von WebApps, die im Browser ausgeführt werden. Du willst wissen, welche der Technologien für dein Projekt besser geeignet sind und wie du vielleicht sogar noch ein paar Euro sparst? Dann haben wir hier genau den richtigen Leitfaden für dich!

React, das Open-Source-Framework von Facebook

Erstmal ist zu klären, dass React keine eigene Programmiersprache ist, sondern eine Sammlung aus Komponenten. Diese Komponenten ermöglichen es Entwicklern, schnell und skalierbar Applikationen zu entwickeln. Die Programmiersprache, die hinter dem Ganzen steht, ist dabei JavaScript bzw. in neueren Versionen TypeScript, das eine Abwandlung des klassischen JavaScript darstellt.

Das Ganze hört sich erstmal sehr technisch an, stell dir aber einfach vor, du willst ein Haus bauen. Hier fängst du auch nicht an, erst deine Steine in rechteckige Blöcke zu schlagen oder Glas zu brennen, sondern du setzt auf fertige Komponenten wie Backsteine, Fenster, Treppen und Türen. Diese Komponenten können natürlich je nach Belieben von dir noch angepasst werden, bieten aber erstmal eine schnelle und universell einsetzbare Grundlage, um mit dem Hausbau zu starten.

Entwickelt wurde diese Sammlung aus Komponenten ursprünglich von Facebook, da insbesondere in großen Entwicklerteams standardisierte Komponenten unabdingbar sind. Mittlerweile ist React als Open-Source-Projekt verfügbar und wird hauptsächlich von der Community betreut. Das große Tech-Konzerne ihre eigenen Frameworks entwickeln, ist dabei gar nicht so untypisch. Google hat Angular, Twitter Bootstrap und Airbnb hat mit Lottie sogar einen neuen Datenstandard für Animationen entwickelt.

React ist ein echter Alleskönner

Durch den starken Community-Support hat sich React in den letzten Jahren zu einem echten Alleskönner in der Softwareentwicklung gemausert. So gibt es mittlerweile über 10.000 von der Community gepflegte Komponenten, die einfach per Package zu deinem aktuellen React-Projekt hinzugefügt werden können.

Du willst Server-Anfragen effektiv bearbeiten? Kein Problem, installiere einfach React Query und schon hast du ein sauberes Datenmanagement für Anfragen zu deinem Backend. Du willst eine ewig lange Liste von Suchergebnissen anzeigen? Shopify hat für dich Flash-List entwickelt, das extrem viele Listeneinträge ressourcenschonend rendern kann. Du willst Google Analytics einbinden? Installiere einfach react-analytics und schon kann es losgehen.

Du siehst, durch die Komponenten, die die Community bereitstellt, wird es Programmierern ermöglicht, schnell und einfach Funktionen zu einer Applikation hinzuzufügen. Dabei bringt der Ansatz von React, so stark auf Community-Packages zu bauen, aber nicht nur Vorteile mit sich. Mehr dazu später.

Was ist der Unterschied zwischen React und React-Native

Da wir jetzt erstmal die Grundlagen von React geklärt haben, stellt sich natürlich die Frage, ob React-Native denn nicht vielleicht nur ein weiteres Community-Package ist, das man für sein React-Projekt installieren kann. Dem ist aber nicht so.

Kurz gesagt: React-Applikationen sind Applikationen, die im Browser ausgeführt werden, so genannte WebApps. Die Website von Facebook selbst ist ein gutes Beispiel dafür. React-Native hingegen wird für die Erstellung von Apps genutzt. Der Code wird dabei nicht in einem Browser ausgeführt, sondern in nativen Programmcode für Android oder iOS übersetzt.

Was sich erstmal nach keinem großen Unterschied anhört, hat in der Realität oft gravierende Folgen. Entwickler, die schonmal mit React gearbeitet haben, können zwar durchaus Patterns verstehen und Programmcode nachvollziehen, allerdings fehlt hier oft das Hintergrundwissen, welche Pakete wie miteinander kompatibel sind. So folgen oft lange und kräftezehrende Debug-Sessions, um eine React-Native-App wirklich lauffähig zu bekommen.

Wer jedoch regelmäßig mit React-Native arbeitet, hat nach einer kurzen Eingewöhnungsphase schnell den Dreh raus und kann so seine Kenntnisse aus dem Web in die App-Entwicklung übertragen.

Die App und ihr Weg auf dein Smartphone

Einer der grundlegenden Unterschiede in der Verwendung von React oder React-Native besteht darin, wie die Applikation letzten Endes auf dein Smartphone gelangt. Für React-Applikationen ist dieser Weg denkbar einfach. Der Code der Applikation wird auf einem Server bzw. in modernen Umgebungen in der Cloud gehostet. Dort läuft ein Webserver, der den Code über eine Internetadresse erreichbar macht, und Nutzer können deine Applikation einfach über den Browser an ihrem Handy aufrufen.

Jetzt denkst du dir sicherlich - Hä, warte mal, Apps downloade ich doch normalerweise über den App Store. Damit liegst du goldrichtig, hier sprechen wir von nativen Apps bzw. in unserem Kontext React-Native-Apps.

Dabei muss die Applikation erst von React-Native in eine native App umgewandelt werden, ähnlich einer .exe auf Windows-PCs. Diese App für Android oder iOS wird anschließend an den jeweiligen App Store übermittelt. Wenn dieser feststellt, dass deine Applikation alle Anforderungen erfüllt, wird sie im App Store gelistet, und User können deine App von dort aus herunterladen.

Vor- und Nachteile von React vs React-Native

Hier wird auch direkt deutlich, warum React-Native als Erweiterung zum webbasierten React-Ökosystem entwickelt wurde. User sind viel mehr daran gewöhnt, Applikationen über die App-Stores zu downloaden und haben so ein viel nativeres Nutzungserlebnis. Eine echte App halt.

React-Applikationen laufen immer im Browser, das heißt, der User muss erst die Browser-App öffnen, bevor er über die Webadresse deine App öffnen kann - eine App-in-App-Lösung praktisch. Das führt oft dazu, dass sich Interaktionen weniger responsiv anfühlen oder, je nach Browser, unterschiedlich dargestellt werden.

Also, warum hat Facebook initial überhaupt React und nicht gleich React-Native für native Applikationen entwickelt? Ganz einfach, auch die WebApp hat eine Menge Vorteile.

Zum einen kann die App egal auf welchem Gerät ausgeführt werden. Dabei ist es ganz egal, ob Android, iOS, Windows, Mac oder auch Linux. Solange das Gerät einen Browser installiert hat, wird deine Applikation für Nutzer verfügbar sein.

Dies führt dazu, dass auch Updates deutlich schneller an Nutzer ausgespielt werden können, da diese die Applikation nicht erst lokal installieren müssen. Wenn du etwas an der App ändern willst, ist diese Änderung in Sekundenschnelle für alle User verfügbar. Bei einer nativen App muss erst die App wieder in den App Store eingereicht, freigegeben und anschließend auch noch von den Usern heruntergeladen werden.

Es gibt zwar auch für React Native On-Demand-Lösungen wie Expo-Update, um die App auf allen Geräten am App Store vorbei zu updaten, jedoch ist dies nicht gerne gesehen, da sich so Apps der Richtlinienprüfung von Apple und Google entziehen können.

Mit React WebApps Geld sparen

Für viele Gründer ist das Thema Geld oft ein entscheidendes Thema, wenn es darum geht, wie die App entwickelt werden soll. Dabei ist jedoch nicht nur der Entwicklungsaufwand relevant, sondern auch, wie du später mit deiner App wieder Geld verdienen willst.

Entscheidest du dich für eine native App, die deine User im App Store downloaden können, musst du nämlich auch hier nach den Regeln von Apple und Google spielen. Bietest du in deiner App beispielsweise ein kostenpflichtiges Premiumabo an, wie es bei vielen der Fall ist, bist du verpflichtet, diese Zahlungen über den jeweiligen App Store abzuwickeln. Das hört sich erstmal nicht so dramatisch an, jedoch stellen damit die großen Konzerne sicher, dass auch sie ihr Stück vom Kuchen abbekommen, und lass dir eins gesagt sein: Sie sind hungrig!

Apple und Google schlagen dabei mit bis zu 30% für In-App-Transaktionen zu. Das heißt, von jedem Euro, den du in deiner App verdienst, darfst du vorher nochmal bis zu 30 Cent an Google oder Apple abgeben, bevor das Geld bei dir landet.
Das tut heftig weh, lässt sich aber mit einer WebApp umgehen, denn hier bist du der Boss! Da die App von praktisch jedem Gerät über den Browser erreichbar ist, bist du der alleinige Bestimmer über deine Plattform und 100% der Einnahmen gehen in deinen Geldbeutel.

Aber nicht nur hier kann React glänzen, auch die Entwicklung an sich ist oft günstiger, wenn die Applikation als WebApp mit React umgesetzt wird. Dadurch, dass der Entwickler die App nicht erst noch in eine Android bzw. iOS App umwandeln muss, sinkt der Aufwand signifikant, lange Reviewprozesse durch den App Store fallen weg und die Entwicklungszeit verkürzt sich. Somit ist insbesondere für Startups, die nur ein begrenztes Budget zur Verfügung haben, eine React Web App oft die bessere Lösung.

Was ist für deine App besser geeignet?

Letztendlich lässt sich die ganze Thematik auf ein paar wenige Faktoren herunterbrechen, die darüber entscheiden, welche Technik für dein Projekt besser geeignet ist.

[ ] Soll deine App im App Store verfügbar sein?

[ ] Muss deine App auch offline funktionieren?

[ ] Sollen Nutzer deine App direkt über den Homescreen starten können?

[ ] Ist deine Idee bereits evaluiert und bist du bereit, mehr als 50.000€ zu investieren?

[ ] Sind die Gebühren für den Appstore mit deinem Geschäftsmodell tragbar?

Wenn du alle diese Punkte mit Ja beantwortest, ist eine React-Native Applikation höchstwahrscheinlich der Way to Go für dich. Natürlich gibt es auch noch andere Wege, native Apps zu entwickeln, dazu aber in einem anderen Post später mal mehr.

Solltest du hingegen erstmal auf Offline-Funktionalitäten, den Appstore und natives App-Feeling verzichten können, ist eine Web App eine hervorragende Alternative, um deine App umzusetzen. Dazu sei gesagt, dass eine Web App auf keinen Fall schlechter ist als eine normale App, was viele Plattformen wie Facebook, Airbnb oder auch Gmail tagtäglich beweisen.

Lass dich von Experten beraten

Da kein Projekt dem anderen gleicht, ist es oft schwer, hier eine pauschale Aussage zu treffen. Dafür bedarf es eines soliden Geschäftsplans, ein gut strukturierten MVP und vor allem das richtige Team. Wir beraten dich gerne, wenn es darum geht, dein Projekt technisch zu planen und umzusetzen.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Louis Nell
CEO Knguru Studios
Moin ich bin Louis, kreativer Kopf und Gründer von KNGURU Studios. Wenn wir einmal anfangen über Technik, Startups oder Produktdesign zu quatschen kannst du dir sicher sein, das es so schnell kein halten mehr gibt. Deswegen gibt es auch mittlerweile diesen Blog in dem ich meine Reise als Startup- und Agenturgründer dokumentiere.
#app
#startup
Vera Große
UX Management
Hi, ich bin Vera! Meine Verantwortung liegt im Bereich Projektmanagement und Kundenbetreuung. In diesem Blog teilen wir nicht nur unsere Erfahrungen als Startup- und Agenturgründer, sondern auch unsere Begeisterung für kreative Ideen und visionäre Konzepte.Mit Expertise und Leidenschaft arbeiten wir daran, innovative Projekte zum Leben zu erwecken und gleichzeitig unsere eigene Reise zu dokumentieren.
#app
#startup

Buche deinen kostenlosen Videocall

Du willst mit unserem Team über dein Projekt quatschen und einfach mal hören, was wir so für dich möglich machen könnten? Dann buche dir jetzt einfach einen kostenlosen Videocall mit uns!

1
Wie können wir dich erreichen?
2
Akzeptiere unsere Datenschutzrichtlinien.
Oops! Something went wrong while submitting the form.