React vs. React Native: Which Framework Fits Your App?

In short, React Native is used to develop apps, whereas React is used to develop WebAppsThat run in the browser. Do you want to know which of the technologies are more suitable for your project and how you might even save a few euros? Then we have just the right guide for you!

‍

React, Facebook's open-source framework

First of all, it should be clarified that React is not a separate programming language, but a collection of components. These components enable developers to develop applications quickly and scalably. The programming language behind the whole thing is JavaScript or, in more recent versions, TypeScript, which is a variant of classic JavaScript.

The whole thing sounds very technical at first, but just imagine that you want to build a house. Here you don't start to cut your bricks into rectangular blocks or burn glass first, but you rely on finished components such as bricks, windows, stairs and doors. These components can of course be adjusted as you wish, but for now they provide a quick and universally applicable basis for starting building a house.

This collection of components was originally developed by Facebook, as standardized components are essential, especially in large development teams. React is now available as an open source project and is mainly maintained by the community. The fact that large tech companies develop their own frameworks is not all that untypical. Google has Angular, Twitter Bootstrap, and Airbnb has even developed a new data standard for animations with Lottie.

‍

React is a true all-rounder

Thanks to strong community support, React has become a real all-rounder in software development in recent years. For example, there are now over 10,000 components maintained by the community, which can be easily added to your current React project via a package.

Do you want to process server requests effectively? No problem, just install React Query and you have clean data management for queries to your backend. Want to display an eternally long list of search results? Shopify has developed Flash-List for you, which can render an extremely large number of list entries in a resource-saving man. Do you want to integrate Google Analytics? Just install React-Analytics and you're ready to go.

As you can see, the components that the community provides enable programmers to quickly and easily add features to an application. However, React's approach of relying so heavily on community packages has more than just advantages. More about that later.

‍

What is the difference between React and React-Native

Now that we've clarified the basics of React, the question naturally is whether React-Native isn't just another community package that you can install for your React project. But that is not the case.

In short: React applications are applications that run in the browser, so-called WebApps. Facebook's website itself is a good example of this. React-Native, on the other hand, is used to create apps. The code is not executed in a browser, but translated into native program code for Android or iOS.

What doesn't sound like a big difference at first often has serious consequences in reality. Developers who have worked with React can certainly understand patterns and understand program code, but they often lack the background knowledge of which packages are compatible with each other and how. This is often followed by long and exhausting debugging sessions to really get a React Native app up and running.

However, anyone who regularly works with React-Native will quickly get the hang of it after a short period of familiarization and can thus transfer their knowledge from the web to app development.

‍

The app and its way to your smartphone

One of the fundamental differences in using React or React-Native is how the app ultimately reaches your smartphone. For React Applications, this method is extremely easy. The application code is hosted on a server or, in modern environments, in the cloud. There is a web server running that makes the code accessible via an Internet address, and users can simply access your application via the browser on their mobile phone.

Now you're probably thinking - Hmm, wait a minute, I usually download apps from the App Store. You're absolutely right, here we're talking about native apps or, in our context, react-native apps.

The application must first be converted from React-Native to a native app, similar to an .exe on Windows PCs. This app for Android or iOS is then sent to the respective app store. If they find that your app meets all requirements, it will be listed in the App Store, and users can download your app from there.

‍

Pros and cons of React vs React-Native

Here it is also immediately clear why React-Native was developed as an extension to the web-based React ecosystem. Users are much more used to download applications via app stores and thus have a much more native user experience. It's just a real app.

React Applications Always Run in the Browser, which means that the user must first open the browser app before they can open your app via the web address — a practical app-in-app solution. This often means that interactions feel less responsive or, depending on the browser, are displayed differently.

So why did Facebook initially develop React and not immediately React-Native for native applications? Quite simply, the WebApp also has a lot of advantages.

On the one hand, the app can be run on any device. It doesn't matter whether Android, iOS, Windows, Mac or even Linux. As long as the device has a browser installed, your app will be available to users.

As a result, updates can also be delivered to users much faster, as they do not have to install the application locally first. If you want to change something about the app, this change is available to all users in seconds. With a native app, the app must first be submitted back to the App Store, approved and then downloaded by users.

Although there are also on-demand solutions for React Native, such as Expo Update to update the app past the App Store on all devices, this is not welcome, as it allows apps to Evade Apple and Google's policy review.

‍

Save money with React WebApps

For many founders, the topic of money is often a decisive issue when it comes to how the app should be developed. However, it is not only the development effort that is relevant, but also how you want to earn money again later with your app.

If you choose a native app that your users can download from the App Store, you must also play according to the rules of Apple and Google here. For example, if you offer a paid premium subscription in your app, as is the case with many, you are required to process these payments via the respective app store. That doesn't sound so dramatic for now, but the big corporations are making sure that they too get their piece of the cake, and let me tell you one thing: They're hungry!

Apple and Google are up to 30% for in-app transactions. This means that for every euro you earn in your app, you can give up to 30 cents to Google or Apple before the money ends up with you.
It hurts a lot, but you can handle it with a web app, because you're the boss here! Since the app is accessible from virtually any device via the browser, you are the sole determiner via your platform and 100% of the income goes into your wallet.

But it is not only here that React can shine, but also the unfolding In itself, it is often cheaper if the application is implemented as a web app with React. Since the developer does not have to convert the app into an Android or iOS app first, the effort is significantly reduced, long review processes through the App Store are eliminated and development time is reduced. A React web app is therefore often the better solution, especially for startups that only have a limited budget available.

‍

Which is more suitable for your app?

In the end, the whole topic boils down to a few factors that determine which technology is more suitable for your project.

[] Should your app be available on the App Store?

[] Does your app also have to work offline?

[] Should users be able to start your app directly from the home screen?

[] Has your idea already been evaluated and are you ready to invest more than €50,000?

[] Are the fees for the app store sustainable with your business model?

If you answer yes to all of these points, a React-Native application is most likely the way to go for you. Of course, there are other ways to develop native apps, but more about that in another post later.

However, you should be able to do without offline functionalities, the app store and native app feeling for now, a web app is an excellent alternative to implement your app. It should be said that a web app is by no means worse than a normal app, as many platforms such as Facebook, Airbnb or even Gmail prove every day.

‍

Get advice from experts

Since no two projects are the same, it is often difficult to make a general statement here. This requires a solid business plan, a well-structured MVP And above all, the right team. We are happy to advise you when it comes to technically planning and implementing your project.

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.

‍