32 Punkte von xguru 2025-01-20 | 9 Kommentare | Auf WhatsApp teilen
  • Shopify erklärte React Native (RN) vor fünf Jahren zur Zukunft der mobilen Entwicklung und hat seitdem alle Apps erfolgreich auf RN umgestellt
  • Hauptgründe für die Einführung von React Native
    • Einmal schreiben, zwei Plattformen unterstützen: die Ineffizienz vermeiden, dieselbe Funktion für iOS und Android zweimal zu entwickeln
    • Höhere Talentmobilität: Entwickler sollen flexibel zwischen iOS, Android und Web wechseln können
    • Mehr Wert liefern: weniger Zeit für die Herstellung von Feature-Parität und mehr Wert für die Nutzer
  • Erfolgreiche Ergebnisse der Umstellung
    • Die Produktivität stieg deutlich, weil dieselbe Funktion nicht zweimal entwickelt werden musste
    • Da Engineers sowohl Web als auch Mobile abdecken, kann mit derselben Belegschaft mehr geleistet und neue Wachstumschancen geschaffen werden
    • Die Aufrechterhaltung der Feature-Parität zwischen iOS und Android ist kein Problem mehr, wodurch mehr Wert geliefert werden kann
    • Die Screen-Load-Zeit der Apps liegt schnell bei unter 500 ms, und mehr als 99,9 % der Sessions bleiben stabil
    • Native Code wird weiterhin dort eingesetzt, wo er für die Aufgabe am besten geeignet ist, sodass die Vorteile beider Welten genutzt werden

Zentrale Erkenntnisse

React-Native-Apps sind schnell

  • Shopify misst Performance einen sehr hohen Stellenwert bei, und CEO Tobi Lutke betont: „Nicht jede schnelle Software ist großartig, aber jede großartige Software ist schnell.“
  • Vor der Umstellung auf React Native (RN) war die größte Frage, ob RN die Performance-Ziele erfüllen kann
    • Deshalb wurde vor der Entscheidung durch umfangreiches Prototyping geprüft, ob das möglich ist
    • Es wurde analysiert, woran Meta arbeitet, um Performance-Engpässe zu beseitigen, und es wurden Bereiche identifiziert, in denen man beitragen konnte, etwa bei Listen
    • Auf Basis der Einschätzung, dass RN bald schneller werden würde, fiel die Entscheidung für eine umfassende Einführung
  • Fünf Jahre später laufen RN-Apps schnell, und in der Shopify-App werden Screen-Load-Zeiten von unter 500 ms (P75) erreicht
    • Ähnliche Performance-Ziele wurden auch in allen anderen Apps erfolgreich erreicht
    • Gute Muster und Techniken zur Beseitigung von Performance-Engpässen anzuwenden, ist essenziell
  • Native ist nicht automatisch immer schneller, und RN ist nicht automatisch immer langsamer
    • RN hat sich in den vergangenen Jahren stark weiterentwickelt und als Plattform für Apps auf Weltklasse-Niveau etabliert
  • Mit der Reife des RN-Frameworks dürfte es immer einfacher werden, schnelle Apps zu entwickeln
    • Mit wachsender Expertise im Team steigt auch der Spielraum, noch bessere Apps zu bauen

Vorteile von Hot Reloading

  • Hot Reloading in React Native (RN) war eine revolutionäre Verbesserung der Entwicklungsumgebung, weil Änderungen sofort sichtbar werden
  • Eines der größten Probleme in der nativen Entwicklung war, dass je nach Größe der Codebasis selbst kleine Änderungen mehrere Minuten zum Kompilieren und Starten im Emulator oder auf einem echten Gerät benötigten
  • Das führte zu Zeitverlust und unterbrach den Arbeitsfluss der Entwickler
  • Hot Reloading in RN beseitigt dieses Problem vollständig und verbessert Produktivität sowie Developer Experience erheblich

