Qu’est-ce que React Native ? Dans quelles situations et pour quelles raisons pourrions-nous avoir intérêt à utiliser React Native ? C’est à ces questions que nous tenterons de répondre dans cet article dédié à React Native.

Présentation de React Native 

Voici l’introduction de Sophie Alpert, manager de l’équipe Reactjs à Facebook, dans un post traitant de l’état de React Native en 2018: 

At Facebook, we’re using React Native more than ever and for many important projects. One of our most popular products is Marketplace, one of the top-level tabs in our app which is used by 800 million people each month. Since its creation in 2015, all of Marketplace has been built with React Native, including over a hundred full-screen views throughout different parts of the app.  

Si Facebook utilise React Native, Facebook en est également à l’origine. React Native naît lors d’un hackaton interne à Facebook en 2013 avec comme objectif principal d’apporter les techniques de développement du web moderne à l’environnement mobile. React Native est ensuite officiellement présenté pour la première fois par Facebook lors de la conférence Reactjs 2015. Aujourd’hui, fin 2018, React Native est un projet open-source très populaire sous licence MIT avec près de 71 000 étoiles et 1800 contributeurs sur Github. Concrètement, React Native est un framework Javascript permettant de développer des applications mobiles pour iOS et Android. Une application React Native est à différencier d’une application hybride, par exemple une application basée sur Cordova, dans la mesure où React Native n’est pas basé sur des composants web mais sur les composants natifs iOS et Android. En effet, une raison majeure à l’origine de ce projet est que les web components ne permettent pas d’offrir une expérience mobile de qualité comparable à une application native. A l’inverse, une application React Native est différente d’une application mobile par le fait que non seulement elle est écrite en Javascript mais qu’en plus c’est le code Javascript qui est exécuté lors de l’exécution de l’application : il n’y a pas de compilation de code Javascript en code natif lors de la compilation d’une application React Native.  Pour pouvoir comprendre quels avantages peut nous offrir React Native, nous devons comprendre son fonctionnement dans les grandes lignes. 

Fonctionnement de React Native

Comme son nom le laisse deviner, React Native est basé sur la librairie Reactjs. De la même façon que Reactjs maintient un DOM virtuel, et s’occupe de mettre à jour le DOM du navigateur, React Native maintient un DOM virtuel et s’occupe de mettre à jour le layout et les composants mobiles natifs de manière optimisée via les API natives fournies par la plateforme. Pour React Native l’application mobile est le pendant de ce qu’est le DOM pour Reactjs: la cible qui est mise à jour. Plus précisément lors de l’exécution d’une application React Native, il y a deux threads importants qui sont gérés par la plateforme hôte : un thread principal, le même que pour une application mobile native, qui s’occupe d’afficher l’interface graphique et de récupérer les actions de l’utilisateur et un autre thread spécifique à React Native. Ce dernier thread exécute le code Javascript dans une machine virtuelle Javascript séparée. Ces deux threads communiquent par message via un pont écrit en Java et en Objective-C++ pour Android et iOS respectivement. Le thread Javascript communique ainsi au thread natif les instructions de mise à jour du layout par lots d’instructions et de façon asynchrone, alors qu’à l’inverse le thread mobile natif envoie les évènements reçus par l’application au thread Javascript qui est responsable des traitements. Maintenant que nous avons vu comment React Native fonctionne dans les grandes lignes, intéressons-nous aux avantages et aux inconvénients qui en découlent.

