- Il y a 5 ans, Shopify a déclaré que React Native (RN) représentait l’avenir du développement mobile, puis a réussi à faire migrer toutes ses applications vers RN
- Principales raisons de l’adoption de React Native
- Écrire une fois pour deux plateformes : éliminer l’inefficacité consistant à développer deux fois la même fonctionnalité sur iOS et Android
- Améliorer la mobilité des talents : permettre aux développeurs de passer librement entre iOS, Android et le Web
- Créer plus de valeur : réduire le temps consacré à assurer la parité fonctionnelle et livrer davantage de valeur aux utilisateurs
- Résultats positifs de la transition
- La productivité a fortement progressé en évitant de développer deux fois la même fonctionnalité
- Les ingénieurs travaillent désormais à la fois sur le Web et sur le mobile, ce qui permet de faire plus avec les mêmes effectifs et de créer de nouvelles opportunités de croissance
- Le maintien de la parité fonctionnelle entre iOS et Android n’étant plus un problème, l’entreprise peut livrer davantage de valeur
- Le temps de chargement des écrans dans l’application est rapide, à moins de 500 ms, et plus de 99,9 % des sessions restent stables
- Shopify continue d’utiliser du code natif lorsque c’est l’outil le plus adapté, afin de bénéficier du meilleur des deux mondes
Principaux enseignements
Les applications React Native sont rapides
- Shopify accorde une grande importance aux performances, et son CEO Tobi Lutke souligne que « tous les logiciels rapides ne sont pas excellents, mais tous les excellents logiciels sont rapides »
- Avant la migration vers React Native (RN), la plus grande question était de savoir si RN pouvait atteindre les objectifs de performance
- Avant de prendre la décision, l’entreprise a donc mené un prototypage approfondi pour vérifier que c’était possible
- Shopify a examiné les travaux en cours chez Meta pour éliminer les goulots d’étranglement de performance et identifié les domaines, comme les listes, où elle pouvait contribuer
- En jugeant que RN allait bientôt devenir plus rapide, Shopify a décidé de l’adopter à grande échelle
- Cinq ans plus tard, les applications RN sont rapides, et l’application Shopify atteint un temps de chargement d’écran inférieur à 500 ms (P75)
- Des objectifs de performance comparables ont aussi été atteints avec succès sur toutes les autres applications
- Il est indispensable d’appliquer de bonnes pratiques et techniques pour éliminer les goulots d’étranglement
- Le natif n’est pas toujours forcément plus rapide, et RN n’est pas toujours plus lent
- RN a beaucoup progressé ces dernières années et s’est imposé comme une plateforme capable de produire des applications de niveau mondial
- À mesure que le framework RN gagne en maturité, il devrait devenir de plus en plus simple de développer des applications rapides
- Avec la montée en expertise des équipes, le potentiel pour créer de meilleures applications va continuer à s’élargir
Les avantages du hot reloading
- Le hot reloading de React Native (RN) a transformé l’environnement de développement, car les modifications sont prises en compte immédiatement
- L’un des plus gros problèmes du développement natif était que, selon la taille de la base de code, même un changement mineur pouvait nécessiter plusieurs minutes de compilation puis d’exécution sur émulateur ou appareil réel
- Cela entraînait une perte de temps et interrompait le flux de travail des développeurs
- Le hot reloading de RN a complètement résolu ce problème, améliorant fortement la productivité et l’expérience de développement
La mobilité des talents grâce à TypeScript
- Avec l’adoption massive de TypeScript, les développeurs peuvent plus facilement passer de React pour le Web à React Native (RN)
- Développeurs Web : grâce à RN, ils peuvent commencer à travailler sur le mobile bien plus facilement qu’avec le développement natif iOS ou Android
- Développeurs mobile : grâce à RN, ils peuvent participer plus facilement à des travaux côté Web
- Avantages de cette mobilité des talents
- Offrir davantage d’opportunités d’évolution aux ingénieurs et accroître la flexibilité dans l’affectation des ressources
- Renforcer la capacité à accomplir davantage de travail avec les mêmes effectifs de développement
- Générer plus d’efficacité et de productivité via le partage de code entre le Web et le mobile
- Les développeurs capables de travailler sur plusieurs plateformes permettent de livrer plus vite et de faire circuler les idées entre technologies pour les appliquer de nouvelles façons
- Cela favorise une culture où la technologie est vue comme un outil, élargit la perspective des équipes et les encourage à choisir l’outil le plus adapté à la tâche
Les développeurs natifs sont indispensables
- Les ingénieurs mobile spécialisés iOS et Android sont essentiels pour construire d’excellentes applications mobiles
- L’expérience accumulée dans le développement de nombreux produits mobiles, ainsi qu’une compréhension profonde de l’ergonomie et des conventions, sont irremplaçables
- Des tâches comme l’accès à la couche plateforme, l’écriture de bindings, la maîtrise du build et du déploiement, ou encore la gestion des mises à jour de version de React Native nécessitent une expertise native
- Les développeurs natifs sont aussi indispensables pour optimiser les performances de l’application sur une grande variété d’appareils et offrir une expérience cohérente à tous les utilisateurs
- Ils sont également essentiels pour suivre les nouvelles fonctionnalités, API et évolutions de l’outillage sur iOS et Android, ainsi que pour gérer les mises à jour de version de React Native
- Mise en place d’un cursus de formation React Native pour les développeurs mobiles natifs :
- conçu en autoformation pour leur permettre d’écrire du code de niveau production
- complété par le support de développeurs expérimentés en React Native via des sessions de questions-réponses, du pair programming et des revues de code
- Affectation supplémentaire de développeurs Web (experts JavaScript, TypeScript et React) aux équipes mobile :
- afin d’équilibrer solidement l’expertise entre natif et React Native
- ce qui améliore avec le temps le niveau technique de l’ensemble de l’équipe
- Une composition d’équipe bien équilibrée entre développeurs natifs et développeurs Web est la clé pour créer de très bonnes applications mobiles avec React Native
Le code natif est indispensable
- Éviter le 100 % React Native : RN est un outil efficace qui permet de ne développer une fonctionnalité qu’une seule fois, mais ce n’est pas la bonne technologie pour toutes les situations
- Cas où le code natif est nécessaire
- Développement de fonctionnalités avancées : fonctionnalités exploitant le matériel, comme le scan 2D/3D et l’exécution de modèles d’IA on-device
- Fonctionnalités soumises à des contraintes mémoire : widgets d’écran d’accueil et d’écran verrouillé, apps et complications Apple Watch, App Intents, Siri Shortcuts, etc.
- Tâches d’arrière-plan de longue durée :
- Ex. : l’application Point of Sale de Shopify télécharge et synchronise en arrière-plan de grands volumes de données pour permettre le traitement des transactions hors ligne
- L’application est conçue pour déporter entièrement ces tâches en arrière-plan vers du code natif afin de ne pas impacter les performances
- RN est très adapté pour développer la plupart des fonctionnalités une seule fois, mais il est idéal d’utiliser du code natif dans les domaines où le natif fonctionne le mieux
- La forte interopérabilité avec le natif, fournie par RN dès le départ, facilite la combinaison des deux technologies
- Il est important de raisonner non pas en termes de RN « ou » natif, mais de RN « et » natif
- Une équipe disposant d’une expertise native est indispensable pour mettre efficacement en œuvre cet équilibre
Les difficultés du débogage
- Le débogage de React Native (RN) présente des aspects instables et demande du travail supplémentaire pour être correctement configuré dans VSCode
- iOS et Android offrent nativement des capacités de débogage puissantes et stables
- Meta a récemment entièrement réécrit la pile de débogage de RN et poursuit ses améliorations ; le nouveau débogueur montre des résultats prometteurs
- Shopify collabore avec Meta pour hisser l’environnement de débogage de RN à un niveau mondial
Les mises à jour de React Native ne sont pas transparentes
- Mettre à jour une application vers une nouvelle version de React Native (RN) demande beaucoup de travail et nécessite souvent de restructurer la base de code
- Pour y répondre, Shopify a constitué un petit groupe tournant de développeurs dédié aux mises à jour, pendant que le reste des équipes se concentre sur le développement produit
- Shopify s’attend à ce que le processus de mise à jour devienne progressivement plus simple à mesure que le framework RN mûrit
- Avec une adoption plus large de la New Architecture, la complexité du travail lié aux mises à jour devrait diminuer
Une dépendance accrue aux bibliothèques tierces
- Le framework React Native (RN) est moins complet que le natif, ce qui conduit à utiliser davantage de bibliothèques tierces
- Ces dernières années, avec la maturation de l’écosystème, il est devenu facile de trouver des bibliothèques bien maintenues pour presque toutes les fonctionnalités nécessaires
- Cependant, cela implique de maintenir ces bibliothèques tierces à jour en continu et augmente la surface d’attaque de la chaîne d’approvisionnement
- Shopify a mis en place des mises à jour automatiques des dépendances via Dependabot
- ainsi qu’un scan de code automatisé pour détecter et prévenir le code malveillant
- Shopify espère que le framework RN évoluera vers une direction plus claire et intégrera davantage de fonctionnalités par défaut
Les grands bénéfices d’une base partagée
- Lors de l’adoption initiale de React Native (RN), Shopify avait peu d’expérience dans la création d’applications mobiles avec RN et ne pouvait pas non plus s’appuyer sur les bases partagées accumulées en développement natif
- Au départ, chaque équipe a développé son application en résolvant ses problèmes de manière autonome, ce qui a permis de démarrer rapidement et de migrer les applications efficacement
- Cependant, cela a entraîné un travail redondant et inefficace, chaque équipe résolvant plusieurs fois les mêmes problèmes
- Shopify a investi du temps et des efforts pour construire son expertise sur RN, en choisissant délibérément un compromis qui privilégiait la vitesse au détriment de la cohérence
- À partir de 2023, à mesure que toutes les applications ont gagné en maturité, Shopify a commencé à renforcer la cohérence
- Des composants communs (par ex. Identity, monitoring temps réel, mesure de performance, etc.) ont été extraits en bibliothèques partagées pour être utilisés par toutes les applications
- Cela permet aux équipes de réutiliser des solutions existantes sans avoir à résoudre de nouveau des problèmes déjà traités
- En 2025, Shopify prévoit d’étendre encore le partage de code afin de
- diffuser les connaissances et l’expertise entre les équipes
- faire bénéficier automatiquement toutes les applications des améliorations apportées aux composants partagés
- économiser des ressources d’ingénierie pour se concentrer sur la création de valeur pour les utilisateurs
L’avenir de React Native
- L’avenir de React Native (RN) est prometteur, et Meta gère très bien le projet en apportant des améliorations régulières
- À chaque release, les retours des développeurs influencent fortement la roadmap, et Shopify s’attend à ce qu’il devienne de plus en plus simple de créer des applications rapides
- Shopify prévoit de continuer à soutenir l’évolution de RN en adoptant la New Architecture
- De nombreuses grandes entreprises comme Microsoft, Amazon, Tesla, SpaceX et Coinbase utilisent RN, et des bibliothèques et frameworks tiers de haute qualité continuent d’être publiés
- Shopify contribue à l’open web, l’open source et aux standards ouverts notamment via
- des contributions de code à RN
- un rôle de co-release captain pour les releases de RN
- le soutien à des projets open source à fort impact comme React Native Skia et Reanimated
- la publication de projets open source comme Flashlist, Restyle et Tophat
- En complément, Shopify relance en 2025 le React Native Working Group
- L’objectif est de réunir les principaux responsables des organisations qui soutiennent RN pour identifier les grands défis de l’écosystème, définir les priorités d’investissement, encourager la collaboration et réduire les efforts dupliqués
- Parmi les entreprises ayant déjà participé : Meta, Twitter, Coinbase, Microsoft, etc.
- Pour participer, contact
- RN a énormément progressé ces cinq dernières années, et nombre des limites qui freinaient son adoption ont désormais disparu
- Si vous n’avez pas utilisé RN depuis un moment, c’est le bon moment pour lui redonner sa chance
9 commentaires
Nous avons adopté RN à peu près à la même période et pour des raisons similaires, et nous l’utilisons bien.
J’ai un peu de mal à partager le constat sur les problèmes de performance, mais c’est sans doute un sujet à régler au niveau de
react-dom.Le plus grand avantage, à mon avis, c’est qu’une petite équipe puisse accomplir beaucoup de choses.
Je me demande quelles fonctionnalités natives ne peuvent pas être couvertes par les API natives de RN.
C’est un partage d’expérience impressionnant. En ce moment, je développe des applications Android avec Kotlin dans le cadre de mon travail, et je me pose parfois la question : est-ce vraiment nécessaire d’opter absolument pour du natif… ? (Dans mon cas, il y avait des éléments qui devaient fonctionner en étroite collaboration avec la plateforme, donc je n’ai pas eu d’autre choix que de partir sur du natif.) Si possible, je pense qu’il serait également judicieux d’aller vers une approche prenant en charge le cross-platform, comme React Native ou Flutter.
Shopify est vraiment impressionnant @.@
« 100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything. »
« Instead of thinking native or React Native, think native and React Native. »
En ingénierie, le 100 % n’existe pas (attention aux titres putaclic du type « A est forcément meilleur »).
Chaque option a ses avantages et ses inconvénients, et il existe un outil adapté à chaque situation.
C’est aussi un excellent article pour découvrir la philosophie de Shopify en matière de constitution d’équipe.
Malgré tout, je vais quand même faire l’éloge de Flutter.
Ils ont tout migré vers RN... c’est impressionnant 😮
@shopify/flash-list, c’est vraiment génial. Merci, Shopify.Shopify joue déjà un rôle central dans l’écosystème Ruby on Rails,
et affiche aussi un parcours remarquable dans l’écosystème RN. C’est une entreprise impressionnante.