- La version 0.76 de React Native a été publiée sur npm. Cette version inclut par défaut la nouvelle architecture et prend pleinement en charge les fonctionnalités modernes de React.
- La nouvelle architecture prend en charge des fonctionnalités comme Suspense, Transitions, le batching automatique et
useLayoutEffect, tout en introduisant un nouveau système de modules et de composants natifs permettant d’écrire du code avec sûreté de type.
- Il s’agit du résultat d’une réécriture en profondeur de React Native engagée depuis 2018, conçue pour permettre à la plupart des applications de passer progressivement à la nouvelle architecture.
- React Native 0.76 peut être adopté par la majorité des applications avec un effort comparable aux versions précédentes, et les bibliothèques populaires prennent déjà en charge la nouvelle architecture.
Qu’est-ce que la nouvelle architecture ?
- La nouvelle architecture est une réécriture complète des principaux systèmes de React Native, notamment le rendu des composants, la communication entre JavaScript et les abstractions natives, ainsi que la planification du travail entre les threads.
- L’ancienne architecture communiquait avec les plateformes natives via un bridge asynchrone, tandis que la nouvelle architecture est conçue pour prendre en charge à la fois les mises à jour synchrones et asynchrones.
- La nouvelle architecture se compose de quatre parties principales : le système de modules natifs, le nouveau renderer, la boucle d’événements et la suppression du bridge.
Nouveaux modules natifs
- Écrits en C++, ils apportent les capacités suivantes :
- communication synchrone possible avec le runtime natif
- sûreté de type entre JavaScript et le code natif
- partage de code entre plateformes
- lazy module loading fourni par défaut
- L’API JavaScript/TypeScript permet d’exploiter toutes les fonctionnalités des implémentations natives en C++.
- Codegen permet de définir des contrats de types robustes.
- Les modules ne sont chargés en mémoire qu’au moment où ils sont nécessaires, ce qui réduit le temps de démarrage de l’application.
Nouveau renderer
- Réécrit en C++, il offre les avantages suivants :
- rendu des mises à jour possible sur différents threads avec différentes priorités
- lecture synchrone du layout possible depuis d’autres threads
- code C++ partagé sur toutes les plateformes
- La hiérarchie des vues est désormais stockée sous forme d’arbre immuable
- traitement possible des mises à jour de manière thread-safe
- gestion possible de plusieurs arbres en cours représentant différentes versions de l’interface utilisateur
- Il devient possible d’interrompre une mise à jour de faible priorité, de rendre d’abord des éléments urgents comme une saisie utilisateur, puis de reprendre la mise à jour de faible priorité.
Boucle d’événements
- La nouvelle architecture met en œuvre un modèle clair de traitement de la boucle d’événements afin de réduire les différences entre React DOM et React Native.
- mise en œuvre d’un modèle de traitement de la boucle d’événements bien défini pour gérer les tâches sur le thread JavaScript
- La boucle d’événements ordonne les mises à jour et les événements de manière prévisible, ce qui permet d’interrompre des mises à jour de faible priorité par des événements utilisateur urgents.
- Elle s’aligne mieux sur les spécifications du Web.
- Elle servira de base à davantage de fonctionnalités de navigateur à l’avenir.
Suppression du bridge
- La nouvelle architecture supprime le bridge, ce qui permet une communication directe et efficace entre JavaScript et le code natif.
- La suppression du bridge améliore le temps de démarrage, réduit les crashs liés à des comportements non définis et facilite le signalement des erreurs ainsi que le débogage.
Nouvelles fonctionnalités
- Transitions
- Transitions, un nouveau concept introduit avec React 18, distingue les mises à jour urgentes des mises à jour non urgentes.
- Les mises à jour urgentes nécessitent une réponse immédiate, tandis que les mises à jour Transition font passer l’interface d’une vue à une autre.
- Le batching automatique regroupe davantage de mises à jour d’état afin d’éviter le rendu d’états intermédiaires, ce qui permet à React Native d’être plus rapide et de fonctionner avec moins de latence.
- La nouvelle architecture prend en charge la lecture synchrone des informations de layout via
useLayoutEffect et permet de mettre à jour l’interface dans la même frame.
- La nouvelle architecture prend pleinement en charge Suspense, introduit dans React 18, pour gérer les états de chargement et donner une priorité élevée aux entrées utilisateur.
Comment faire la mise à niveau
- Lors du passage à la version 0.76, la plupart des applications peuvent effectuer la mise à niveau avec un effort comparable aux autres releases grâce à la couche d’interopérabilité.
- Cependant, pour exploiter pleinement la New Architecture et les fonctionnalités concurrentes, il faut migrer les modules et composants natifs personnalisés.
- Pour les développeurs d’applications
- il est nécessaire de mettre à niveau les bibliothèques, composants natifs personnalisés et modules natifs personnalisés afin qu’ils prennent pleinement en charge la New Architecture
- la plupart des bibliothèques React Native populaires ont déjà collaboré pour prendre en charge la New Architecture
- Pour les mainteneurs de bibliothèques, il est recommandé de migrer les bibliothèques vers les nouvelles API de modules et de composants natifs.
Le récapitulatif de GN⁺
- Le passage à la New Architecture semble constituer une étape majeure pour le développement avec React Native. La prise en charge des mises à jour synchrones et asynchrones, la suppression du goulot d’étranglement du bridge et la possibilité de lire le layout depuis un autre thread devraient apporter de nombreuses améliorations en matière de performances et d’expérience utilisateur.
- Le fait qu’elle prenne désormais pleinement en charge les fonctionnalités concurrentes de React 18 mérite aussi l’attention. Il sera possible de créer une UX plus réactive et plus naturelle en s’appuyant sur Suspense, Transition et autres.
- Cela dit, les applications et bibliothèques existantes devront sans doute effectuer un travail de migration pour prendre entièrement en charge la New Architecture. Cette transition devra probablement se faire progressivement, mais une fois la migration terminée, il sera possible de profiter pleinement de ses avantages.
- Cette architecture est déjà utilisée dans les applications Facebook et Instagram de Meta, et compte des cas de réussite comme Expensify, Kraken et BlueSky.
- Dans l’ensemble, la New Architecture représente à mon avis une avancée majeure pour l’avenir de React Native. J’espère qu’elle s’installera durablement grâce à la coopération de la communauté.
6 commentaires
J’ai l’impression que la première fois que j’ai entendu parler de React Native remonte à très loin. Même si le projet a démarré chez Facebook, c’est plutôt surprenant qu’il n’ait toujours pas encore atteint la version 1..
Je n’ai encore jamais utilisé RN, donc je suis curieux, mais j’ai l’impression qu’il serait plutôt optimisé pour Android ; c’est étonnant de voir qu’en pratique les performances sont meilleures sur iOS.
Il semble que presque tous les crashs de notre côté proviennent d'Android.
Sur Android, c’est absolument horrible... à un niveau horrible...
On dirait qu’ils ont encore tout refondu, alors que j’ai l’impression que ça ne fait pas si longtemps qu’ils sont passés à Hermes comme moteur.
Avis sur Hacker News
Avoir développé des applications React Native et des API backend pendant 4 ans, et la migration vers Expo a résolu de nombreux problèmes, mais des bugs subsistent. iOS est plus stable qu’Android et offre aussi de meilleures performances. React Native est facile à apprendre et bénéficie du vaste écosystème JS, donc c’est recommandable, mais actuellement c’est Flutter qui est utilisé
Les avis sur React Native sont variés ; certains expriment leur mécontentement vis-à-vis d’Expo et recommandent Kotlin Multiplatform. Certains estiment aussi que les discussions sur Hacker News deviennent de plus en plus dénuées de sens
En tant que développeur Flutter, penser que Swift UI et Compose sont mieux adaptés au développement mobile, et ne pas utiliser Flutter ni React Native pour démarrer une nouvelle application
React Native est correct sur iOS mais lent sur Android. Hermes est intéressant, mais nécessite encore beaucoup de polyfills. Attendre avec impatience le jour où le web remplacera React Native
Développer Bluesky avec Expo/RN, et les premiers tests sur la nouvelle architecture montrent une amélioration des performances sur Android
Avoir eu une expérience positive avec React Native utilisé avec Expo, et en tant que développeur solo, RN permet de faire beaucoup de choses. Attendre avec impatience la nouvelle architecture
La vitesse de rendu de Flutter est 5 fois plus rapide que celle de React Native, et React est plus rapide sur le web
Avoir vu un tweet disant que Capacitor est utile pour porter une web app NextJS
React Native s’est nettement amélioré cette année, et quand react-strict-dom sera prêt, cela apportera un grand changement