Il limite del bridge asincrono
React Native ha permesso a migliaia di team di costruire applicazioni mobile con JavaScript e React, condividendo logica tra iOS e Android. Ma l’architettura originale porta con sé un vincolo strutturale: il bridge. Ogni comunicazione tra il thread JavaScript e il thread nativo passa attraverso un ponte asincrono basato su JSON serializzato. Ogni chiamata a un modulo nativo — accesso alla fotocamera, lettura di un sensore, aggiornamento dell’interfaccia — richiede serializzazione, trasferimento e deserializzazione.
Per interazioni semplici l’overhead è trascurabile. Ma quando la frequenza aumenta — animazioni fluide, liste con scroll rapido, gesture complesse — il bridge diventa il collo di bottiglia. La serializzazione consuma CPU, l’asincronia introduce latenza e il thread JavaScript non può accedere alle strutture dati native.
JSI: comunicazione sincrona diretta
La nuova architettura, sviluppata nel corso di tre anni e resa disponibile come opt-in nel 2022, parte dalla sostituzione del bridge con JSI (JavaScript Interface). JSI è uno strato sottile che permette al codice JavaScript di chiamare direttamente funzioni C++ esposte dal runtime nativo, senza serializzazione e senza asincronia forzata.
Con JSI, un oggetto nativo può essere referenziato direttamente dal JavaScript come un host object. Le chiamate sono sincrone quando necessario, eliminando la latenza del bridge. Il costo della comunicazione scende da millisecondi a microsecondi per le operazioni critiche.
Fabric: il nuovo sistema di rendering
Fabric è la riscrittura del rendering. Nell’architettura precedente, il shadow tree — la rappresentazione interna del layout — veniva calcolato nel thread JavaScript e comunicato al nativo tramite il bridge. Con Fabric, il shadow tree è una struttura C++ condivisa tra i due thread senza serializzazione.
Fabric supporta il rendering sincrono: le transizioni possono essere calcolate e applicate in un singolo frame. Il risultato è un’interfaccia più reattiva, con meno frame persi durante animazioni e gesture.
TurboModules: caricamento lazy dei moduli nativi
Nell’architettura precedente, tutti i moduli nativi vengono inizializzati all’avvio dell’applicazione, anche quelli che non verranno mai utilizzati nella sessione corrente. TurboModules rende i moduli nativi lazy: vengono caricati solo quando il codice JavaScript li richiede per la prima volta.
TurboModules utilizza JSI per esporre interfacce tipizzate tramite Codegen, un generatore di codice che produce binding C++ a partire dalle specifiche TypeScript o Flow. Il risultato è un avvio più veloce, un consumo di memoria ridotto e un’interfaccia tra JavaScript e nativo verificabile staticamente.
Un’architettura per il prossimo decennio
La nuova architettura non modifica il modello di sviluppo: le applicazioni continuano a essere scritte in JavaScript o TypeScript con componenti React. Il cambiamento è sotto la superficie: comunicazione diretta al posto della serializzazione, strutture condivise al posto del bridge, caricamento lazy al posto dell’inizializzazione totale. Per i team che sviluppano applicazioni mobile cross-platform, il miglioramento in prestazioni e reattività colma il divario con le applicazioni native pure.
Link: reactnative.dev