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 🙂


React-Native for app development?

There comes the order. An app is to be developed for Android, iOS and as a WebApp. Does React-Native lend itself to development?

Do we develop standalone apps for the systems? Kotlin for Android, Swift for Apple and a React app as a web platform?

Kotlin Logo
Swift Logo
React-Native Logo

This costs time, know-how and a lot of maintenance work. As a small company, it’s a big commitment. But there was something else.

React-Native an open source framework that first promises that you can generate native code from it for Android, iOS and a web app.

Sounds good, but is it really that simple, why isn’t everyone using it?
What are the pros and cons?
Is there a good reason not to do it, or is everyone else stupid? 

In the past we have developed apps on a native code basis, like the Dialego Panel App, available for free in the Apple AppStore and Google PlayStore

In the app, you have the option of taking part in surveys to which you can be invited by the market research institute Dialego AG. The prerequisite for this is registration in the Dialego panel.
The panel points earned through this can be managed there. Once a certain quota has been reached, they can be donated or paid out. Donations go to the non-profit organisation Dialego Foundation. You can redeem it for a voucher from e.g. Amazon. An account transfer is also possible.

In this development, it has already been noticed that it is quite time-consuming when making changes to in-app functions if you have to adapt the front-ends to several code bases.

We looked at the pros and cons, for developing in React-Native, and determined for us that the pros outweighed the cons. 

React-Native advantages and disadvantages

Advantages

  • Shorter development time
  • You need smaller teams
  • 1 framework for multiple platforms
  • Maintainability made easier

Disadvantages

  • You still need native programming language skills for special components
  • It’s from Facebook

Our attention was particularly focused on code maintainability and development time. 

Since there was only limited experience with React-Native in our development team, we had to educate ourselves in this area. Good resources for this are, for example, the getting started documents, which are very well described and explained.

I, for example, have worked through the udemy.com course by Erik Behrends, which explains how to install the components using Expo and React-Native. You learn how to develop with the help of sample test apps. The builds are then generated from this. At the end, there is also a chapter on deployment in the respective app stores.

Hindrances we encountered was an incompatibility with some packages. Which work for iOs and Android but not for the WebApp. With increasing experience in the framework, it is easy to learnI what works and what doesn’t on the web. 

For us, it was sobering at first that the app does not run directly on the web, as promised.

However, you can quickly fix the problem by writing wrappers for it. The corresponding components are split into classes for the mobile platforms. The same applies to the web classes. Common functionalities are included in the main class.

React-Native screenshot base class
React-Native screenshot extended class

Overall, the development in React-Native was fun. Despite the time it took to get used to the new structures and programming paradigms, we incurred less costs in development than if we had developed the two apps natively for Android, iOs and the web. Although we would have had previous experience there.

React-Native mobile screen login
React-Native mobile screen new entry

Further information on the Bürgerlabor Münsterland project can be found here.

As a little secret tip, the design of the app can be tested excellently with our tool FeedMap 🙂

X