Talentmobilität durch TypeScript

  • Durch die weite Verbreitung von TypeScript wurde der Wechsel von Entwicklern zwischen React Web und React Native (RN) reibungslos
    • Webentwickler: Mit RN fällt der Einstieg in Mobile-Arbeit deutlich leichter als mit nativer iOS- und Android-Entwicklung
    • Mobile-Entwickler: Mit RN können sie sich leicht auch an Web-Arbeit beteiligen
  • Vorteile der Talentmobilität
    • Sie schafft mehr Wachstumsmöglichkeiten für Engineers und erhöht die Flexibilität bei der Personalplanung
    • Sie stärkt die Fähigkeit, mit derselben Entwicklerzahl mehr Arbeit zu bewältigen
    • Durch das Teilen von Code zwischen Web und Mobile entstehen höhere Effizienz und Produktivität
  • Entwickler, die auf mehreren Plattformen arbeiten können, ermöglichen schnellere Releases und können Ideen zwischen Technologien übertragen und neu anwenden
  • Es entsteht eine Kultur, in der Technologie als Werkzeug verstanden wird; das erweitert den Blick des Teams und fördert die Wahl des jeweils besten Tools für die Aufgabe

Native Entwickler sind unverzichtbar

  • Mobile Engineers mit Spezialisierung auf iOS und Android sind essenziell, um großartige mobile Apps zu entwickeln
  • Die Erfahrung aus der Entwicklung vieler mobiler Produkte sowie das tiefe Verständnis für Usability und Konventionen sind unersetzlich
  • Aufgaben wie der Zugriff auf die Plattformschicht, das Schreiben von Bindings, das Beherrschen von Build und Deployment sowie das Management von React-Native-Versionsupdates erfordern native Expertise
  • Native Entwickler optimieren die App-Performance auf verschiedenen Gerätemodellen und sorgen für eine konsistente Erfahrung für alle Nutzer
  • Sie sind unverzichtbar, um auf neue Funktionen, APIs und Tooling-Änderungen in iOS und Android zu reagieren und React-Native-Versionsupdates zu steuern
  • Entwicklung eines React-Native-Schulungsprogramms für native Mobile-Entwickler:
    • Als Self-Learning-Programm aufgebaut, damit produktionsreifer Code geschrieben werden kann
    • Zusätzliche Unterstützung durch Q&A-Sessions, Pair Programming und Code Reviews mit Entwicklern, die in React Native versiert sind
  • Zusätzlicher Einsatz von Webentwicklern (JavaScript-, TypeScript- und React-Experten) in Mobile-Teams:
    • So entsteht eine ausgewogene Mischung aus starker nativer und React-Native-Expertise
    • Mit der Zeit verbessert sich das technische Niveau des gesamten Teams
  • Eine gute Mischung aus nativen und Webentwicklern im Team ist der Schlüssel, um mit React Native hervorragende mobile Apps zu bauen

Native Code ist unverzichtbar

  • Von 100 % React Native ist abzuraten: RN ist ein effizientes Tool, weil Funktionen nur einmal entwickelt werden müssen, aber nicht für jede Situation die passende Technologie
  • Fälle, in denen nativer Code nötig ist
    • Entwicklung fortgeschrittener Funktionen: Features mit Hardware-Nutzung wie 2D-/3D-Scanning und das Ausführen von On-Device-AI-Modellen
    • Features mit Speicherbeschränkungen: Home- und Sperrbildschirm-Widgets, Apple-Watch-Apps und Complications, App Intents, Siri Shortcuts usw.
    • Laufende Hintergrundaufgaben über längere Zeit:
      • Beispiel: Shopifys Point-of-Sale-App lädt und synchronisiert große Datenmengen im Hintergrund, damit auch offline Transaktionen verarbeitet werden können
      • Durch vollständiges Offloading dieser Hintergrundaufgaben in nativen Code wurde sichergestellt, dass die App-Performance nicht beeinträchtigt wird
  • RN eignet sich für die einmalige Entwicklung der meisten Funktionen, aber in Bereichen, in denen Native am besten funktioniert, ist nativer Code ideal
  • Die starke Interoperabilität mit Native, die RN standardmäßig bietet, macht die Kombination beider Technologien einfach
  • Wichtig ist, RN nicht als „RN oder Native“, sondern als „RN und Native“ zu betrachten
  • Teams mit nativer Expertise sind essenziell, um dieses Zusammenspiel effektiv umzusetzen

