November 22, 2023

App-Entwicklung mit React Native: Vor- und Nachteile

Sobald du dich mit dem Thema App-Entwicklung auseinandersetzt, wird dir wahrscheinlich sehr schnell klar: Es gibt eine ganze Menge verschiedener Möglichkeiten, eine App entwickeln zu lassen. Unser Mittel der Wahl ist dabei React Native, da wir mit diesem Framework am meisten Erfahrung haben, aber passt das auch für dein Projekt?

Spezialisierung von Entwicklern mobiler Apps

Als Erstes ist wichtig zu erwähnen, dass der beste Ansatz für die Entwicklung deines App-Projekts der ist, mit dem dein Entwickler am besten vertraut ist. Es bringt nichts, einem Entwickler ein Framework aufzudrängen, mit dem er bisher kaum gearbeitet hat. Leider treffen hier oft zwei Welten aufeinander - Kunden, die irgendwo mal ein paar Sätze über Methoden zur App-Entwicklung gelesen haben, und Entwickler, die jede Programmiersprache in ihren Tech-Stack aufnehmen, in der sie mal ein Hello-World-Programm entwickelt haben.

Achte also genau darauf, dass du dich von deinem Entwickler beraten lässt, welche Programmiersprache für dein Projekt geeignet ist und dass dieser auch ganz offen kommuniziert, was er NICHT kann. Wenn dir jemand sagt, er kann in jeder Sprache programmieren – dann lauf. Du willst einen Experten und keinen Amateur, der alles nur so halb kann - so kannst du teure Fehler bei der App Entwicklung vermeiden.

Einsatzgebiet Web-App vs. Mobile App

Ursprünglich wurde React für die Entwicklung von sogenannten Web-Apps von Facebook entwickelt. Web-Apps kannst du einfach im Browser aufrufen und darüber auch nutzen, jedoch nicht im App-Store herunterladen. Um diese Lücke zu schließen, wurde React Native ins Leben gerufen. Damit ist es möglich, Apps zu entwickeln, die alle nativen Features wie Push-Nachrichten, GPS und das Kamera-Feature nutzen. Zudem können deine Kunden ihre App auf dem Homescreen ablegen und mit nur einem Klick erreichen. Auch ist die User-Experience bei mobilen Apps oft deutlich besser als bei Web-Apps.

Eine Codebasis - zwei Apps

Bei React Native spricht man von einem Cross-Plattform-Framework. Das bedeutet am Ende nichts anderes, als dass aus dem Code deiner React-Native-App sowohl eine Android- als auch eine iOS-Applikation generiert werden kann. So kann gleichzeitig für iOS und Android entwickelt werden, was den Pflegeaufwand der App um bis zu 50% gegenüber nativen Apps reduziert.

Jetzt hört man aber oft: “Du musst deine App nativ entwickeln”, sprich getrennte Applikationen für Android und iOS – aber warum eigentlich? Bis vor einigen Jahren hatten Cross-Plattform-Frameworks noch den Ruf, deutlich weniger „responsive“ zu sein als eine nativ entwickelte App – dieses Vorurteil ist heute aber nichtig. Viele der Apps, die du heute auf dem Smartphone hast, wurden komplett oder zumindest teilweise mit Hilfe von React Native entwickelt – Soundcloud, Instagram, Facebook, Microsoft Office oder auch Discord.

Native Entwicklung für aufwendige Projekte

Wenn wir Kunden dabei beraten, ob React/React Native-Apps zu ihrem Projekt passen könnten, kommt es dabei oft auf ein entscheidendes Thema an: Wie innovativ ist deine App? Natürlich hört sich das im ersten Moment etwas fies an, jedoch entscheidet diese Frage oft darüber, ob es sinnvoll ist, React Native zu nutzen oder nicht. Eine einfache Faustformel hierbei ist: Wenn es dein Feature schonmal in einer anderen App so oder so ähnlich gibt, kann es auch ohne Probleme in React Native entwickelt werden.

Eine native App macht oft erst Sinn, wenn die App besondere Funktionalitäten des Smartphones nutzen soll oder komplett neue Wege geht, wenn es um die Funktionalität einer App geht.

Deine App soll einen Feed haben? Live-Stream? Chat? Notifications? Gruppen? Foto-Upload? Das ist alles ohne Probleme mit React Native umsetzbar. Du willst aufwendige Fotos in der App bearbeiten, Videos schneiden oder 3D-Objekte mit Lidar scannen? Hier macht eine native App-Entwicklung in den meisten Fällen definitiv mehr Sinn.

React Native lebt von der Community

React Native wurde zwar von Facebook entwickelt, lebt aber vor allem von seiner großen Open-Source-Framework-Community. Hier stellen hunderte Entwickler kostenfrei ihre entwickelten Elemente füreinander bereit, was es oft einfacher macht, eine neue Funktion für eine App zu entwickeln. Einen Datums-Picker? Klar, hat das schonmal jemand gemacht! Eine Tab-Bar wie bei Instagram? Auch dafür gibt es natürlich ein fertiges Package!

