Per un decennio, il dibattito “Ibrido contro Nativo” è stata una guerra santa. I puristi nativi affermavano che JavaScript non avrebbe mai potuto raggiungere i 60 FPS. I sostenitori del multipiattaforma affermavano che il rigoroso sviluppo nativo era un suicidio finanziario.

Nel 2025 la guerra è finita. React Native ha vinto. Non perché sia “più semplice”, ma perché la Nuova architettura (senza bridge) ha sostanzialmente risolto il divario prestazionale. App come Discord, Shopify e Coinbase funzionano su React Native e non puoi notare la differenza.

Noi di Maison Code Paris utilizziamo React Native non come compromesso, ma come arma strategica. Ci consente di spedire su Web, iOS e Android da un singolo monorepo, condividendo il 95% della nostra logica aziendale.

Perché Maison Code ne parla

A Maison Code Paris, agiamo come coscienza architettonica per i nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala. Vediamo semplici API che impiegano 4 secondi per rispondere a causa di N+1 problemi di query e “microservizi” che costano € 5.000 al mese in tariffe cloud inattive.

Discutiamo questo argomento perché rappresenta un punto cruciale nella maturità ingegneristica. L’implementazione corretta di questo differenzia un MVP fragile da una piattaforma resiliente di livello aziendale in grado di gestire il traffico del Black Friday senza sudare.

L’Architettura: Perché il “Ponte” è morto

Per comprendere il moderno React Native, devi capire perché la vecchia versione era lenta.

Il Vecchio Mondo: il ponte asincrono

Nell’architettura classica (2015-2022), il thread JavaScript e il thread UI (principale) erano isolati. Per eseguire il rendering di una vista, JS ha dovuto:

Serializza un messaggio JSON ({ type: 'createView', width: 100 }).
Invialo sul “Ponte”.
Attendi che il lato nativo lo deserializzi ed esegua il rendering.

Se scorrevi velocemente un elenco, il Bridge si intasava con migliaia di messaggi JSON. Il thread dell’interfaccia utente si bloccherebbe in attesa di JS. Ciò causava il famoso “White Flash” durante lo scorrimento veloce.

Il Nuovo Mondo: JSI e Fabric

La Nuova Architettura ha rimosso completamente il Ponte. Ha introdotto l’JavaScript Interface (JSI). Ciò consente al motore JavaScript (Hermes) di contenere un riferimento C++ a un oggetto nativo. JS può chiamare metodi sugli elementi dell’interfaccia utente in modo sincrono.

TurboModule: carica i moduli nativi (Bluetooth, fotocamera) solo quando necessario, non all’avvio.
Tessuto: Il nuovo Sistema di Rendering. Dà la priorità agli aggiornamenti dell’interfaccia utente proprio come un browser dà la priorità ai CSS.

Risultato: 60 FPS (o 120 FPS sugli schermi ProMotion) è ora lo stato predefinito, non un problema.

La Pila: Expo è la Struttura

Nel 2025 non eseguiamo npx react-native init. Utilizziamo Expo. Expo sta a React Native come Next.js sta a React. È il meta-framework che gestisce le cose noiose.

1. Router Expo (routing basato su file)

Il routing nei dispositivi mobili era notoriamente difficile (boilerplate di React Navigation). Expo Router porta il modello Next.js sui dispositivi mobili.

“tsx // app/prodotto/[id].tsx import { useLocalSearchParams } da ‘expo-router’; importa { Testo } da ‘react-native’;

funzione predefinita di esportazione ProductScreen() { const { id } = useLocalSearchParams(); return ID prodotto: {id}; }


Questo file diventa automaticamente un collegamento diretto: "myapp://product/123".
Sul Web diventa "https://myapp.com/product/123".
Un router. Esecuzione universale.

### 2. Plugin di configurazione (CNG)
Non tocchiamo quasi più le cartelle "ios/" o "android/". Questo ci consente di utilizzare la **Continuous Native Generation (CNG)**.
Invece di eseguire il commit dei file di progetto nativi (che marciscono e causano conflitti di unione), li generiamo in fase di compilazione in base a "app.json".