Schwierigkeiten beim Debugging

  • Das Debugging in React Native (RN) hat instabile Seiten und erfordert zusätzlichen Aufwand, um in VSCode korrekt eingerichtet zu werden
  • iOS und Android bringen standardmäßig leistungsfähige und stabile Debugging-Funktionen mit
  • Meta hat den Debugger-Stack von RN zuletzt vollständig neu geschrieben und arbeitet an Verbesserungen; der neue Debugger zeigt vielversprechende Ergebnisse
  • Shopify arbeitet mit Meta zusammen, um die Debugging-Umgebung von RN auf Weltklasse-Niveau zu bringen

React-Native-Updates sind nicht nahtlos

  • Das Aktualisieren einer App auf neue Versionen von React Native (RN) erfordert viel Arbeit und oft eine Umstrukturierung der Codebasis
  • Shopify begegnet dem mit einer kleinen rotierenden Entwicklergruppe, die sich gezielt um Updates kümmert, sodass sich der Rest des Teams auf die Feature-Entwicklung konzentrieren kann
  • Mit der Reife des RN-Frameworks dürfte der Update-Prozess nach und nach einfacher werden
  • Wenn die New Architecture breiter eingeführt ist, dürfte die Komplexität der Update-Arbeit sinken

Größere Abhängigkeit von Third-Party-Libraries

  • Das React-Native-(RN)-Framework ist weniger umfassend als Native, weshalb mehr Third-Party-Libraries genutzt werden
  • Da das Ökosystem in den vergangenen Jahren gereift ist, lassen sich für fast jede benötigte Funktion leicht gut gepflegte Libraries finden
  • Allerdings müssen Third-Party-Libraries laufend aktuell gehalten werden, und die Angriffsfläche für Supply-Chain-Angriffe wächst
  • Shopify hat automatische Dependency-Updates mit Dependabot eingeführt
    • Automatisches Code-Scanning dient dazu, schädlichen Code zu erkennen und zu verhindern
  • Es bleibt die Hoffnung, dass das RN-Framework künftig eine klarere Richtung verfolgt und standardmäßig mehr Funktionen bereitstellt

Große Vorteile durch die Nutzung gemeinsamer Grundlagen

  • Als React Native (RN) erstmals eingeführt wurde, fehlte Erfahrung beim Bauen mobiler Apps mit RN, und auch die aus der nativen Entwicklung gewachsenen gemeinsamen Grundlagen konnten nicht genutzt werden
  • Zu Beginn löste jedes Team seine Probleme eigenständig beim Bau der Apps; das war effektiv, um schnell zu starten und Apps zu migrieren
    • Allerdings lösten die Teams dadurch dieselben Probleme mehrfach, was zu ineffizienter Doppelarbeit führte
    • Es wurde bewusst Zeit und Aufwand in den Aufbau von RN-Expertise investiert, wobei Geschwindigkeit priorisiert und Konsistenz als Trade-off in Kauf genommen wurde
  • Seit 2023, als alle Apps gereift waren, wurde begonnen, die Konsistenz zu stärken
    • Gemeinsame Komponenten wie Identity, Echtzeit-Monitoring und Performance-Messung wurden in Shared Libraries ausgelagert und in allen Apps genutzt
    • So können Teams vorhandene Lösungen einsetzen, statt bereits gelöste Probleme erneut anzugehen
  • 2025 wird das Code-Sharing weiter ausgebaut, um
    • Wissen und Expertise zwischen Teams breiter zu verteilen
    • sicherzustellen, dass alle Apps automatisch von Verbesserungen an gemeinsamen Komponenten profitieren
    • Engineering-Ressourcen zu sparen und den Fokus auf die Lieferung von Nutzerwert zu legen

