Tech Radar React Native

La route vers la mise en production d’une application React Native est longue et semée d'embûches : mise en place du build, signature de l'application, déploiement sur les stores, et ce pour chaque plateforme ! Plusieurs outils sont requis pour ce système de déploiement : fastlane, une CI avec des runners macOS, firebase, chacun exigeant sa propre configuration. Cette configuration, qui demande plusieurs jours ainsi que des connaissances pointues en développement mobile, ne garantit pas automatiquement un système de déploiement performant : la durée de build sur iOS est élevée, pouvant atteindre une demi-heure, sans optimisation de build complexe. Pour simplifier la mise en place d'un système de déploiement efficace, Expo a créé Expo Application Services.

EAS réunit plusieurs outils en un, permettant de builder et de déployer des applications React Native plus rapidement, plus facilement et à moindre coût :
‍

• EAS a été optimisé pour réduire drastiquement la durée de build, ce qui rend son système de déploiement continu très performant ;
• Expo a simplifié la configuration d'EAS en abstrayant le déploiement et la signature de certificats. Ces améliorations nous ont permis de réduire le temps de configuration sur nos projets, d'une moyenne de deux jours à seulement deux heures ;
• pour les modifications ne contenant pas de code natif, EAS offre un système d’update OTA (Over-The-Air) permettant de partager les mises à jour sans avoir à télécharger une nouvelle application.

Nous estimons que EAS coûte en moyenne 100$ par mois pour un projet de taille moyenne, mais reste également disponible gratuitement avec un temps d'attente.

‍

NOTRE POINT DE VUE

Nous vous recommandons vivement d'utiliser EAS. Sa configuration est rapide et facile à mettre en place, ce qui en fait une excellente option, notamment pour les développeurs moins expérimentés dans le domaine mobile. En optant pour EAS, vous économiserez du temps et pourrez vous concentrer pleinement sur l'essentiel : le développement de votre application.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Le monde du développement mobile peut être intimidant pour les développeurs novices dans ce domaine. En effet, ils devront faire face à des problèmes de build, de signature et de déploiement, qui requièrent des connaissances spécifiques au mobile. React Native apporte également son lot de difficultés, avec des mises à jour complexes et des bridges compliqués à implémenter.

Depuis quelques années, le framework Expo apporte des solutions aux problèmes rencontrés par les développeurs React Native. Ce dernier est constitué de plusieurs parties pouvant être utiles selon les besoins de vos projets :
‍

• si vous débutez en React Native, utilisez Expo Go, un client mobile permettant de faire tourner votre code Javascript en fournissant les librairies nécessaires à la plupart des projets, éliminant ainsi les étapes de build, de signature et de déploiement qui sont les plus grands obstacles pour les nouveaux développeurs mobile ;
• si vous avez besoin de librairies natives qui ne sont pas incluses dans Expo go, utilisez le système Prebuild d'Expo, qui génère le code natif de votre application, dont vous n'avez pas à vous soucier. Les mises à jour React Native sont également grandement simplifiées, la difficulté résidant principalement dans les modifications natives ;
• si vous avez des modules natifs à créer, faîtes le à l'aide de l'API Expo Modules. Elle abstrait la complexité d'implémentation des bridges React Native, supporte Kotlin et Swift et facilite le support pour la nouvelle architecture ;
• si vous avez besoin de faire quelques modifications sur vos fichiers natifs, intégrez-les dans des config plugins.

Toutefois, si les modifications natives de votre projet sont complexes ou nombreuses, utiliser les systèmes de custom plugins et de Prebuild risque de rendre ces modifications plus coûteuses à développer et à maintenir. Dans ce cas, nous recommandons de versionner vos fichiers natifs, et d'adopter un développement en "bare workflow" ; Quel que soit votre cas, vous pourrez tirer parti des librairies du SDK Expo et de la CLI.

À l’issue de notre dernier Tech Radar, nous avions émis deux avertissements relatifs à l'utilisation d'Expo : 

• d'abord, la difficulté pour modifier du code natif, qui a été diminuée par les Expo modules ;
• ensuite, l'impossibilité de déployer une application Expo en cas d'inaccessibilité du système de déploiement d'Expo (EAS). 

En solution de secours, il est désormais possible de builder et de déployer son application en local. Ces améliorations nous permettent de passer Expo en "Adopt". Ainsi, tout projet React Native peut tirer profit des différentes parties d'Expo en fonction de ses besoins. 

NOTRE POINT DE VUE‍

