React Native 0.76 novità

React Native 0.76 novità

React Native 0.76 è ora disponibile e apporta un cambiamento sostanziale abilitando la Nuova Architettura di default. Questo aggiornamento introduce il supporto per le moderne funzionalità di React come Suspense , Transitions , batching automatico e useLayoutEffect hook. La Nuova Architettura rinnova anche il Modulo Native e Native. Di seguito, forniamo una panoramica completa dei miglioramenti, delle nuove funzionalità e delle modifiche di interruzione incluse in questa versione.

Caratteristiche principali di React Native 0.76 novità

• Rendering simultaneo: la nuova architettura consente a React Native di supportare completamente le funzionalità di rendering simultaneo di React, come Suspense e Transitions. Ciò consente UI più reattive consentendo a React Native di dare priorità agli aggiornamenti urgenti rispetto alle attività in background non urgenti.
• Batching automatico: grazie al batching automatico, React Native ora consolida gli aggiornamenti di stato per ridurre al minimo i rendering intermedi, riducendo il ritardo e migliorando le prestazioni in scenari con elevati aggiornamenti.
• Supporto useLayoutEffect: la nuova architettura fornisce supporto completo per useLayoutEffect, abilitando letture sincrone delle informazioni di layout durante la fase di commit. Ciò consente agli elementi dell’interfaccia utente, come i tooltip, di essere posizionati con precisione prima di essere renderizzati sullo schermo.

Punti salienti della nuova architettura – React Native 0.76 novità
La Nuova Architettura rappresenta una riscrittura completa dei sistemi core di React Native, affrontando molte sfide di performance e usabilità dell’architettura precedente. I miglioramenti più notevoli includono:

Rendering sincrono e asincrono

Nella vecchia architettura, React Native utilizzava un bridge asincrono per comunicare tra JavaScript e moduli nativi. Mentre questo approccio impediva il blocco del thread principale, introduceva anche ritardi nel rendering degli aggiornamenti, specialmente per le interazioni che richiedevano un feedback immediato.

Nella Nuova Architettura, sono supportati sia gli aggiornamenti asincroni che quelli sincroni . Questo approccio ibrido garantisce che gli input degli utenti possano essere elaborati istantaneamente senza attendere le attività in background, migliorando significativamente la reattività delle applicazioni e rendendole più native.

Rimozione del ponte

Una delle modifiche più impattanti è la rimozione del bridge tra JavaScript e runtime nativo. Il bridge, che in precedenza serializzava le chiamate di funzione, è diventato un collo di bottiglia per le app con aggiornamenti frequenti o oggetti di grandi dimensioni. Ora, la comunicazione diretta tra JavaScript e ambienti nativi è abilitata tramite l’interfaccia JavaScript (JSI), riducendo la latenza e aumentando le prestazioni.

Nuovo sistema di moduli nativi

Il nuovo sistema di moduli nativi è interamente realizzato in C++ e offre diversi miglioramenti chiave:

• Accesso sincrono al runtime nativo.
• Sicurezza dei tipi tra JavaScript e codice nativo.
• Caricamento lazy dei moduli di default, che ottimizza i tempi di avvio caricando solo ciò che è necessario. Ciò semplifica anche l’integrazione di moduli nativi personalizzati, poiché ora puoi chiamare direttamente le funzioni native in modo sincrono senza dover serializzare i dati.

Ecco un esempio di come funzionano le chiamate sincrone nel nuovo sistema:

//  Sincronizza la risposta dal modulo nativo 
const value = nativeModule. getValue (); 
nativeModule. doSomething (value);

Inoltre, l’introduzione di Codegen consente contratti fortemente tipizzati tra il livello JavaScript e il livello nativo, riducendo gli errori di tipo transfrontalieri e generando automaticamente codice boilerplate.

Rendering simultaneo e nuovo renderer

