iOS Development | React Native

Thomas Polaschek
Sonntag, 08. Dezember 2019

Man mag zu Social Media stehen wie man will, eine gute Eigenschaft von Facebook, Twitter und Co ist aber, dass bei deren eigenen Entwicklungen gelegentlich brauchbare Frameworks - quasi als Nebenprodukt - entstehen, die dann für die Community freigegeben werden und somit auch anderen Entwicklern gute Dienste leisten können.

So hat uns Twitter seinerzeit Bootstrap beschert und einige Jahre später hat dann auch Facebook ein Application Framework veröffentlicht, das uns helfen soll, mobile Apps zu entwickeln, die sowohl auf iOS- als auch auf Android-Geräten einwandfrei funktionieren.

Was ist React Native nun genau?

React Native basiert auf dem JavaScript Framework „React“, das man bereits aus der Webentwicklung kennt. Der Aufbau und die Handhabung sind praktisch ident, nur nutzt man bei der Entwicklung für mobile Endgeräte eigene, speziell hierfür entwickelte Komponenten, anstelle von HTML und CSS.

Die Auswahl an Komponenten ist – im Vergleich zu anderen Frameworks – gut, aber nicht üppig und diese Komponenten sind auch nicht immer besonders flexibel, was das Styling betrifft. Zwar passen sich viele an die Stylinganforderungen von iOS und Android an, aber möchte man selbst etwas am Look and Feel ändern, so muss man meist tiefer in die jeweilige Komponente eingreifen. Tiefgreifendes Umstylen mittels CSS ist so nicht möglich.

Weiters gibt es zum Teil unterschiedliche Komponenten für iOS und Android und man muss plattformspezifische Unterscheidungen vornehmen, um die jeweils passende Komponente für die entsprechende Plattform zu laden.

Auch bei React Native entwickelt man in JavaScript bzw. in TypeScript, sofern man das möchte und erhält am Ende eine native iOS- bzw. Android App. Die App ist danach, zumindest unter der Haube, immer noch eine JavaScript Applikation, wie man es z.B. von Node.js her kennt, erkennbare Einbußen bei der Performance konnten wir aber dennoch nicht feststellen.

Auf die harte Tour – der Einstieg

Grundsätzlich ist der Einstieg in React Native keine große Sache, sofern man bereits zuvor mit React gearbeitet und das eine oder andere Projekt damit umgesetzt hat. Ist das jedoch nicht der Fall, so ist man mit einer richtig steilen Lernkurve konfrontiert. Man muss sich zuerst einmal React aneignen, um sich darauf aufbauend dann die Komponenten von React Native anzusehen. Der umgekehrte Weg, also gleich mit React Native zu starten und sich den Aufbau von React so nach und nach nebenbei anzueignen, ist meiner Ansicht nach nicht zu empfehlen, da das recht ineffizient und mit gewissen Frusterlebnissen verbunden ist.

Für den Einstieg eignet sich einerseits das Tutorial unter „Getting Started“ auf der React Native Website, welches einen auch gleich durch den Installationsprozess führt, sowie die üblichen Videotutorials auf YouTube und diversen bekannten Lernplattformen.

Die Beispielapplikation

Um dieses Framework zu evaluieren, haben wir eine kleine Businessapp mit klassischem Aufbau entwickelt, welche Daten und Bilder von einem Webservice lädt und diese Daten dann in Form einer Liste samt dazugehöriger Detailansicht darstellt. Weiters wurde auf gängige Sensordaten und die Kamera zugegriffen, sowie Formularfelder dargestellt.

Unser Fokus bei der Entwicklung lag ganz klar auf iOS als Zielplattform, weshalb wir auch direkt auf MacBooks entwickelt haben.

Die Installation lief problemlos und so war die Entwicklungsumgebung recht schnell eingerichtet. Im direkten Vergleich zur Installation und Konfiguration einer Umgebung für die Entwicklung von Android Apps unter Windows war das beinahe schon ein Spaziergang.

Als Entwicklungumgebung wurde Visual Studio Code verwendet und damit haben wir auch sehr gute Erfahrungen gemacht. Ein großer Vorteil bei der Entwicklung mit React Native ist übrigens das sogenannte „Hot Reload“. Man kennt das bereits von React für das Web oder auch von Angular. Dieser Mechanismus erspart es dem Entwickler, vor jedem Ausprobieren der App diese neu builden und wieder im Emulator starten zu müssen. Sobald man speichert, wird automatisch der Build angestoßen, der Emulator erkennt die Änderung und lädt die App neu.

Das ist jetzt im Einzelfall noch kein dramatischer Geschwindigkeitsvorteil, aber diese kleinen Zeitspannen summieren sich und im Laufe eines Projektes kann der Hot-Reload-Mechanismus dem Entwicklungsteam schon den einen oder anderen Tag an Entwicklungszeit sparen.

Wie sieht es nun mit dem Ansteuern von Hardware Features aus? Glücklicherweise existieren für die Kamera sowie für sämtliche Sensoren entsprechende Packages, die man verwenden kann. Zum Teil ist es hier jedoch durchaus anspruchsvoll, die richtige Version zu ermitteln, aber mit Hilfe von Foren und anderen Informationsquellen kommt man im Großen und Ganzen zurecht.

Apropos Foren, es gibt durchaus eine nennenswerte Community für React Native und wenn man sucht, dann wird man auch fündig. Jedoch stolpert man gerade hier recht häufig über den Versionsdschungel und muss darauf achten, dass man eher aktuellere Beiträge heranzieht. React Native erfährt recht häufig Updates und dabei gibt es auch größere Änderungen, durch welche der eine oder andere Beispielcode aus dem Web dann vielleicht nicht mehr funktionieren wird.

Fazit und persönliche Meinung

Um es gleich vorweg zu nehmen, persönlich hat mich React Native nicht begeistert. Das liegt allerdings zum einen am eher holprigen Einstieg aufgrund meiner fehlenden Erfahrungen mit React und zum anderen einfach an persönlichen Vorlieben, da ich auch in der Webentwicklung lieber mit Angular als mit React arbeite. Aber das ist eine reine Geschmacks- und Glaubensfrage, so wie Mac oder Windows, Butter oder Margarine, Marvel oder DC. Ein schlagkräftiges technisches Argument für oder gegen React Native im Vergleich zu anderen Frameworks gibt es meines Erachtens nicht.

Das beste Entscheidungkriterium für oder gegen React Native ist somit vor allem das vorhandene bzw. fehlende Know How im eigenen Unternehmen. Hat man bereits einige erfahrene React Entwickler, so liegt es nahe, für die Entwicklung von mobile Apps ebenfalls React Native zu verwenden.

Weitere Blogbeiträge

zum Thema Development

Updates for innovators: Abonnieren Sie unseren Blog