Pour les nouveaux projets, nous recommandons de démarrer en utilisant toutes les parties d'Expo répondant aux besoins de vos projets, pour abstraire un maximum de complexité le plus longtemps possible. Si à un moment un outil d'Expo ne répond plus à votre besoin, vous pourrez l'éjecter.

‍

HISTORIQUE 2022

Trial - Voir le Tech Radar 2022

Le temps de démarrage des apps a longtemps été un point noir de React Native, surtout sur des téléphones Android bas de gamme. À titre d’exemple, l’une de nos apps, qui contenait un code JS conséquent, démarrait en 12.9s sur un téléphone bas de gamme.

Pour remédier à ce problème, Facebook a implémenté Hermes, un nouveau moteur JavaScript. Au lieu de parser et de compiler le JS en code binaire au lancement de l'app (comme un moteur JS traditionnel), Hermes le fait pendant le "build time" de l'app.

Ainsi, une app sous Hermes n'inclut plus de fichier JS embarqué, mais plutôt un fichier de code binaire. Les résultats sont frappants : grâce à l'utilisation d'Hermes, l'application mentionnée précédemment se lance désormais en seulement 3.9 secondes et le temps de démarrage de toutes nos apps a été réduit d'au moins la moitié. Passer enableHermes à true dans la configuration et ajouter quelques polyfills (ex : i18n, regexp) vous permettront de profiter de cette amélioration.

Certaines fonctionnalités sont encore manquantes (comme certaines APIs d'internationalisations) et pourront nécessiter l'ajout d'un polyfill. Mais la liste se restreint : par exemple, les regex capture group mentionnés dans la précédente édition de ce tech radar sont désormais supportés.

Hermes est désormais activé par défaut sur iOS et Android depuis la version 0.70.0. Cependant, d'après l'étude de Software Mansion "State of React Native 2022", Hermes n'est encore adopté que par 60% des équipes. 

NOTRE POINT DE VUE‍

Pour les projets démarrés sans Hermes, nous vous conseillons de faire la migration pour l'activer. Les bénéfices surpassent les coûts, car sans Hermes, le temps de démarrage de vos apps Android ne sera probablement pas à la hauteur des recommandations de Google.

‍

HISTORIQUE 2022

Adopt - Voir le Tech Radar 2022

Les navigateurs web modernes permettent aux développeurs de stocker localement des données de type clé-valeur sur l'ordinateur de l'utilisateur grâce à l'API localStorage. React Native s'est inspiré de cette API pour fournir une API similaire, appelée AsyncStorage.

Cependant, contrairement à son homologue web qui est synchrone, AsyncStorage possède une API asynchrone en raison de l'utilisation du bridge React Native. Toutefois, dans la plupart des cas d'utilisation de AsyncStorage dans nos applications, la synchronisation serait préférable. AsyncStorage nous oblige à utiliser des Promises JavaScript, ce qui complexifie la persistance et l'hydratation de l'état au démarrage de l'application.

Heureusement, une alternative sérieuse à AsyncStorage existe : react-native-mmkv. 

Cette bibliothèque est un module natif qui exploite la puissante technologie MMKV, un framework natif de persistance des données clé-valeur, développé par Tencent. 

Les avantages de react-native-mmkv sont nombreux :

• une API synchrone grâce à l'utilisation de [JSI](./jsi.md) ;
• des méthodes 20 fois plus performantes que celles d'AsyncStorage d'après un benchmark effectué par le créateur de react-native-mmkv ;
• le chiffrement du stockage pour les données sensibles ;
• un ensemble de hooks pour synchroniser les composants React avec les changements de valeurs des clés.

‍

NOTRE POINT DE VUE

Nous vous recommandons donc d'utiliser react-native-mmkv comme solution de persistance de vos données de type clé/valeur pour vos projets React Native, et nous vous invitons à prévoir un plan de migration de l'utilisation d'AsyncStorage vers react-native-mmkv. 

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Faire des animations en React Native n'est pas trivial. Bien que l'API Animated (fournie avec React Native) soit simple, le code est impératif et complexifie les composants. Le coût d'implémentation étant élevé, les animations ne sont pas souvent prioritaires dans le développement d'applications.

La bibliothèque Reanimated change la donne en offrant une approche plus déclarative pour les animations. Les animations sont simples à implémenter et n'affectent pas la lisibilité du code du composant. Les animations sont exécutées dans le thread UI, ce qui garantit des animations fluides et de bonnes performances.

Pour des animations plus complexes, les hooks de Reanimated permettent d'extraire facilement des blocs de code d'animation dans des hooks séparés, permettant une réutilisation et une maintenance simplifiée. Mieux encore, les Layout Transitions de la bibliothèque rendent les animations d'apparition/disparition ou de changement plus simples et intuitives. Ces tâches auraient été très complexes à réaliser sans l'utilisation de cette bibliothèque.

Reanimated améliore considérablement la qualité du code d'animation par rapport à Animated de React Native, tout en incitant les développeurs à implémenter des animations. La bibliothèque est activement maintenue et sa stabilité s'est nettement améliorée au fil des mois. Sa version 3 inclut des améliorations de performances et de qualité, ainsi que le support de la nouvelle architecture de React Native et les transitions d'éléments partagés. Reanimated est aujourd'hui un pilier de la stack technique d'un projet React Native. 

‍

NOTRE POINT DE VUE

‍

Nous vous conseillons l'utilisation de sa version 2 si vos dépendances sont incompatibles avec la version 3 (utilisation de l'api legacy de la V1), sa version 3 sinon.

