Die Entwicklung einer App ist maßgeblich von der Erstellung einer optimalen User-Experience abhängig. Die App muss performant in der Nutzung und einfach verständlich sein. Die Anforderungen der Nutzer sind sehr hoch. Das ist den kostenlosen Angeboten von Google, Facebook etc. geschuldet. Den Nutzern werden mit diesen Apps kostenlose Angebote mit perfekter User-Experience zur Verfügung gestellt. Flutter und React Native sollten für App-Entwickler daher keine Fremdbegriffe sein.
Noch vor 5 Jahren waren wir Verfechter von nativer App-Entwicklung. Die Cross-Plattformangebote waren schlichtweg nicht ausgereift genug, um eine ähnlich hohe User-Experience bieten zu können. Das hat sich nun geändert. Die Technologien Flutter und React Native bieten Cross-Plattformentwicklung die für Nutzer kaum noch von nativen Apps zu unterscheiden sind.
Warum setzten wir überhaupt auf React Native und Flutter?
Diesen Absatz können wir kurz halten: Effizienz. Die Technologien React Native und Flutter bieten eigentlich nur Vorteile in der Entwicklung von Apps. Durch die Offenheit und die starke Community hinter beiden Technologien stellen Sie eine sehr effiziente Umsetzung Ihrer Anforderungen sicher. Was schneller geht in der Entwicklung ist für Sie automatisch auch günstiger. Vor einigen Jahren musste man Apps noch nativ umsetzen, um eine schöne User-Experience bieten zu können. Die Apps mussten dazu für jede Plattform komplett neu entwickelt werden. Das ist heute mit React Native und Flutter kaum noch nötig.
Flutter
Flutter ist ein Cross-Plattform Framework das die Programmiersprache Dart nutzt. Dart und Flutter wurden von Google entwickelt und auch in den meisten großen Applikationen von Google genutzt. Google arbeitet ständig daran, Flutter und Dart zur ultimativen Lösung von Cross-Plattform Anwendungen zu etablieren. Es ist weitaus jünger als React Native. Der erste Alpha-Release war im Mai 2017.
Das hauptsächliche Element von Flutter-Anwendungen sind Widgets. Widgets sind analog zu den Komponenten in React Native. Bei Flutter gibt es bereits eine große Menge an nutzbaren Widgets, die meist auf dem Material Design Konzept beruhen. Es gibt zwei Typen von Widgets: stateless widgets und stateful widgets. Das Pendant dazu sind die functional und class Components in React Native. Widgets sind aber nicht adaptiv – das heißt es müssen plattformspezifische Widgets erstellt werden.
Es ist relativ einfach in die Entwicklung auf Basis von Flutter einzusteigen. Mit nur wenigen einfachen Schritten können Sie bereits ein Projekt auf Basis erstellen und auf Ihrem Smartphone ausführen. Flutter unterstützt, genauso wie React Native, eine sogenannte Hot Reload-Funktion. Wunderbar ist das in der Entwicklung, da Sie die App nicht bei jeder Änderung zum Testen neu installieren müssen. Änderungen werden sofort sichtbar.
Flutter ist noch hinter dem Ökosystem vom React Native, da der Wettbewerber bereits zwei Jahre vor Flutter veröffentlicht wurde. Es gibt bereits tausende fertige Komponenten und Module im React Native Kontext. Aber Flutter holt sehr schnell nach und es gibt für Flutter bereits jetzt auch eine sehr große Menge an fertigen Paketen, die Ihre Entwicklungsgeschwindigkeit beschleunigen.
Wenn es um die Performance geht, ist der Ansatz von Flutter anders als der von React Native. Die Flutteranwendungen werden mittels C/C++ Bibliotheken auf Basis der ARM Technologie kompiliert. Damit ist die Applikation näher an der Maschinensprache und das führt unter Umständen zu einer besseren Performance. Auch Dart gilt als eine sehr performante Programmiersprache.
Die Dokumentation von Flutter ist sehr gut. Sie ist sehr einfach zu verstehen und auch sehr detailliert.
Flutter ist sehr jung, was dazu führt dass einige noch nicht wissen, was die ideale Architektur für Flutteranwendungen ist. Es gibt aber schon jetzt einige Architekturvorbilder, die in der Community sehr gern gesehen sind.
Beispielsweise können Sie die Business Logic Component Architektur verwenden. Diese wurde von Google vorgestellt und trennt die Business-Logik vom User-Interface.
React Native
React Native stellt den Platzhirsch bei der Cross-Plattformentwicklung von mobilen Apps dar. React Native ist ein Framework, das mittels JavaScript entwickelt wurde und auf dem Framework React basiert. Beide Frameworks wurden von Facebook erstellt. React konzentriert sich dabei auf die Entwicklung von Web-Applikationen und React Native auf die Entwicklung von Anwendungen für Smartphones, Tablets und auch andere Plattformen. Es gibt unzählige Tools zur Entwicklung für verschiedene Plattformen – beispielsweise von Microsoft für Widnows-Applikationen. Bereits 2015 wurde React Native veröffentlicht. Ein Jahr später haben wir bei econsor mobile auf diese Technologie gesetzt.
React Native nutzt Komponenten für die Entwicklung. Aber statt Web-Komponenten zu verwenden (div, h1, h2,…) werden Komponenten für mobile Anwendungen genutzt. Diese Komponenten werden genutzt, um mit den nativen UI-Elementen zu kommunizieren. So entspricht beispielsweise ein <View> einer UIView in Apple iOS.
Für die Plattform React Native gibt es nicht ganz so viele Komponenten wie bei Flutter. Jedoch ist es bei React Native möglich plattformbedingte Unterscheidungen durchzuführen. Das Ergebnis sind damit Elemente die näher an der nativen Implementierung dran sind. Als Beispiel ist hier die Implementierung des <MapView> zu nennen. Dieses ist jeweils zu 100% die native Implementierung des MapViews.
Auch bei React Native ist der Einstieg recht einfach. Mittels Expo können neue Apps in nur wenigen Minuten erstellt und auf Smartphones gestartet werden. Mittels QR-Code können sie dann auch außerhalb der jeweiligen App Stores verteilt werden. Ledigliches Einscannen des QR-Codes reicht dabei aus die App zu installieren und zu testen.
React Native war bereits seit 2015 veröffentlicht und wird seither von der Open-Source-Community weiterentwickelt und verbessert. Es ist damit das fünffache an Komponenten für React Native im Vergleich zu Flutter auf dem Markt.
Die Dokumentation von React Native ist auch gut und benutzerfreundlich geschrieben. Der Einstieg ist durch unzählige Anleitungen sehr einfach.
React Native hat einen anderen Ansatz für das Ausführen von Anwendungen als Flutter. Die gesamte Applikations ist nicht in C/C++ kompiliert. Stattdessen wird die gesamte Business-Logik mittels JavaScript ausgeführt. Die Benutzeroberfläche existiert als native Elemente. Auch ist es möglich nativen Code aus JavaScript heraus auszuführen. Dazu wird die sogenannte Bridge benutzt.
Es gibt zwei hauptsächlich genutzte Architekturen für React und React Native Anwendungen. Flux und Redux sind die verschiedenen Ansätze um Anwendungen auf React Native Basis zu entwickeln. Flux wurde von Facebook entwickelt, wohingegen Redux von der React Native Community bevorzugt genutzt wird.
Performance für React Native und Flutter
Es wird häufig dargestellt, dass Flutter eine bessere Performance bietet als die Entwicklung über React Native. Das ist dem Fakt geschuldet, dass in React Native alle Elemente als native User-Interface-Komponenten gezeichnet werden. Eine sogenannte „JS Bridge“ sorgt dafür, dass die JavaScript-Befehle nativ ausgeführt werden. Diese Bridge wird auch häufig als Bottleneck (Flaschenhals) für die Performance von React Native Apps dargestellt. Jedoch zeigen einige Analysen, dass die Unterschiede nur marginal sind und bei normalen Business-Apps kaum von der nativen Geschwindigkeit abweichen. Die Autoren verweisen darauf, dass man lediglich bei sehr CPU-Intensiven Apps auf die native Entwicklung setzen soll. Unsere Erfahrung zeigt bei der Nutzung von Apps, dass meist eher der Abruf und das Speichern von Daten auf Servern den Flaschenhals der User-Experience darstellt. Die Smartphones sind mittlerweile so Rechenstark geworden, dass man die CPUs kaum ins Schwitzen bringen kann.
Die Communities hinter React Native und Flutter
In den letzten Wochen hat Flutter einen großen Schub an Unterstützung in der Open-Source-Community erhalten. Mit aktuell 117.000 Stars ist das Github-Repository dem von React Native (95.000 Stars) voraus. Beide Plattformen haben aber weiterhin eine sehr starke Community. Während Flutter von Google initiiert und entwickelt wird, steht hinter der Technologie React Native Facebook als federführendes Unternehmen.
Welche Technologie nutzen wir in der Softwareentwicklung?
Wir nutzen für unsere Digitalisierungsprojekte schon seit Jahren die Frameworks React und React Native. In unserem Ökosystem haben wir bereits unzählige Komponenten, die für und die Entwicklung von Apps mittels dieser Frameworks extrem vereinfachen. Auch haben wir bereits native Komponenten entwickelt, die wir in unseren Projekten verwenden können. Deshalb setzen wir auch weiterhin auf React Native. Parallel nutzen wir für bestimmte Anwendungen das Flutter-Ökosystem. Beispielsweise bei CPU-intensiven Anwendungen kann es unter Umständen mal Sinn machen auf Flutter zu setzen. Welche Technologie für Sie die richtige ist, können wir nach einem kurzen Gespräch relativ schnell herausarbeiten. Basierend darauf entwickeln wir dann Ihre Applikation auf der geeigneten Plattform.