Hai bisogno di aggiungere le autorizzazioni della fotocamera?
```json
// app.json
{
  "plugin": [
    [
      "fotocamera da esposizione",
      {
        "cameraPermission": "Consenti a Maison Code di scansionare i codici QR."
      }
    ]
  ]
}

Ingegneria delle prestazioni

Anche con Fabric, puoi scrivere codice React lento. Ecco come ottimizziamo per la sensazione “Butter Smooth”.

1. FlashList (Il Riciclatore)

La FlatList standard crea un nuovo componente React per ogni riga. L’utilizzo della memoria cresce in modo lineare. Utilizziamo FlashList (di Shopify). Funziona sul thread dell’interfaccia utente e “ricicla” le visualizzazioni. Quando una riga scorre fuori dallo schermo, non la distrugge; lo sposta in fondo e cambia il testo. Ciò riduce elenchi enormi (10.000 elementi) a un utilizzo costante della memoria (in memoria esistono solo circa 10 elementi).

“tsx importa { FlashList } da “@shopify/flash-list”;

<Lista Flash dati={prodotti} renderItem={({ item }) => } dimensioneoggettostimato={200} />


### 2. MMKV (archiviazione sincrona)
"AsyncStorage" è lento perché tratta l'I/O del disco come una promessa JSON.
Scarichiamo lo spazio di archiviazione su **MMKV** (scritto da Tencent per WeChat). Si tratta di un archivio chiave-valore mappato in memoria C++. È circa 30 volte più veloce.
Lo utilizziamo per archiviare token di autenticazione e preferenze utente in modo che l'app si avvii immediatamente con l'utente che ha effettuato l'accesso.

## Strategia di condivisione del codice: il Monorepo

Il ROI più grande di React Native è la **Condivisione del codice**.
Ma non dovresti limitarti a copiare e incollare i file. Dovresti progettare un **Monorepo** (usando TurboRepo o Nx).

"testo".
/apps
  /web (Next.js)
  /mobile (Expo)
/pacchetti
  /ui (componenti condivisi Tamagui/NativeWind)
  /logic (negozi Zustand, hook React Query, schemi Zod)
  /api (client API tipizzato)

L’app “mobile” importa: import { useCart } da '@maison/logic'; importa { Pulsante } da '@maison/ui';

L’app “web” importa esattamente lo stesso. Scriviamo la logica “Aggiungi al carrello” una volta. Lo testiamo una volta. Lo spediamo ovunque. L’unica divergenza riguarda la navigazione e i gesti specifici della piattaforma.

Aggiornamenti OTA: bypassare l’App Store

Un vantaggio aziendale fondamentale sono gli Aggiornamenti Over-The-Air (OTA) tramite Aggiornamento EAS. Se trovi un bug critico nel flusso di pagamento durante il Black Friday:

App nativa: Invia correzione -> Attendi 24 ore per la revisione Apple -> Attendi l’aggiornamento da parte degli utenti. Costo: migliaia di vendite perse.
App Expo: eas update --branch production. Il nuovo bundle JS viene scaricato silenziosamente in background. Gli utenti riceveranno la correzione al prossimo lancio. Tempo: 10 minuti.

Nota: puoi modificare JavaScript/risorse solo tramite OTA. Non è possibile modificare il codice binario nativo (ad esempio aggiungendo un nuovo modulo di autorizzazione).

10. Accessibilità (VoiceOver/TalkBack)

Le app native devono essere accessibili. React Native mappa le proprietà standard alle API di accessibilità native. <Visualizza accessibile={true} AccessibilitàLabel="Aggiungi al carrello"> Utilizza Controllo accessibilità in Xcode per verificare. Se la tua app non è utilizzabile dai non vedenti, stai lasciando indietro il 15% del mercato (e invitando azioni legali).

11. Test E2E automatizzati: Maestro

La disintossicazione era lo standard, ma era instabile. Maestro è il nuovo re. Gestisce l’interfaccia utente come un essere umano (utilizzando gli ID di accessibilità).

runFlow: app_flow.yaml


## 11. Conclusione

React Native non è più l '"alternativa". È l'impostazione predefinita.
Se stai creando un'app consumer nel 2026 e non utilizzi Expo + React Native, stai scegliendo di lavorare il doppio per ottenere lo stesso risultato.
Aiutiamo i marchi a migrare da basi di codice "native" legacy a stack moderni e unificati.

<hr style="margin: 1rem 0" />

**[Assumi i nostri architetti](/contact)**.