Les avantages de React Native : 

  • La quasi-totalité de la base de code en Javascript ou langage compilant vers le Javascript est commune pour l’application iOS et Android. On n’a donc qu’une seule base de code à maintenir et de plus il y a une synchronisation de facto entre l’avancement de l’application iOS et l’application Android.
  • L’expérience de développement Web apportée au développement mobile. L’utilisation du Javascript réduit très sensiblement le cycle de compilation/transpilation par rapport à du Java ou de l’objective-C ce qui se traduit par un gain de temps important lors de la phase de développement.
  • Confort de développement supplémentaire grâce au Hot-Reloading qui consiste à injecter lors de l’exécution les fichiers édités de sorte à pouvoir tester les applications sans devoir les redémarrer. Au-delà d’épargner le temps de démarrage de l’application, le véritable gain est la conversation de l’état courant de l’application : on garde les données saisies, et on reste sur l’écran sur lequel on se trouvait, ce qui est pratique si cet écran est situé loin de l’écran d’accueil en termes de navigation !
  • Flexibilité d’organisation entre les équipes dédiées au développement web et au développement mobile. En effet, avec React Native, développer une application mobile devient très semblable au développement web sur de nombreux aspects : principes généraux, syntaxe et sémantique du code, environnement de développement proche de ceux du développement Web. A nuancer avec le fait que la plateforme étant différente, l’expérience utilisateur n’est pas la même et la façon de distribuer l’application change.  

Les inconvénients de React Native :

  • Du fait de l’abstraction des API natives par React Native, car c’est bien de cela qu’il s’agit, on est dépendant des mises à jour de React Native pour profiter des mises à jour des plateformes natives. 
  • React Native étant une plateforme récente et toujours dans une phase de développement actif, React Native est moins abouti que les plateformes natives. Pour preuve, React Native n’a toujours pas de version majeure à l’heure actuelle (actuellement sa version sur npm est 0.57.*). En conséquence, la dette technique d’un projet React Native grossit plus rapidement que pour un projet mobile natif car il faut prendre en compte le coût de migration vers les nouvelles versions. De plus, mettre à jour React Native peut casser la compatibilité de certaines librairies open-source dont le projet dépend. Ainsi vouloir mettre à jour React Native pour bénéficier de nouvelles fonctionnalités peut très vite devenir un casse-tête quant à la mise à jour des dépendances. 
  • Si une application React Native partage une grande partie de son code pour les cas iOS et Android, le comportement n’est pas forcément identique sur les deux plateformes, notamment au niveau du rendu visuel. Donc même si on économise du temps lors du développement, on n’en gagne pas forcément lors des tests qui doivent encore être réalisés pour les deux plateformes. Ces différences amènent aussi à l’écriture de code spécifique pour telle ou telle plateforme.
  • L’environnement technique et la chaîne de développement sont assez complexes. C’est d’abord caché par une possibilité d’utiliser une configuration par défaut mais dès que l’on cherche à s’éloigner de cette configuration par défaut, notamment lorsque l’on rencontre des problèmes dans la chaîne de compilation, on se retrouve dans un environnement complexe (webpack, metro bundler) qu’il devient nécessaire de connaître.
  • De fait du découplage entre une application React Native et la plateforme native hôte, il est peut être nécessaire d’écrire des modules en code natif si l’on veut utiliser certains services de la plateforme native hôte. En plus du code natif, il faut implémenter la communication entre le nouveau module natif et l’application React Native, ce qui engendre un surcoût par rapport à une application développée directement en code natif. Si une application doit être couplée fortement avec la plateforme hôte, alors React Native ne sera pas un choix adapté.

Les autres considérations : 

  • La performance d’une application React Native est comparable à celle d’une application mobile native pour la plupart des applications de gestion de données. D’un coté une application React Native a un surcoût du fait de l’exécution du code Javascript propre à React Native, mais d’un autre coté React Native fait des optimisations sur la façon dont les APIs natives sont appelées et donc sur la quantité de code natif exécuté. La principale limitation provient du fait que le code Javascript est exécuté par un seul thread et est responsable de l’envoi des instructions de mise à jour de l’interface graphique. Si le thread est occupé par des opérations synchrones coûteuses, il est possible de perdre des frames d’affichage. Une différence de performance notable peut apparaître pour une application qui a besoin de faire beaucoup d’opérations. A noter cependant qu’une application React Native prend beaucoup plus de temps à démarrer qu’une application mobile native. La raison étant principalement que la machine virtuelle Javascript doit être démarrée avant de pouvoir lancer l’application.
  • D’un point de vue de la qualité, une application React Native utilise les composants natifs ce qui la rend indifférenciable d’une application mobile native, ce qui n’est pas le cas des application hybrides web. React Native étant une abstraction au-dessus des API natives, il est possible d’atteindre la même qualité que pour une application mobile. La différence réside coté développement car le langage est différent et l’implémentation de l’interface graphique l’est aussi. 