‍

HISTORIQUE 2022

Trial - Voir le Tech Radar 2022

Les projets React Native ont besoin, comme tous les projets JavaScript, d'un package manager pour installer et mettre à jour les dépendances qu'ils utilisent.

La version 2 de yarn a été lancée en 2020 avec un objectif ambitieux : rendre possible les "zero-installs", avec lesquelles un "checkout" git suffit à avoir les bons packages installés, sans étape d'installation. Cette fonctionnalité remplace le dossier node_modules par un mécanisme appelé plug-n-play (PnP).

Ce mécanisme a en pratique été peu adopté car il nécessite une intégration spécifique dans chaque outil (nodejs, bundlers, IDE, TypeScript, etc...). Par exemple : metro, le bundler React Native, ne gère pas à ce jour le PnP, ce qui a donc bloqué l'adoption de yarn 2 par les équipes React Native. Néanmoins, yarn 3 a ré-introduit un mode de fonctionnement "classique" avec un dossier node_modules. 

Cela permet d'utiliser yarn 3 avec React Native (en ajoutant une ligne de configuration nodeLinker: node-modules) et de bénéficier de ses autres avantages :

• cette version est maintenue et plus rapide ;
• la version de yarn est obligatoirement fixée dans le projet, donc les installations sont plus déterministes ;
• des fonctionnalités qui nécessitaient des packages supplémentaires sont intégrées, comme la possibilité de patcher certaines dépendances, ou yarn dedupe qui permet de réduire la taille du bundle en respectant les contraintes de version fixées dans le package.json ;
• des plugins pratiques tels que celui qui installe automatiquement les packages @types pour TypeScript sont disponibles.

‍

NOTRE POINT DE VUE

Avec le support des symlinks qui est arrivé récemment dans metro, le package manager pnpm pourrait devenir une bonne alternative, mais yarn 3 reste la meilleure option pour les projets React Native aujourd'hui. Nous l'utilisons sur nos projets et la transition s'est déroulée sans aucune difficulté.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Au cours des cinq dernières années, TypeScript a considérablement modifié le paysage JavaScript, se hissant même parmi les cinq langages les plus utilisés en 2022, selon le sondage stack-overflow. La promesse de TypeScript est de garantir que si les données en entrée sont correctes, les données en sortie le seront également. Cependant, cela soulève plusieurs questions :

