Ein Jahrzehnt lang war die Debatte „Hybrid vs. Native“ ein heiliger Krieg. Native Puristen behaupteten, dass JavaScript niemals 60 FPS erreichen könne. Plattformübergreifende Befürworter behaupteten, eine strikte native Entwicklung sei finanzieller Selbstmord.

Im Jahr 2025 ist der Krieg vorbei. React Native hat gewonnen. Nicht weil es „einfacher“ ist, sondern weil die Neue Architektur (Bridgeless) die Leistungslücke grundlegend geschlossen hat. Apps wie Discord, Shopify und Coinbase laufen auf React Native, und man kann den Unterschied nicht erkennen.

Bei Maison Code Paris nutzen wir React Native nicht als Kompromiss, sondern als strategische Waffe. Es ermöglicht uns, von einem einzigen Monorepo aus an Web, iOS und Android zu liefern und dabei 95 % unserer Geschäftslogik zu teilen.

Warum Maison Code dies bespricht

Bei Maison Code Paris fungieren wir als architektonisches Gewissen für unsere Kunden. Wir erben oft „moderne“ Stacks, die ohne grundlegendes Verständnis der Skalierung erstellt wurden. Wir sehen einfache APIs, deren Antwort aufgrund von N+1-Abfrageproblemen 4 Sekunden dauert, und „Microservices“, die 5.000 US-Dollar pro Monat an Cloud-Gebühren im Leerlauf kosten.

Wir diskutieren dieses Thema, weil es einen entscheidenden Dreh- und Angelpunkt für die technische Reife darstellt. Die richtige Implementierung unterscheidet einen fragilen MVP von einer robusten Plattform der Enterprise-Klasse, die den Black-Friday-Verkehr problemlos bewältigen kann.

Die Architektur: Warum die „Brücke“ starb

Um das moderne React Native zu verstehen, müssen Sie verstehen, warum die alte Version langsam war.

Die Alte Welt: Die asynchrone Brücke

In der klassischen Architektur (2015–2022) waren der JavaScript-Thread und der UI-Thread (Haupt-Thread) isoliert. Um eine Ansicht zu rendern, musste JS:

Serialisieren Sie eine JSON-Nachricht ({ type: 'createView', width: 100 }).
Senden Sie es über die „Brücke“.
Warten Sie, bis die native Seite es deserialisiert und rendert.

Wenn Sie schnell durch eine Liste scrollten, wurde die Bridge mit Tausenden von JSON-Nachrichten verstopft. Der UI-Thread würde beim Warten auf JS einfrieren. Dies verursachte beim schnellen Scrollen den berühmten „White Flash“.

Die neue Welt: JSI & Fabric

Durch die Neue Architektur wurde die Brücke vollständig entfernt. Es führte die JavaScript-Schnittstelle (JSI) ein. Dadurch kann die JavaScript-Engine (Hermes) eine C++-Referenz auf ein natives Objekt speichern. JS kann Methoden für UI-Elemente synchron aufrufen.

TurboModule: Laden Sie native Module (Bluetooth, Kamera) nur bei Bedarf, nicht beim Start.
Stoff: Das neue Rendering-System. Priorisiert UI-Updates genauso wie ein Browser CSS priorisiert.

Ergebnis: 60 FPS (oder 120 FPS auf ProMotion-Bildschirmen) ist jetzt der Standardzustand, kein Problem mehr.

Der Stack: Expo ist der Rahmen

Im Jahr 2025 führen wir „npx React-Native Init“ nicht mehr aus. Wir verwenden Expo. Expo soll nativ reagieren, was Next.js reagieren soll. Es ist das Meta-Framework, das die langweiligen Dinge erledigt.

1. Expo-Router (dateibasiertes Routing)

Das Routing auf Mobilgeräten war bekanntermaßen schwierig (React Navigation Boilerplate). Expo Router bringt das Next.js-Modell auf Mobilgeräte.

„tsx // app/product/[id].tsx import { useLocalSearchParams } von ‘expo-router’; import {Text} aus ‘react-native’;

Standardfunktion ProductScreen() exportieren { const { id } = useLocalSearchParams(); return Produkt-ID: {id}; } „

Diese Datei wird automatisch zu einem Deep Link: „myapp://product/123“. Im Web wird es zu „https://myapp.com/product/123“. Ein Router. Universelle Ausführung.

2. Konfigurations-Plugins (CNG)

Wir berühren die Ordner „ios/“ oder „android/“ fast nie mehr. Dadurch können wir Continuous Native Generation (CNG) nutzen. Anstatt native Projektdateien festzuschreiben (die verrotten und Zusammenführungskonflikte verursachen), generieren wir sie zum Zeitpunkt der Erstellung basierend auf „app.json“.