Étude du cas de Airbnb 

Airbnb est l’une des premières entreprises, en dehors de Facebook, à avoir utilisé de façon très poussée React Native sur un produit utilisé par des millions d’utilisateurs. En effet, React Native Airbnb a beaucoup contribué à la librairie et plus généralement à l’écosystème ces deux dernières années. Comprendre l’expérience d’Airbnb dans les grandes lignes peut nous aider à mieux saisir les avantages et les inconvénients de l’utilisation de React Native. Airbnb a écrit une série de 5 articles relatant cette expérience dont les idées principales sont résumées ci-après. 

Pourquoi Airbnb s’est tourné vers React Native ? 

Airbnb évalue constamment les technos mobiles pour proposer une expérience utilisateur aussi bonne que possible. En 2016, Airbnb comprend à quel point son application mobile lui est importante pour sa stratégie d’expansion mais manque d’ingénieurs pour atteindre ses objectifs. Le site web de Airbnb utilise Reactjs et Reactjs est très apprécié au sein de Airbnb. Les objectifs alors identifiés sont les suivants : avancer plus rapidement, garder la même qualité que le natif, écrire le code une seule fois pour Android et iOS, améliorer l’expérience utilisateur. La particularité est que React Native sera utilisé que pour les nouveaux écrans, qui seront ensuite intégrés dans l’application existante en code natif. Il ne s’agit pas d’une refonte de l’application existante.

Les avantages identifiés par Airbnb : 

  • Similarité avec le développement Web en Reactjs, expérience de développement, réutilisation des compétences acquises sur le développement web.
  • Réutilisation du code entre iOS et Android. 
  • Performance : aucun problème notable mis à part le temps de démarrage. 

Les inconvénients identifiés par Airbnb : 

  • L’immaturité de React Native. 
  • L’absence de typage en Javascript et donc de refactoring dans la base de code. 
  • Composants open-source de qualité inégale, non totalement compatibles avec iOS et Android. 
  • La nécessité d’avoir une équipe infra dédiée pour la gestion de la plateforme React Native en elle-même et son intégration au sein du projet. 
  • Modification de l’organisation des équipes suite à l’introduction de la nouvelle technologie. 

Les principales difficultés d’Airbnb découlent de l’utilisation de React Native pour le développement de composants s’intégrant dans une application native, cela tant d’un point de vue technique qu’organisationnel. Ajouter à cela les contraintes liées à l’aspect jeune et open-source de React Native et finalement le développement natif est plus simple, en tout cas pour une application mobile telle que celle d’Airbnb. Au final Airbnb estime que le développement natif saura répondre à ses besoins sans avoir besoin de passer par React Native et renonce à son utilisation.

Conclusion 

Pour résumer, React Native est bien adapté pour les applications prototypes, développées en mode itératif. Il peut y avoir un vrai gain sur le temps de développement du fait du partage de code entre Android et iOS. Mais dès lors que l’on cherche plus d’adhérence et de prise sur la plateforme mobile hôte, les avantages s’estompent car cette adhérence passe par l’écriture de code natif faisant passer le nombre de langages de l’application de 1 à 3, soit plus que pour un développement natif iOS et Android.  D’un point de vue de plus haut niveau, React Native peut être vu comme une abstraction des API natives qui offre le choix d’un langage unique pour les deux plateformes contre une perte partielle de contrôle sur la plateforme. Sur le papier React Native offre une abstraction qui permet la programmation déclarative, un plus grand confort de développement et la réutilisation du code entre les plateformes mais en contrepartie cette abstraction doit être brisée dès lors que l’on ait besoin de récupérer le contrôle sur la plateforme, ce qui est fait à un coût important, qui contre-balance en partie les avantages de React Native par rapport au développement mobile natif.