Die Zukunft von React Native

  • Die Zukunft von React Native (RN) ist vielversprechend, und Meta liefert als starker Verwalter des Projekts kontinuierlich Verbesserungen
  • Mit jedem Release fließt Entwicklerfeedback stark in die Roadmap ein, und es dürfte immer einfacher werden, schnelle Apps zu bauen
  • Shopify plant, mit der Einführung der New Architecture die Weiterentwicklung von RN kontinuierlich zu unterstützen
  • Viele große Unternehmen wie Microsoft, Amazon, Tesla, SpaceX und Coinbase nutzen RN, und hochwertige Third-Party-Libraries sowie Frameworks erscheinen weiterhin laufend
  • Shopify trägt unter anderem mit den folgenden Aktivitäten zu Open Web, Open Source und offenen Standards bei
    • Code-Beiträge zu RN
    • Mitwirkung als Co-Release-Captain bei RN-Releases
    • Förderung wirkungsstarker Open-Source-Projekte wie React Native Skia und Reanimated
    • Veröffentlichung von Open-Source-Projekten wie Flashlist, Restyle und Tophat
  • Zusätzlich wurde 2025 die React Native Working Group neu gestartet
    • Ziel ist es, zentrale Führungspersonen aus Organisationen zusammenzubringen, die RN unterstützen, um die wichtigsten Herausforderungen des Ökosystems zu identifizieren, Investitionsprioritäten festzulegen, Zusammenarbeit zu fördern und doppelte Arbeit zu verringern
    • Frühere beteiligte Unternehmen: Meta, Twitter, Coinbase, Microsoft usw.
    • Wer teilnehmen möchte, kann hier anfragen
  • RN hat in den vergangenen fünf Jahren große Fortschritte gemacht, und viele der Einschränkungen, die eine Einführung einst erschwerten, sind inzwischen verschwunden
  • Wenn man RN eine Zeit lang nicht genutzt hat, ist jetzt ein guter Zeitpunkt, es erneut auszuprobieren

9 Kommentare

 
firea32 2025-02-03

Wir haben RN ungefähr zur gleichen Zeit und aus ähnlichen Gründen eingeführt und setzen es erfolgreich ein.
Mit den Performance-Problemen kann ich mich ehrlich gesagt nur bedingt identifizieren, aber das ist wahrscheinlich ein Problem, das auf der Ebene von react-dom gelöst werden muss.
Der größte Vorteil scheint mir zu sein, dass man mit einem kleinen Team sehr viel erreichen kann.

 
wkang586 2025-01-28

Ich frage mich, welche nativen Funktionen es gibt, die sich mit den nativen APIs von RN nicht abdecken lassen.

 
tsboard 2025-01-23

Das ist ein beeindruckender Erfahrungsbericht. Derzeit entwickle ich beruflich Android-Apps mit Kotlin, und manchmal frage ich mich: Muss es wirklich unbedingt nativ sein …? (In meinem Fall musste ich zwangsläufig nativ gehen, weil es Dinge gibt, die eng mit der Plattform zusammenarbeiten müssen.) Wenn möglich, scheint es mir aber auch eine gute Richtung zu sein, auf Cross-Platform-Unterstützung wie bei React Native oder Flutter zu setzen.

 
techtech 2025-01-23

Shopify ist echt beeindruckend @.@

 
felizgeek 2025-01-21

"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"Statt in Native oder React Native zu denken, denkt in Native und React Native."

Im Engineering gibt es kein 100 % (Vorsicht vor Clickbait-Titeln wie „A ist immer besser“).
Beides hat Vor- und Nachteile, und je nach Situation gibt es das passende Werkzeug.
Es ist auch ein sehr guter Artikel, weil man darin die Philosophie des Teamaufbaus bei Shopify erkennen kann.

 
treestae 2025-01-21

Trotzdem werde ich weiter Flutter lobpreisen.

 
mhj5730 2025-01-20

Alle Apps auf RN umgestellt ... richtig stark, wow

 
genog 2025-01-20

@shopify/flash-list ist verdammt gut. Danke, Shopify.

 
eajrezz 2025-01-20

Shopify spielt auch im Ruby-on-Rails-Ökosystem eine zentrale Rolle
und zeigt im RN-Ökosystem ebenfalls eine bemerkenswerte Entwicklung. Ein großartiges Unternehmen.