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!
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.
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.
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.
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.
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.
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.
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.
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.
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!