Version 0.76 : la révolution de React Native

Contexte de la nouvelle version

React Native, lancé en 2015 par Facebook (Meta), a connu une adoption massive grâce à son approche « apprendre une fois, coder partout ». Cependant, des limitations structurelles ont émergé avec le temps :

• La dépendance à un pont asynchrone (asynchronous bridge) ralentissait la synchronisation entre JavaScript et le code natif.
• Le rendu de l'interface utilisateur était limité par un modèle monotâche, ce qui provoquait des animations saccadées.
• Les fonctionnalités modernes de React, comme Suspense et les transitions concurrentes, étaient difficiles à implémenter en raison de ces contraintes.

En 2018, Meta a entamé une refonte totale appelée "New Architecture", avec des tests en production sur des applications comme Facebook et Instagram. La version 0.76 concrétise cette vision en rendant cette architecture par défaut.

Suppression du pont (Bridge) asynchrone : un changement fondamental

La suppression du pont (bridge) asynchrone est l'un des aspects les plus révolutionnaires de la "New Architecture". Cette évolution vise à résoudre des limitations de performances et de fiabilité en remplaçant un mécanisme historique par une approche moderne et efficace : la JavaScript Interface (JSI).

Ancien système : les limitations du pont asynchrone

Dans les versions précédentes, React Native utilisait un pont (bridge) pour assurer la communication entre JavaScript et le code natif. Ce système reposait sur une communication asynchrone, ce qui introduisait plusieurs problèmes majeurs :

1. Sérialisation des appels : par exemple, lors du rendu d'une liste de 1000 éléments, chaque mise à jour d'état était ajoutée à une file d'attente, augmentant la latence globale.
   • Chaque appel entre JavaScript et natif devait être sérialisé sous forme d'objet JSON.
   • La sérialisation impliquait des coûts importants, notamment lors de l'échange d'objets volumineux ou complexes.
2. Thread unique pour les appels natifs :
   • Les appels natifs étaient traités séquentiellement sur un thread de fond dédié.
   • Cela empêchait les mises à jour prioritaires, comme les réponses immédiates aux interactions utilisateur.
3. Problèmes de synchronisation : JavaScript et le code natif fonctionnaient souvent sur des threads différents, provoquant des désynchronisations. Ces problèmes se manifestaient par des comportements inattendus, tels que :
   • Des espaces vides dans une liste pendant un défilement rapide.
   • Des "sauts" visuels lors d'animations.
4. Impact sur les performances : les délais dus à la sérialisation et à l'exécution sur un thread unique limitaient la fluidité. Il était difficile d'atteindre les 60 FPS, indispensables pour une expérience utilisateur de qualité.

Nouvelle approche : JavaScript Interface (JSI)

Avec la JSI, React Native abandonne le pont asynchrone au profit d'une communication directe, synchrone et bidirectionnelle entre JavaScript et le natif.

1. Communication directe : lors d'une mise à jour d'interface, JavaScript peut désormais lire directement les propriétés d'un objet natif ou appeler une méthode synchronisée sans passer par un processus asynchrone.
   • La JSI permet à JavaScript d'interagir directement avec les fonctions et objets natifs, sans sérialisation intermédiaire.
   • Cela réduit drastiquement les délais, en éliminant les opérations inutiles.
2. Exécution multithreadée :
   • Contrairement à l'ancien système, la JSI permet de traiter les appels sur plusieurs threads.
   • Les interactions utilisateur, comme le défilement, peuvent être priorisées, garantissant une fluidité même en cas de charge importante.
3. Interopérabilité des données :
   • Les objets JavaScript et natifs peuvent être partagés directement via la JSI.
   • Par exemple, une instance d'objet créée en C++ peut être utilisée directement dans JavaScript, avec une gestion optimisée de la mémoire.
4. Réduction des bogues liés à la désynchronisation :
   • La communication synchrone garantit que JavaScript et natif restent alignés.
   • Les erreurs fréquentes, comme les états intermédiaires incorrects ou les animations bloquées, sont considérablement réduites.

Nouveau moteur de rendu : une refonte majeure

