LimeSoda Blog

React Amsterdam 2019: Mit der kleinsten Fähre zur größten React-Konferenz

Das Wichtigste zuerst: Neben T-Shirts von Konferenz und Workshop (die man in der Öffentlichkeit wohl eher selten trägt, um nicht als Nerd aufzufallen) gab es ein Goodie-Bag mit Häferl, Kühlschrankmagnet, Socken (!), diversen Heftchen und Stickern. Der Kaffee auf der Konferenz wurde selbstverständlich mit Herzchen serviert, nur so kann man Kaffee auch wirklich genießen – bzw. „genieten“, wie die Holländer sagen:

React Native Workshop

In gemütlicher Runde wurde der erste Tag in Amsterdam mit einem React Native Workshop eingeläutet. Wir arbeiten schon länger mit React Native, einige „up-to-date“ Infos waren aber dennoch interessant. Sehr ausgereift ist mittlerweile „Expo Snack„, ein Online-Editor zur Entwicklung von React Native Apps. Sogar ein Device Emulator für iOS und Android ist dabei, man kann aber natürlich auch jedereit auf dem eigenen Gerät testen. Dazu scannt man einfach einen QR Code mit der Expo App und schon wird bei jeder Code-Änderung automatisch synchronisiert.

Statt react-router verwendet man aktuell eher react-navigation oder react-native-navigation, mit einer Fülle von unterschiedlichen „Navigators“. Zum Beispiel kann man sich den „StackNavigator“ als „Stapel“ vorstellen, den man in beide Richtungen entlang navigieren kann. Der „SwitchNavigator“ kann für einen Login-Flow verwendet werden, hier gibt es nach dem Login keine definierte „Zurück“-Funktion. Neben der Verwendung anderer Navigators kann man diese auch beliebig kombinieren: Ein SwitchNavigator zum Start der App, nach Login übernimmt ein TabNavigator, darunter noch der eine oder andere StackNavigator. Natürlich sollte man sich vor der Entwicklung schon eine grobe Sitemap überlegen und die Navigators planen.

Animationen sind ein wenig „tricky“: Um diese möglichst flüssig darzustellen, können wir eine Animation in JavaScript/React erstellen und an das native UI weiterleiten. Dort läuft sie unabhängig vom JavaScript-Code ab. React Native bietet dafür die nützliche Animated Komponente.

Übrigens, falls noch nicht bekannt: React Native ist Open Source und wird unter anderem von Facebook, Pinterest und Tesla verwendet.

Hier ein paar Eindrücke vom Workshop, die Streber von LimeSoda sitzen natürlich in der ersten Reihe:

Auf zur Konferenz

Frisch und munter ging es am Tag darauf zur 1-tägigen Konferenz. 2 Tracks waren vorhanden, einer speziell für React Native, einer für React im Allgemeinen. Für uns war hauptsächlich der React Native Track interessant, nachdem wir bei React ohnehin ständig „am Ball“ bleiben und seit Jahren damit entwickeln. Interessant war auch eine Video-Installation im Vorraum, die mit diversen Kameras die User aufgenommen hat – unterschiedlich zeitversetzt wurden die Videos auf diversen Screens wiedergegeben. Mit einem leichten Horror-Gefühl sieht man sich wieder und wieder auf den seltsam eingestellten Screens:

Nach wie vor separate Entwicklung

„Learn once, code everywhere“ vs „code once, use everywhere“

Nach wie vor ist es leider ratsam eine native App separat von einer Website/Web App zu entwickeln. Mit ein wenig programmiertechnischem Geschick können gewisse (JavaScript-)Codeteile wiederverwertet werden, Routing und View-Komponenten sollten aber per React Native umgesetzt werden. Es existieren zwar bereits seit längerer Zeit einige Versuche für „Universal Projects“, aber laut der Aussage diverser Vortragender gibt es noch nichts für den Produktiveinsatz. In der Regel geht man vom React Native Code aus, und sorgt dafür dass Dieser auch im Web funktioniert bzw. umgewandelt wird. D.h. von einer bestehenden Web App zu React Native ist keine Option. Zusätzlich sollte man auch beim Design auf eine Separierung achten, ein Desktop-PC wird ja doch anders bedient als ein Smartphone:

Das ist natürlich auch ein Kostenfaktor, aber man muss generell immer überlegen ob man das (durchaus spürbare) Plus an Performance braucht, oder ob nicht eine simple PWA (Progressive Web App) ausreicht – die man mittlerweile auch wie eine native App aussehen lassen kann, zum Beispiel unser „Hodl the Coin“ Spiel.
Legt man am Smartphone-Desktop eine Verknüpfung zum Spiel an, so läuft es im Fullscreen-Modus und das Icon ist nicht von einer normal installierten App zu unterscheiden. Ob man nun eine richtige native App erstellt oder „nur“ eine PWA muss von Fall zu Fall entschieden werden. Kriterien dafür: Performance, Hardware-Zugriff, Kundenbindung, …

Turbomodules

Unter diesem fancy Namen versteckt sich eine neue Methode zur Interaktion zwischen JavaScript und dem nativen Unterbau. In Zukunft werden React Native Apps wohl einen drastischen Performance-Schub erhalten: Turbomodules Proposal

Accessibility

Natürlich war das ebenfalls ein wichtiges Thema. Grundsätzlich bietet React Native dafür bereits einige Hilfsmittel: https://facebook.github.io/react-native/docs/accessibility

Im besten Fall überlegt man sich natürlich VOR der Entwicklung ein gutes Konzept für die User Experience mit Augenmerk auf Accessibility, dann ist der Aufwand eher gering.

Links

Nützliche Links (für Entwickler), welche wir während der Konferenz aufgeschnappt haben:

 

Hier noch ein paar Eindrücke von der Konferenz:

Tot ziens!

Vor dem Rückflug konnten wir noch das sonnige Wetter genießen, und aufgrund einer Empfehlung „Foodhallen“ für die kulinarischen Freuden:

Rating: 5.0/5. Von 2 Bewertungen.