Der Nachteil liegt hierbei jedoch darin, dass React Native ohne diese Community-Pakete ganz schön nackt dasteht. Das bedeutet, wenn du auf Pakete von Dritten bei der Entwicklung verzichten willst, musst du in React Native wirklich alles von Null auf selbst bauen. Zudem werden die Community-Pakete oft nur ehrenamtlich gepflegt. Das führt dazu, dass diese mitunter veraltet und nicht mehr mit der von dir genutzten React-Native-Version kompatibel sind.

Umso wichtiger ist es daher, Pakete, die man für seine App nutzt, sorgfältig auszuwählen, um auch sicherstellen zu können, dass diese langfristig in der App genutzt werden können. Eine hohe Nutzerzahl und regelmäßige Updates deuten immer auf eine gesunde Community für ein Paket hin. Wenn ein Paket seit vier Jahren keine Updates mehr bekommen hat, solltest du dich jedoch lieber nach anderen Optionen umschauen.

Buildservices machen dein Leben einfacher!

Um aus Code eine fertige App zu generieren, muss dieser erst einmal kompiliert werden. Anschließend erhält man eine Datei, die je nach App-Store auf verschiedene Arten hochgeladen und verarbeitet werden muss. Dieser Prozess der Bereitstellung der App ist dabei insbesondere bei Apple relativ aufwendig, da hierfür das hauseigene Programm Xcode genutzt werden soll. Das Problem dabei: Nicht jeder Entwickler entwickelt auf einem Mac.

Hier kommt eines unserer Lieblingsprojekte unter React Native zum Einsatz – Export mit EAS Cloud-Services. Grob erklärt handelt es sich hierbei um einen Mac, der in der Cloud läuft und dort für dich deinen Programmcode in eine iOS-App übersetzt. Jetzt kommt der coole Teil – da deine App schon einmal in der Cloud liegt, kann diese nun direkt von EAS an den App-Store gesendet werden, ohne dass du das App-File einmal selbst auf deinem PC haben musstest.

Dies ermöglicht es insbesondere als Remote-Team, sauber und schnell neue Builds für den App-Store zur Verfügung zu stellen, ohne dass jemand bei sich selbst auf dem PC minutenlang warten muss, bis die App fertig kompiliert ist. So ist plattformübergreifende Entwicklung für ein Remote-Team wie uns deutlich einfacher professionell umzusetzen.

React Native und die Zukunft

Wenn man eine App für viel Geld entwickelt, soll diese natürlich nicht in wenigen Jahren schon veraltet sein. Insbesondere Entwicklungsframeworks kommen und gehen oft schneller, als man gucken kann. Dabei reicht es schon einmal, aufs falsche Pferd zu setzen, und schon verdoppeln sich die zukünftigen Entwicklungskosten.

React Native hat hierbei zwei entscheidende Vorteile. Zum einen ist es schon recht lange am Markt, und mittlerweile hat sich eine große Community um das Projekt gebildet. Das führt dazu, dass insgesamt ein großes Interesse daran besteht, dass React Native nicht veraltet und immer wieder neue Updates eingeführt werden. Zum anderen steht mit Meta (Facebook) ein großer Konzern hinter dem Projekt, das das Framework für interne Zwecke nutzt. Da auch Facebook mit großer Wahrscheinlichkeit wenig Interesse an einer Neuentwicklung ihrer gesamten App-Infrastruktur hat, sollte React Native auch zukünftig seine Relevanz behalten können.

Andere Alternativen für Cross-Plattform-Frameworks

Natürlich ist React Native nicht die einzige Alternative, wenn es darum geht, Applikationen Cross-Plattform zu entwickeln. Einer der bekanntesten Mitstreiter hierbei ist Flutter, das von Google entwickelt wird. Auch wenn Flutter noch viel jünger als React Native ist, hat es sich mittlerweile fest als Alternative etabliert.

Dadurch, dass Flutter schon out of the box mehr Komponenten für die Entwicklung mit sich bringt, ist es weniger darauf angewiesen, dass die Community Pakete für bestimmte Funktionalitäten bereitstellt. Im Vergleich zu React Native, wo man in TypeScript entwickelt, kommt bei Flutter Dart zum Einsatz – ebenfalls eine Programmiersprache aus dem Hause Google. Dart ist zwar sehr performant, jedoch deutlich weniger verbreitet als TypeScript, was dazu führt, dass es deutlich weniger Entwickler gibt, die bereits einmal mit Dart gearbeitet haben.

Alles eine Frage der Kosten

Am Ende muss man sagen, dass man mit jeder Lösung, egal ob WebApp, nativ oder Cross-Plattform, ans Ziel kommen kann – die Frage ist dabei nur, was es kostet. Du solltest immer versuchen, eine Lösung zu wählen, die nachhaltig, aber nicht „over-engineered“ ist. Eine Lösung, die nicht zu viel kostet, aber auch nicht am falschen Ende spart. Ein guter Entwickler berät dich dabei unabhängig und sagt auch ganz offen, wenn er nicht der richtige Partner für dein Projekt ist. Ein guter Entwickler gibt nicht vor, sondern erklärt die Optionen und hilft dir dabei, eine Entscheidung zu treffen, objektiv und in deinem Interesse.

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.
#development
#learning
#mobile
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.
#development
#learning
#mobile

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.