• comment vérifier que les données en entrée sont correctes lorsqu'elles proviennent d'un environnement non contrôlé (résultat d'API, formulaire...) ?
• comment intégrer cette vérification à l'exécution de notre application, étant donné que la vérification du typage a lieu lors de la phase de compilation ?

La librairie Zod offre une solution à cette problématique en permettant de générer des types et des validateurs associés à partir d'un schéma de données. Ces validateurs permettent de s'assurer que les données reçues correspondent bien au type attendu par l'application et protègent celle-ci contre les données mal formatées.

Les cas d'utilisation de Zod sont multiples :

• validation des variables d'environnement ;
• validation des retours d'API ; 
• validation des formulaires.

Cependant, l'utilisation de Zod présente un inconvénient : la librairie requiert beaucoup de connaissances pour être utilisée efficacement. Bien que les développeurs seniors puissent l'utiliser efficacement, cela peut compliquer l'intégration des développeurs juniors. Néanmoins, la librairie peut être adoptée de manière incrémentale, ce qui facilite son adoption au sein des équipes.

‍

NOTRE POINT DE VUE

Dans notre précédent radar, nous recommandions l'utilisation de Runtypes, une librairie concurrente offrant des fonctionnalités similaires. Toutefois, nous avons rencontré des problèmes de compatibilité avec le moteur JavaScript Hermès. De plus, nous avons

constaté que Zod était plus complet et mieux maintenu que son concurrent. C'est pourquoi Zod est devenue la librairie que nous utilisons par défaut sur nos projets, et nous vous recommandons de faire de même.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

React Query s'est progressivement imposée comme une solution de référence pour la gestion des appels asynchrones et de l'état serveur dans les applications React. Nous l'avions d'ailleurs positionnée en "Adopt" dans notre précédente édition du radar.

Néanmoins, même avec React Query, le code peut devenir complexe lorsque les appels asynchrones se multiplient au sein d'une même page et que l'on souhaite garder une gestion fine des états de chargement et d'erreur. Ces appels doivent être faits (avec des useQuery) là où l'on souhaite afficher le loader (ex : au niveau d'un composant de page) plutôt que dans le composant qui a besoin des données. Les composants deviennent moins réutilisables.

Depuis React 18, Suspense n'est plus une fonctionnalité expérimentale et résout ce problème. On remplace les conditions ++code>if(isLoading)++/code> par un composant <Suspense>, positionné n'importe où, plus haut dans l'arbre de composants. React gère ensuite l'affichage du loader ou du contenu. Une fonctionnalité similaire existe pour les erreurs avec les "Error Boundaries".

React Query propose en expérimental, la compatibilité avec Suspense. Il suffit de configurer le client React Query avec suspense: true. Activer cette option permet de bénéficier dès aujourd'hui des avantages de Suspense, de l'organisation du code au découpage des composants.

À noter que :

• le support de Suspense par React Query est encore expérimental, et des "breaking changes" sont à prévoir ;
• les APIs côté React vont probablement encore évoluer (avec le nouveau hook use) ;
• l'autre bénéfice majeur de Suspense, les améliorations de performance, nécessite l'utilisation de la nouvelle architecture de React Native.

‍

NOTRE POINT DE VUE

Il est tout à fait possible d'activer Suspense dès aujourd'hui sur de nouveaux projets (le coût de migration des APIs actuelles vers les futurs changements sera plus faible que sans Suspense), mais pour des projets existants, il est préférable d'attendre avant de lancer une migration.

‍

HISTORIQUE 2022

Adopt - Voir le Tech Radar 2022

Pour afficher une longue liste d'éléments comme un fil d'actualités, React Native propose FlatList, qui permet de virtualiser l’affichage : seule une partie de la liste est rendue à l’écran et se met à jour dynamiquement au fur et à mesure que l'utilisateur scroll, garantissant ainsi une meilleure performance.

Cependant, par défaut, les FlatList rendent assez d'éléments pour remplir 21 écrans (oui, c'est énorme !), ce qui est coûteux. De plus, au scroll, la FlatList va parcourir tous les éléments affichés pour les re-rendre s'ils sont en effet dans la vue. Une mémorisation agressive permet de limiter l'impact en performance, qui restera cependant en deçà des composants natifs comme la RecyclerView d'Android.

FlashList de Shopify est une solution alternative qui répond à ces problèmes de performance :

• elle est basée sur le composant JS recylerlistview de Flipkart qui permet le "recyclage" d'éléments. Au scroll, le recylage va réutiliser les éléments hors de portée et changer leurs props, ce qui diminue le temps de rendu ;
• cette technique permet également à Flashlist d'optimiser le rendu et de rendre assez d'éléments pour remplir moins de 2 écrans.

Les gains sont flagrants : la consommation CPU au scroll est réduite de moitié sur la majorité de nos projets !

Migrer de FlatList à FlashList semble simple en théorie : il suffit de modifier deux lettres ! En pratique, les éléments de la liste peuvent nécessiter une adaptation dans des cas complexes. Comprendre le fonctionnement du recyclage, ajoute de la complexité (ex : il est déconseillé d'avoir un state propre aux éléments de la liste. De plus, nous avons rencontré quelques problèmes avec le support RTL, ce qui peut être un frein à l'utilisation de FlashList. À noter également, que le support web est encore en beta.

‍

NOTRE POINT DE VUE‍

Nous recommandons de mettre en place la migration de FlatList vers FlashList pour profiter des gains de performance conséquents, tout en effectuant des tests de non-régression pour vous éviter de tomber dans les cas limites non supportés par la bibliothèque.

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

La mise en forme dans React Native peut être lente et fastidieuse. Utiliser des stylesheets ou une librairie comme Styled Components peut être lent et ne garantit pas la cohérence des styles dans l'ensemble du code. Sur le web, Utility First Styling est devenue une méthode courante pour accélérer et améliorer la mise en forme, Tailwind étant l’exemple le plus populaire de ce concept.

L'idée de style Utility First est d'abstraire la stylisation courante que vous feriez dans des "utility classes". Par exemple, si vous souhaitez ajouter un padding de 4 rem, vous aurez une classe p-4 pour gérer cette fonctionnalité. Un autre exemple pourrait être d'arrondir complètement les angles d’une div, donc vous auriez une classe rounded-full pour gérer cette fonctionnalité. Utiliser le style de type "Utility First" signifie que vous devez combiner ces classes pour styliser complètement vos composants.

Étant donné que Tailwind est une solution d'abord conçue pour le web, quelques bibliothèques portent Tailwind pour React Native :

• tailwind-rn
• twrnc
• NativeWind

Nous avons choisi d'inclure Tailwind dans notre cadran “trial” cette année, car il est largement utilisé sur le web et a été testé et approuvé au cours des dernières années. 

Du côté mobile, nous pensons que NativeWind a atteint un niveau de maturité suffisant pour l’utiliser sereinement en tant qu'implémentation de Tailwind pour React Native.

‍

NOTRE POINT DE VUE‍

Nous vous recommandons d'utiliser NativeWind, car il offre la plus faible divergence par rapport à la bibliothèque originale Tailwind et un plugin Babel pour reproduire l'implémentation de Tailwind React. NativeWind est activement maintenu, prend en charge RN pour le web et offre de nombreuses fonctionnalités telles que le mode sombre, les classes arbitraires, les requêtes média, les thèmes, les valeurs personnalisées et les plugins.

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Un des plus grands avantages de React Native est de pouvoir partager le même code entre 2 voire 3 plateformes (Android, iOS, Web...). Mais si vous avez une application native existante avec une codebase importante, comment en tirer parti ?

Tout réécrire de zéro serait trop risqué : on ne peut tester en production qu’à la fin d’une longue refonte. Les applications dites “brownfield” sont des applications qui, tout en conservant leur codebase “legacy”, ici leur codebase native, migrent progressivement vers la nouvelle technologie, React Native, permettant ainsi de mettre en production petit à petit. React Native dispose maintenant d’une documentation à cet effet. Mais si des développeurs natifs continuent à maintenir la partie native de l’app en parallèle de la migration en React Native, la configuration que cela implique sera disruptive pour eux. En effet, Node est alors nécessaire pour lancer l’application et metro doit tourner en parallèle de l’app native pour servir le JS (comme une app React Native habituelle). De plus, comme React Native et les libs associées (comme Reanimated ou react-native-webview) intègrent un code natif important, le temps de build natif est rallongé puisque ces dépendances seront souvent recompilées. Sur notre dernier projet Brownfield, le temps de build iOS était augmenté de 30 à 50% selon les machines des développeurs.

L’alternative est d’empaqueter React Native, les libs nécessaires et le code JavaScript dans un SDK tiers : distribué sous la forme d’un .aar pour Android ou d’un .xcframework sur iOS. Ainsi l’intégration dans l’app native est simple : la partie RN s’active et s’utilise comme n’importe quelle lib tierce native.

De plus, le code étant pré-compilé, l’impact sur les temps de build est négligeable. À noter que Walmart avait développé Electrode pour industrialiser ce processus, mais la solution est aujourd’hui peu maintenue et potentiellement lourde pour des équipes plus réduites que celles de Walmart.

En contrepartie, il devient plus compliqué de développer en même temps sur la partie native et la partie React Native de l’app. Des contrats d’interfaçage entre la partie native et le SDK React Native doivent donc être clairement définis au préalable.

Cette intégration est par ailleurs plus complexe que celle recommandée par la documentation et demande une véritable expertise native, nous avons dû par exemple modifier le plugin Gradle de RN pour assurer l’activation d’Hermes.

‍

NOTRE POINT DE VUE

Nous vous recommandons donc de vous assurer d’avoir une équipe native de taille suffisante et l’expertise nécessaire avant de choisir cette solution.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Une app étant souvent disponible à la fois sur le web et sur le mobile, il est naturel de vouloir partager du code entre ces plateformes, ce qui est possible pour la logique métier, le state d'UI et les calls API. Cependant, les composants UI ne peuvent pas être partagés par défaut.

React Native Web est une implémentation des composants et APIs React Native compatible avec React DOM.

Son installation est simple, il suffit d'installer react-native-web en dépendance de l'app web et et d'ajouter un alias de react-native vers react-native- web dans la configuration du bundler. Cela permet d'importer des composants React Native dans une app web React.

‍

Nous avons pu partager entre 75% et 95% du code entre le web et le mobile en utilisant React Native Web sur plusieurs projets, et notre retour d’expérience est très positif.

Dans notre précédent radar, nous remontions un risque lié à la maintenance de la librairie par un seul développeur : Nicolas Gallagher. Embauché par Meta depuis, il a initié un travail d'unification des APIs web et native. En échangeant avec nos équipes ou d'autres équipes ayant choisi d'utiliser RN for Web, nous avons cependant noté des points souvent sous-estimés :

• le code peut être plus complexe que du code React pur, ce qui peut affecter le débogage et les performances ;
• l'accessibilité n'est pas encore parfaitement gérée (ex : le composant FlatList n'est pas traduit par des balises ul et li) mais des optimisations sont en cours ;
• la mise en page peut différer entre le web et le mobile, il est donc souvent préférable de partager certains composants d'une page plutôt que sa totalité ;
• il est important de considérer le partage de code dès la conception des fonctionnalités pour maximiser les avantages ;
• l'utilisation de React Native Web requiert des compétences plus avancées en architecture dès le début du projet pour assurer un code maintenable.

NOTRE POINT DE VUE

Bien que React Native Web évolue dans la bonne direction, les compromis sur l'accessibilité et les difficultés rencontrées par certaines équipes nous empêchent de le recommander pleinement à ce stade.

‍

HISTORIQUE 2022

Trial - Voir le Tech Radar 2022

Metro est le bundler par défaut pour React Native depuis 2017. Il fournit des fonctionnalités intéressantes (Live Reload, Hot Reload, build optimisé pour React Native) et répond aux besoins d'un grand nombre de projets. Toutefois, il présente certaines limites :

• les liens symboliques ne sont pas supportés, ce qui empêche l'utilisation de pnpm et complexifie la configuration des monorepos ;
• le découpage dynamique du code n'est pas supporté ce qui empêche la modularisation du front comme le fait webpack avec les modules fédératifs sur le web ;
• le tree shaking (suppression automatique du code non utilisé) n'est pas officiellement supporté ;
• les temps de build sont relativement longs par rapport à d'autres bundlers. 

React Native profite des innovations de l'écosystème web et Metro est remis en question par d'autres bundlers :

• ESbuild : grâce à react-native-esbuild, un bundler implémenté en Go, il est possible de réduire le temps de build de notre bundle JS jusqu'à 10 fois et de diminuer la taille du bundle d'environ 20% grâce à l'implémentation du tree-shaking ;
• Repack : une surcouche de webpack proposée par Callstack qui amène le support du code splitting et des modules fédératifs ;
• rnx-kit : une suite d'outils proposée par Microsoft qui permet d'augmenter les possibilités offertes par Metro, comme le support des liens symboliques et du tree shaking.

‍

NOTRE POINT DE VUE

Ces outils et librairies bousculent le monopole établi par Metro, mais restent encore très expérimentaux et requièrent des connaissances avancées en bundling JavaScript pour être configurés et utilisés sur des gros projets en production. Ils peuvent cependant répondre à certains de vos besoins incompatibles avec Metro.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Annoncée depuis 2018, la nouvelle architecture de React Native est enfin disponible et activable. Elle permet désormais :

• de supporter de nouvelles fonctionnalités de concurrence de React, qui améliorent l'expérience utilisateur (ex : startTransition permet de garder l'app réactive même pendant une transition UI coûteuse). On bénéficie également des améliorations de performance liées à Suspense ;
• de mesurer et de rendre les vues natives de manière synchrones, pour éviter un effet de « saut » du layout ;
• de partager certaines optimisations jusqu'alors propres à une plateforme, grâce au partage de code en C++ (ex : le View Flattening qui était jusqu'à présent disponible uniquement sur Android).

Pour migrer vers cette nouvelle architecture, il suffit de changer un paramètre de configuration dans votre app. A condition que toutes les librairies de vos projets supportent cette nouvelle architecture. La liste de librairies manquantes a diminué depuis notre dernière édition, mais certaines librairies majeures comme react-native-vision-camera ou flashlist demandent encore du travail.

Dans notre précédent Tech Radar, nous avons constaté des builds longs (5 fois plus que la durée sans la nouvelle architecture), ce qui est fixé depuis la version 0.71. Hermes et React Native ne sont désormais plus compilés depuis le code source, mais distribués sous forme d’artefacts pré-compilés sur Maven Central. Dans la version 0.72.0, Meta a corrigé des régressions de performance que nous avions signalées. De plus, des améliorations ont été apportées à la documentation pour faciliter la migration des apps et de librairies existantes. Dans la version 0.70.0, la fonctionnalité "auto-linking" a été ajoutée pour les librairies.

En revanche, certaines fonctionnalités de concurrence de React 18 comme useDeferredValue semblent ne pas impacter la performance aussi positivement que sur React Web.

NOTRE POINT DE VUE

Cette nouvelle architecture n'est pas encore prête à être activée sur vos apps, mais constitue le futur de React Native. Nous vous recommandons donc d'analyser la liste de librairies que vous utilisez et de vérifier qu'un plan de migration est en cours pour chacune d'entre elles, afin de préparer l'avenir. On espère d'ailleurs pouvoir passer la nouvelle architecture en "Adopt" dans notre prochain Tech Radar.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

La navigation dans React Native a constitué un défi majeur pour les développeurs. Bien que React Navigation se soit imposée comme la bibliothèque de navigation de référence dans RN, elle peut être délicate à utiliser et entraîner des problèmes de performances. Les meilleures pratiques en termes de routage sont difficiles à définir, en particulier pour les apps universelles qui fonctionnent à la fois sur les plateformes natives et web.

Expo Router vise à simplifier ce processus en isolant certaines complexités de React Navigation et en standardisant la navigation à l'aide d’un routage basé sur le système de fichiers (FSR), devenu un standard dans le développement web grâce à des frameworks comme Next.js

Cela diffère de l'approche déclarative adoptée dans React Navigation, où vous définissez les navigateurs dans votre code. Ex : là où vous auriez <Stack.Screen name="Home" component={HomeScreen} />

dans React Navigation, pour ajouter un écran d'accueil, vous créeriez un fichier home.ts à l'intérieur du répertoire app avec Expo Router.

Expo Router présente plusieurs avantages, dont : la création automatique des deep-links, l'application des meilleures pratiques grâce au FSR et une compatibilité automatique avec les universal apps (native et web). Cela a un impact important sur la résolution de certains défis traditionnels, liés à la navigation. Globalement, les fonctionnalités d'Expo Router simplifient le processus de deep linking et de transition fluide entre le web et le natif.

‍

NOTRE POINT DE VUE

Compte tenu de sa relative nouveauté, il y a encore de la place pour la maturité et l'amélioration de composants tels que la documentation et la stabilité du support TypeScript. Nous avons laissé Expo Router dans la catégorie "assess". Par conséquent, nous recommandons de garder un œil sur Expo Router car au fil du temps, il peut devenir une solution préférable à React Navigation.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

La performance des applications mobiles est un enjeu majeur pour améliorer la rétention utilisateur. Pour les applications React Native, environ 80% des problèmes de performances proviennent du code JavaScript. Les régressions de performance sont parmi les plus difficiles à détecter, et les utilisateurs finaux sont souvent les premiers à les signaler.

Les tests E2E peuvent être utilisés pour répondre à cette problématique. Ils sont cependant coûteux à mettre en place, sont longs à exécuter et ne permettent pas de tester la performance des composants en isolation.

Callstack nous propose une nouvelle solution avec sa librairie Reassure. Reassure fonctionne en utilisant react-native-testing-library pour effectuer des tests de performance sur des composants React Native. Il mesure et compare les temps de rendu des composants entre différentes branches git afin de détecter les régressions.

Reassure présente des avantages clés :

• il s'appuie sur la bibliothèque de référence pour tester une app React Native. La configuration est simplifiée pour tout projet utilisant cette librairie et la courbe d'apprentissage pour rédiger des tests est quasi nulle ;
• l'exécution des tests est rapide ;
• l'adoption d'une approche plus unitaire des tests de performance ;
• il permet d'intégrer les tests de performance dans votre processus d'intégration continue. Vous pourrez ainsi bloquer le merge de toute pull request introduisant des régressions de performances sur les composants suivis par des tests de performance.

Malgré ses nombreux avantages, Reassure présente quelques limitations. Il n'évalue pas de façon absolue la performance du composant, un problème de performance dès la création du composant ne sera donc pas détecté. Il n'est pas compatible avec jest-expo, et la technologie est encore jeune et évolue rapidement.

‍

NOTRE POINT DE VUE

Après une première phase de preuve de concept, nous avons décidé de déployer Reassure sur certains de nos projets. Nous pensons que cette technologie va continuer à gagner en popularité et en efficience et nous vous conseillons de la tester.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Les apps universelles qui fonctionnent à la fois sur le web et sur mobile, ont gagné en popularité. Toutefois, bon nombre des bibliothèques existantes (ex : React Native for Web) dans ce domaine ne traitent que les problèmes basiques. Les développeurs doivent donc composer avec les différences d'UI plus complexes, comme les comportements et mises en page des composants. Par exemple, la gestion des états des boutons sur le web vs. le mobile peut nécessiter une double pression sur les boutons en mode natif. Les apps mobiles utilisent des piles et des onglets pour les mises en page, tandis que les apps web utilisent des mises en page à plusieurs colonnes pour exploiter pleinement l'espace réel de l'écran.

Tamagui est un kit d'interface UI complet, qui offre un style cohérent tout en partageant des tokens, des thèmes, des polices et bien plus encore sur le web et les plateformes natives. C’est un moteur de styles léger, avec des thèmes, des animations, du responsive, des pseudo-styles et des optimisations de performances, pour aplatir l'arborescence des composants avec une évaluation partielle. Il produit un minimum de CSS et de styles dans RN. De plus, il fournit des composants pré-construits pouvant être utilisés sur le web et le mobile, aussi bien pour des éléments courants (ex : les boutons) ou plus complexes (ex : mises en page) avec des implémentations spécifiques au web ou au mobile selon la cible.

Tamagui sépare les implémentations tout en unifiant les API, ce qui permet aux composants d’apparaître et de se comporter différemment sur le web et sur le mobile. 

C'est une approche puissante, qui offre une expérience native selon la plateforme, bien qu'imparfaite : certains composants et éléments de la bibliothèque d'UI gardent un aspect et un comportement “web-first” ou “mobile-first”. Cependant, dans la plupart des cas, les compromis effectués sont judicieux et pragmatiques.

Nous recommandons de considérer Tamagui pour une app d'abord conçue pour le mobile et pour laquelle la gestion d’une app web séparée est impossible. Tamagui peut constituer un puissant outil pour créer des apps universelles à partir d'une codebase unique. 

NOTRE POINT DE VUE
‍
À ce stade, nous avons choisi de le placer dans la catégorie "assess", car il n'est pas encore utilisé en production dans l’un de nos projets. Bien qu'il soit soutenu par Vercel et qu'il compte un grand nombre de stars et de contributeurs, il s’accompagne de peu de guides accessibles aux débutants, pour toucher un public plus large.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.

Les appels d'API posent un défi important en termes de typage, ce qui rend difficile la détection des breaking changes. Diverses solutions ont été proposées, telles que le partage de types entre frontend et backend, l’utilisation de GraphQL, OpenAPI avec codegen, ou gRPC avec Protobuf. Cependant, ces solutions peuvent ajouter une complexité à une codebase ainsi qu’une charge de travail significative.

tRPC adopte une approche intéressante pour obtenir la typesafety entre le le front et le back, en utilisant TypeScript. Avec tRPC, vous pouvez créer et consommer des API entièrement sécurisées par des types, sans avoir besoin de schémas ou de génération de code, ce qui élimine les problèmes liés aux contrats d'API.

Parmi les principales caractéristiques de tRPC figurent la sécurité statique des types et l'autocomplétion pour les entrées du client.

Il est devenu bien connu dans la communauté pour son excellente expérience de développement. De plus, de nombreuses ressources et tutoriels sont disponibles en ligne, grâce à la popularité de la bibliothèque, ce qui facilite son apprentissage et son utilisation.

tRPC est une bibliothèque largement adoptée avec environ 25 000 étoiles sur GitHub et une équipe de cinq mainteneurs actifs, ce qui garantit la longévité du projet. Nous avons constaté que l'utilisation de tRPC a un effet très positif sur notre vitesse de développement et facilite notre cycle de développement full-stack. Il s'intègre bien avec React Query, ce qui signifie qu'il peut être complémentaire avec notre stack des appels API. De plus, son intégration avec les Edge Runtimes (comme Cloudflare Workers) permet un déploiement limitant les besoins en infrastructure.

‍

NOTRE POINT DE VUE

Il existe encore des domaines dans lesquels tRPC est en retard par rapport à d'autres solutions, tels que le versionning d'API, l'internationalisation, ainsi qu'un manque de prise en charge de l’upload de fichiers. En conséquence, nous avons décidé de classer tRPC dans la catégorie "assess" à mesure que la bibliothèque évolue.

‍

HISTORIQUE 2022

Il s'agit d'un nouveau blip cette année.