È il New Rendererun punto di svolta nell’architettura di React Native. Ora può gestire più alberi di componenti su thread diversi, supportando completamente le funzionalità simultanee di React 18, come Suspense e Transitions. Ciò consente di dare priorità alle azioni urgenti dell’utente (come digitare o cliccare) mentre gli aggiornamenti in background vengono renderizzati in modo asincrono.

Il renderer supporta anche letture di layout sincrone su più thread, assicurando che le UI rispondano rapidamente senza balbettii visivi. E poiché è scritto in C++, il renderer è ora condiviso tra le piattaforme, assicurando un rendering coerente su iOS, Android, Windows, e macOS.

Ciclo di eventi ben definito

La Nuova Architettura include un event loop ben definito per l’elaborazione delle attività sul thread JavaScript, allineando il comportamento di React Native con gli standard web. Ciò comporta vantaggi come:

• La possibilità di interrompere il rendering per gestire eventi urgenti.
• Maggiore allineamento con le specifiche web, aprendo la strada a funzionalità come microtasks, MutationObserver, e IntersectionObserver.

Il ciclo degli eventi consente a React Native di gestire attività come timer e animazioni in modo più prevedibile, garantendo un’esperienza utente più fluida e reattiva.

Modifiche radicali
Rimozione del ponte per prestazioni più rapide

Con il bridge rimosso, React Native ora gestisce JavaScript-to-nativedirettamente la comunicazione. Ciò non solo riduce i tempi di avvio eliminando l’inizializzazione del bridge, ma migliora anche la segnalazione di crash, la gestione degli errori e il debug.

Ecco un esempio di come funzionava la vecchia inizializzazione basata su bridge rispetto alla nuova architettura:

// Inizializzazione lenta con il bridge 
import { NativeTimingModule } from  'NativeTimingModule' ; 
global . setTimeout = timer =>  NativeTimingModule . setTimeout (timer); // Inizializzazione diretta nel runtime 

C++ . global (). setProperty (runtime, "setTimeout" , createTimer);

Nei casi in cui è necessaria la retrocompatibilità, il bridge è ancora disponibile per un periodo temporaneo, ma l’obiettivo a lungo termine è di eliminarlo completamente.

Migrazione graduale verso la nuova architettura

La transizione alla Nuova Architettura è stata attentamente progettata per essere graduale. La maggior parte delle app può essere aggiornata a React Native 0.76 senza modifiche significative, grazie a un livello di interoperabilità che assicura la compatibilità tra le vecchie e le nuove architetture.

Per sfruttare appieno i vantaggi della Nuova Architettura, gli sviluppatori devono migrare i Moduli Nativi e i Componenti Nativi personalizzati alle nuove API. Ecco il percorso di migrazione consigliato:

• Aggiornare l’app a React 18: questo passaggio è essenziale per iniziare a utilizzare le funzionalità simultanee e Suspense in React Native.
• Migrazione di moduli e componenti nativi: gli sviluppatori devono aggiornare i moduli personalizzati per supportare il nuovo Native Module APIs. Senza questo, le app non trarranno vantaggio dalle prestazioni migliorate, dalla sicurezza dei tipi e dall’integrazione C++ che il nuovo sistema fornisce.

Le librerie già compatibili con la Nuova Architettura possono essere trovate nella directory React Native . Gli sviluppatori dovrebbero controllare le loro dipendenze per garantire la compatibilità e considerare librerie alternative o problemi aperti se una particolare libreria non è ancora stata migrata.

Conclusione
React Native 0.76 è una release, con la New Architecture che segna un significativo balzo in avanti per il framework. Abilitando funzionalità come rendering simultaneo, migliori prestazioni e gestione degli errori migliorata, questo aggiornamento assicura che le app React Native siano più veloci, più reattive e più facili da gestire. Sebbene la migrazione alla New Architecture possa richiedere sforzi, i vantaggi a lungo termine la rendono un passaggio essenziale per qualsiasi progetto React Native in futuro.

(fonte) (fonte)

Innovaformazione, scuola informatica specialistica eroga formazione IT e segue costantemente i trend del mercato e delle tecnologie. Nell’offerta formativa per aziende trovate il Corso React Native.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)