Progression
0 %
0/32 étapes terminées
Avancé · 14 min de lecture
La nouvelle architecture
JSI, Fabric, TurboModules : ce qui a changé sous le capot
1Définition
La nouvelle architecture de React Native remplace l'ancien « pont » asynchrone entre JavaScript et le natif par une interface directe en C++ (JSI), un nouveau moteur de rendu (Fabric) et des modules natifs chargés à la demande (TurboModules). Elle est activée par défaut depuis React Native 0.76, et les versions récentes ne fonctionnent plus qu'avec elle.
2Principes fondamentaux
01
JSI (JavaScript Interface)
Une API C++ qui permet au moteur JavaScript de détenir des références vers des objets C++ et d'appeler leurs méthodes directement, de façon synchrone si besoin, sans sérialisation JSON.
02
Fabric
Le nouveau système de rendu. L'arbre des vues est calculé en C++ et partagé entre les plateformes. Il rend possibles les mesures de mise en page synchrones et les fonctionnalités concurrentes de React.
03
TurboModules
Les modules natifs sont chargés paresseusement, à la première utilisation, et exposés via la JSI. Le démarrage de l'app n'initialise plus des dizaines de modules inutiles.
04
Codegen
À partir de spécifications typées (TypeScript), Codegen génère le code C++ d'interface. Le contrat entre JavaScript et natif est vérifié à la compilation.
3Exemples pratiques
Une spécification de TurboModule
1// specs/NativeBatterie.ts2import type { TurboModule } from 'react-native';3import { TurboModuleRegistry } from 'react-native';4 5export interface Spec extends TurboModule {6 getNiveau(): number; // appel synchrone7 estEnCharge(): Promise<boolean>; // appel asynchrone8}9 10export default TurboModuleRegistry.getEnforcing<Spec>('NativeBatterie');Codegen lit cette interface et génère la glue C++ : l'implémentation native doit respecter exactement ces signatures.
4Erreurs courantes
Des appels synchrones partout
À éviter
// lecture d'un gros fichier natif, synchrone, dans le renduconst donnees = NativeFichiers.lireToutSync(chemin);À faire
const donnees = await NativeFichiers.lire(chemin);Pourquoi : La JSI permet le synchrone, mais un appel long bloque le thread JavaScript. Réserve-le aux lectures instantanées.
Dépendre d'une bibliothèque abandonnée
À éviter
npm install react-native-vieux-module // non maintenu depuis 2021À faire
// vérifier la compatibilité sur reactnative.directory avant d'installerPourquoi : Les bibliothèques qui s'appuyaient sur l'ancien pont peuvent casser : vérifie leur compatibilité avec la nouvelle architecture.
5Subtilités à connaître
- ◆Le mode « bridgeless » supprime entièrement le pont historique ; les modules restants passent par une couche d'interopérabilité.
- ◆Avec Fabric,
useLayoutEffectpeut lire des mesures de mise en page de façon synchrone, sans le scintillement d'autrefois. - ◆Les fonctionnalités concurrentes de React (
startTransition,useDeferredValue, Suspense) sont pleinement exploitables.
6Techniques d'expert
Mesurer avant de peindre
Avec Fabric, un useLayoutEffect qui appelle ref.current.measure peut positionner une infobulle avant l'affichage, sans saut visuel.
Prioriser avec startTransition
Enveloppe les mises à jour non urgentes (filtrer une longue liste) dans startTransition : la saisie reste réactive pendant le calcul.
const [pending, startTransition] = useTransition(); const surRecherche = (texte) => { setTexte(texte); // urgent startTransition(() => setFiltre(texte)); // peut attendre};Auditer ses dépendances
Avant une mise à jour majeure, liste tes bibliothèques natives et vérifie leur compatibilité sur reactnative.directory. C'est la principale source de blocage.
7Sur le terrain
- Les grandes apps (réseaux sociaux, e-commerce) ont migré progressivement, écran par écran, en mesurant le temps de démarrage.
- Les éditeurs de bibliothèques publient des specs Codegen pour garantir des types identiques entre iOS, Android et TypeScript.
- Les équipes suivent leur temps de rendu initial avant et après migration pour chiffrer le gain.
8Vérifie ta compréhension
Question 1/3
Score 0
Quel élément remplace la sérialisation JSON du pont ?
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.