Da kommt der Auftrag. Eine App soll für Android, iOS und als WebApp entwickelt werden. Bietet sich React-Native zur Entwicklung an?

Entwickeln wir eigenständige Apps für die Systeme? Kotlin für Android, Swift für Apple und eine React-App als WebPlattform?

Kotlin Logo

Swift Logo
React-Native Logo

Das kostet Zeit, Know-How und viel Wartungsarbeit. Als kleines Unternehmen ist das ein großes Commitment. Aber da gab es ja noch etwas.

React-Native ein Open-Source-Framework das erstmal verspricht, dass man daraus nativen Code für Android, iOS und eine Web-App generieren kann.

Klingt gut, aber ist das wirklich so einfach, warum nutzen es nicht alle?
Was sind die Vor und Nachteile?
Gibts es doch einen guten Grund das nicht zu tun, oder sind alle anderen Blöd ? 

In der Vergangenheit haben wir schon Apps entwickelt auf nativer Code-Basis, wie die Dialego Panel App, kostenfrei erhältlich im Apple AppStore und Google PlayStore

In der App hat man die Möglichkeit an Umfragen teilzunehmen, zu denen man von dem Marktforschungsinstitut Dialego AG eingeladen werden kann. Voraussetzung dafür ist die Registrierung in dem Dialego-Panel.
Die dadurch verdienten Panelpunkte können dort verwaltet werden. Ab einem gewissen Kontingent können diese gespendet, oder ausgezahlt werden. Spenden gehen an die Non-Profit Organisation Dialego Foundation. Einlösen kann man sie z.B. für einen Gutschein von z.B. Amazon. Auch eine Konto-Überweisung ist möglich.

Bei dieser Entwicklung hat man schon gemerkt, dass es bei Änderungen an In-App-Funktionen ziemlich aufwendig ist, wenn man die Frontends an mehreren Code-Basen anpassen muss.

Wir haben uns die Vor- und Nachteile, für die Entwicklung in React-Native, angesehen und haben für uns festgelegt, dass die Vorteile die Nachteile überwiegen. 

React-Native Vor- und Nachteile

Vorteile

  • Kürzere Entwicklungszeit
  • Man benötigt kleinere Teams
  • 1 Framework für mehrere Plattformen
  • Wartbarkeit erleichtert

Nachteile

  • Für spezielle Komponenten benötigt man trotzdem native Programmiersprachen-Kenntnisse
  • Es ist von Facebook

Unser Augenmerk lag dabei besonders auf der Wartbarkeit des Codes und der Entwicklungszeit. 

Da nur Begrenzt Erfahrung mit React-Native in unserem Entwickler-Team bestand mussten wir uns in diesem Bereich fortbilden. Gute Ressourcen dafür sind z.B. die getting started Dokumente, die sehr gut beschrieben und erklärt sind.

Ich z.B. habe dazu auf udemy.com den Kurs von Erik Behrends durchgearbeitet, der mit Expo und React-Native erläutert, wie man die Komponenten installiert. An Beispiel-Test-Apps lernt man dort die Entwicklung. Anschließend daraus die Builds generiert. Am Ende geht auch ein Kapitel über das Deployment in die jeweiligen App-Stores.

Mit expo.io  ist es möglich die React-Native Apps in Entwicklungssimulatoren für Android und iOs Geräte zu testen. Die entsprechenden Builds werden damit auch erstellt.

Hindernisse auf die wir gestoßen sind, war eine Inkompatibilität mit einigen Paketen. Die zwar für iOs und Android funktionieren, aber nicht für die WebApp. Mit steigender Erfahrung in dem Framework ist leicht zu lernenI was im Web funktioniert und was nicht. 

Für uns war es erstmal ernüchternd, das die App doch nicht, wie versprochen, direkt im Web läuft.

Allerdings kann man das Problem schnell beheben, in dem man Wrapper dafür schreibt. Die entsprechenden Komponenten werden für die mobilen Plattformen in Klassen aufgeteilt. Gleiches gilt für die Web-Klassen. Gemeinsame Funktionalitäten werden in die Hauptklasse aufgenommen.

React-Native App-Screenshot Bürgerlabor Münsterland Login
React-Native App-Screenshot Bürgerlabor Münsterland Neuer Eintrag

Insgesamt war die Entwicklung in React-Native spaßig. Trotz Einarbeitungszeit in die neuen Strukturen und Programmier-Paradigmen haben wir in der Entwicklung weniger Kosten verursacht, als wenn wir die beiden Apps nativ für Android, iOs und das Web entwickelt hätten. Obwohl wir da schon Vor-Erfahrung gehabt hätten.

App-Screenshot Bürgerlabor Münsterland Login
App-Screenshot Bürgerlabor Münsterland Neuer Eintrag

Weiter Infos zum Projekt Bürgerlabor Münsterland, erhält man hier.

Als kleiner Geheimtipp, das Design der App kann hervorragend mit unserem Tool FeedMap getestet werden 🙂

X