Müssen Sie Kameraberechtigungen hinzufügen? „json // app.json { „Plugins“: [ [ „Expo-Kamera“, { „cameraPermission“: „Maison Code erlauben, QR-Codes zu scannen.“ } ] ] } „

Leistungstechnik

Selbst mit Fabric können Sie langsamen React-Code schreiben. So optimieren wir für das „Butter Smooth“-Gefühl.

1. FlashList (Der Recycler)

Der Standard „FlatList“ erstellt für jede Zeile eine neue React-Komponente. Die Speichernutzung wächst linear. Wir verwenden FlashList (von Shopify). Es läuft im UI-Thread und „recycelt“ Ansichten. Wenn eine Zeile außerhalb des Bildschirms gescrollt wird, wird sie nicht zerstört; es verschiebt es nach unten und ändert den Text. Dies reduziert große Listen (10.000 Elemente) auf eine konstante Speichernutzung (nur ~10 Elemente sind im Speicher vorhanden).

„tsx import { FlashList } aus „@shopify/flash-list“;

<FlashList data={Produkte} renderItem={({ item }) => } geschätzteItemSize={200} /> „

2. MMKV (synchroner Speicher)

„AsyncStorage“ ist langsam, da es Festplatten-E/A als JSON-Versprechen behandelt. Wir verlagern den Speicher auf MMKV (geschrieben von Tencent für WeChat). Es handelt sich um einen speicherabgebildeten C++-Schlüsselwertspeicher. Es ist ungefähr 30x schneller. Wir verwenden es zum Speichern von Authentifizierungstoken und Benutzereinstellungen, sodass die App sofort startet, wenn der Benutzer angemeldet ist.

Der größte ROI von React Native ist Code Sharing. Aber Sie sollten Dateien nicht einfach kopieren und einfügen. Sie sollten ein Monorepo erstellen (mit TurboRepo oder Nx).

„Text /apps /web (Next.js) /mobile (Ausstellung) /Pakete /ui (Gemeinsame Tamagui/NativeWind-Komponenten) /logic (Zustand Stores, React Query Hooks, Zod Schemas) /api (typisierter API-Client) „

Die „mobile“ App importiert: import { useCart } from '@maison/logic'; import { Button } from '@maison/ui';

Die „Web“-App importiert genau das Gleiche. Wir schreiben die Logik „In den Warenkorb“ einmal. Wir testen es einmal. Wir versenden es überall hin. Der einzige Unterschied besteht in der Navigation und den plattformspezifischen Gesten.

OTA-Updates: Den App Store umgehen

Ein entscheidender Geschäftsvorteil sind Over-The-Air (OTA)-Updates über EAS Update. Wenn Sie am Black Friday einen kritischen Fehler in Ihrem Checkout-Ablauf finden:

Native App: Fix einreichen -> 24 Stunden auf die Apple-Überprüfung warten -> Auf die Aktualisierung durch die Benutzer warten. Kosten: Umsatzeinbußen in Tausenderhöhe.
Expo App: „eas update —branch Production“. Das neue JS-Bundle wird stillschweigend im Hintergrund heruntergeladen. Benutzer erhalten das Update beim nächsten Start. Zeit: 10 Minuten.

Hinweis: Sie können JavaScript/Assets nur über OTA ändern. Sie können den nativen Binärcode nicht ändern (z. B. durch Hinzufügen eines neuen Berechtigungsmoduls).

10. Barrierefreiheit (VoiceOver / TalkBack)

Native Apps müssen zugänglich sein. React Native ordnet Standard-Requisiten nativen Barrierefreiheits-APIs zu. <Viewavailable={true} accessibilityLabel="Zum Warenkorb hinzufügen"> Verwenden Sie zur Überprüfung den Accessibility Inspector in Xcode. Wenn Ihre App für Blinde nicht nutzbar ist, lassen Sie 15 % des Marktes zurück (und führen zu Klagen).

11. Automatisierte E2E-Tests: Maestro

Entgiftung war der Standard, aber es war flockig. Maestro ist der neue König. Es steuert die Benutzeroberfläche wie ein Mensch (unter Verwendung von Barrierefreiheits-IDs).

runFlow: app_flow.yaml „

11. Fazit

React Native ist nicht mehr die „Alternative“. Dies ist die Standardeinstellung. Wenn Sie im Jahr 2026 eine Verbraucher-App erstellen und Expo + React Native nicht verwenden, entscheiden Sie sich dafür, doppelt so hart für das gleiche Ergebnis zu arbeiten. Wir helfen Marken bei der Migration von alten „nativen“ Codebasen zu modernen, einheitlichen Stacks.

Stellen Sie unsere Architekten ein.