La mise à jour du moteur de rendu natif dans React Native 0.76 est une avancée clé pour améliorer la performance, la fluidité et la fiabilité des interfaces utilisateur. Ce nouveau moteur a été conçu pour résoudre les limitations de l'ancien système, notamment la gestion monotâche du rendu et les problèmes liés aux performances sur des applications complexes.

Le nouveau moteur a été réécrit entièrement en C++ et le même code est exécuté sur toutes les plateformes : iOS, Android, Windows, macOS...

Multithreading complet

Le nouveau moteur de rendu natif introduit la capacité à gérer plusieurs arbres d'interface utilisateur (UI trees) simultanément sur différents threads, y compris ceux de basse priorité.

Dans l'ancien système, toutes les mises à jour étaient traitées séquentiellement sur un seul thread, ce qui ralentissait l'exécution des tâches importantes (par exemple, les interactions utilisateur).

Les tâches de faible priorité, comme le rendu de contenus non visibles, peuvent être décalées vers des threads secondaires, laissant le thread principal disponible pour des tâches critiques (comme les animations ou les gestes).

Par exemple lorsqu'un utilisateur défile rapidement une liste, le contenu visible peut être priorisé pour garantir une fluidité, tandis que les éléments hors écran sont rendus en arrière-plan.

Arbre immuable

Le nouveau moteur utilise une structure immuable pour stocker la hiérarchie des composants. Cette approche offre plusieurs avantages :

• Sécurité des threads : les arbres immuables garantissent qu'une modification sur un thread n'affecte pas les données utilisées sur un autre thread.
• Optimisations de mise à jour : React peut comparer efficacement les versions d'arbre pour identifier uniquement les changements nécessaires.

Cela permet une réduction des erreurs liées à des mises à jour simultanées et une meilleure gestion des mises à jour partielles pour éviter des rerendus inutiles.

Optimisations automatiques

Une optimisation notable est l'introduction du "View Flattening" : lorsque des composants imbriqués n'ajoutent aucune complexité visuelle ou fonctionnelle (par exemple, des Views imbriquées pour des styles), ces vues sont automatiquement fusionnées.

Cela réduit le nombre de calculs nécessaires pour le layout et le rendu, améliorant ainsi les performances globales.

Par exemple, une interface avec des dizaines de conteneurs inutiles sera automatiquement optimisée, sans intervention du développeur.

Nouveau système de modules

Le nouveau système de modules natifs introduit est une réécriture complète qui transforme la manière dont JavaScript communique avec la couche native. En s'appuyant sur C++ et en utilisant la JSI, ce système résout les limitations de l'ancien pont et ouvre la voie à des performances et une fiabilité accrues.

Accès synchrone au runtime natif

Les modules natifs permettent désormais des appels synchrones entre JavaScript et le natif. Cela réduit les délais et améliore la réactivité des interactions utilisateur.

Contrairement à l'ancien système où chaque interaction nécessitait un callback asynchrone et la sérialisation des données, la JSI permet des échanges directs et immédiats.

Partage de code multiplateforme

Les modules écrits en C++ sont compatibles avec toutes les plateformes prises en charge par React Native (iOS, Android, Windows, macOS). Cela harmonise le développement et réduit les duplications.

Chargement paresseux (Lazy Loading)

Les modules ne sont chargés en mémoire que lorsqu'ils sont nécessaires. Cette approche optimise la consommation des ressources et accélère le temps de démarrage.

Avantages concrets pour les développeurs et utilisateurs

1. Temps de démarrage accéléré : les modules natifs sont chargés uniquement lorsqu'ils sont nécessaires (lazy loading), réduisant la charge initiale.
2. Amélioration de la réactivité : les interactions utilisateur, comme les clics ou les gestes, reçoivent une réponse immédiate grâce à la suppression des files d'attente asynchrones.
3. Support des fonctionnalités modernes de React : des fonctionnalités comme useLayoutEffect et Suspense sont désormais pleinement fonctionnelles.
4. Meilleure gestion des erreurs : en éliminant le pont, JSI offre des diagnostics plus précis, facilitant le débogage des erreurs JavaScript et natives.

Suivez notre formation React Native extrêmement complète aujourd'hui !