React Native : comment s'affranchir des contraintes natives

Parmi les langages hybrides natifs, faisant la promesse d’applications mobiles plus proches des possibilités natives tout en utilisant l’hybride, le framework le plus utilisé est le React Native (voir notre petit tableau récap ci-dessous). Mais peut-on réellement capitaliser sur React Native pour s’affranchir des contraintes natives ?

Quand le langage natif évolue

• Rapide historique du langage natif

Le langage natif est le langage historique de développement des applications mobiles. Poussées par Google et Apple, à travers Java puis Kotlin pour Android et Objective-C puis Swift pour Apple, les fonctionnalités offertes par chaque plateforme se sont étoffées avec le temps, les téléphones devenant de véritables boîtes à outils. Par ailleurs, le propre du natif est son fonctionnement sur-mesure qui engendre le développement d’une application sur les deux plateformes iOS et Android pour le même projet.Les possibles du mobile ont, par conséquent, incité à la conception d’applications de plus en plus complexes entraînant une augmentation des coûts de développement. Malgré cela, et selon une étude JetBrains parue en 2020, le développement natif est toujours le plus populaire, utilisé dans les deux tiers des projets mobiles.

• Naissance et adoption de React Native

C’est en 2015 que le React Native fut officiellement lancé. Projet ambitieux de Facebook, celui-ci avait pour vocation de rendre l’expérience mobile sur Facebook meilleure. Pour cela, l’équipe de la firme américaine a travaillé au développement d’une interface capable de générer des éléments graphiques sur iOS en employant JavaScript. L'idée était si séduisante qu'un hackathon fut lancé en interne afin d'étudier la portée que cela pouvait avoir. C'est ainsi que naquit React Native.Le principe fut étendu à Android et c'est en 2015 que le framework fut rendu public et open-source. Au fur et à mesure des années, React Native a gagné en popularité pour devenir la solution la plus employée, par 42% des développeurs multiplateforme, contre 39% par Flutter (solution de Google).

Les pré-requis du React Native

• Dois-je maîtriser une technologie particulière pour l'utiliser?

React Native utilise le langage Javascript, incontournable en développement web. Cela explique en grande partie la célébrité de ce framework auprès de la communauté des développeurs et sa rapide adoption. En effet, il donne accès aux plateformes mobiles aux très nombreux développeurs maîtrisant déjà le JavaScript.Les compétences requises pour utiliser React Native sont en vérité plus complexes, nous le verrons dans la suite de cet article.

• Dois-je maîtriser les langages natifs ?

Une application React Native interprète du code JavaScript pour interagir avec des composants natifs, utilisant alors les APIs spécifiques à chaque plateforme. Un bouton simple, déclaré sous React Native, adoptera alors le design natif d'Android ou d'iOS. Officiellement, pas besoin de connaître les langages natifs pour développer en React, sauf qu’en pratique, on utilise plusieurs éléments du natif. Une connaissance du natif est donc amplement préférable. Elle devient indispensable s’il y a besoin de développements particuliers non couverts par le framework.

source : https://formidable.com/blog/2019/lean-core-part-4/

Intérêt du React Native pour vos développements mobiles

• Une base de code commune

L’intérêt principal de ce framework réside donc dans cette base commune de code, dans un seul langage. Cela signifie que les compétences requises des développeurs participant à un projet en React Native sont similaires et l'intégration de nouveaux développeurs ou la passation du projet à une nouvelle équipe sont facilitées. Le coût du développement et de maintenance s’en trouvent donc réduits. Pour des projets qui nécessitent de fortes interactions avec les API natives, cette règle n’est plus valable car ces parties natives doivent également être maintenues.

• Une réelle indépendance aux plateformes natives?

Même si la promesse est belle, il faut rester vigilant pour ne pas percevoir React Native comme un outil permettant de s’affranchir complètement de toutes les contraintes imposées par les plateformes natives. C’est en réalité plus complexe, React Native reprend aussi les contraintes de chaque plateforme (iOS et Android). En effet, pour toute fonctionnalité qu’un développeur désire employer, il faudra prendre en compte les particularités de chaque plateforme. En outre, certaines fonctionnalités sont disponibles sur une plateforme et pas sur une autre, obligeant à afficher ou dissimuler une fonction de l’application ou un parcours utilisateur en fonction de la plateforme (Sign in with Apple par exemple).

• Est-il possible de s’affranchir des librairies tierces?

React Native permet donc la production d’une base commune de code avec des divergences de code sur chaque plateforme. De fait, React Native ne fait que “traduire” le code JavaScript afin de le faire interagir avec les fonctions natives. Lorsqu’on développe une application mobile en React Native (avec un simple bouton par exemple), le code javascript est compilé et intégré dans l'application. Ce code s'exécute lorsqu'on ouvre l'application (au runtime) et permet l'affichage de l'interface en utilisant les éléments natifs (par exemple un simple bouton natif).Parallèlement, les possibilités de développement de chaque plateforme étant très vastes, React Native n'offre pas une couverture totalement complète de leurs fonctionnalités, nécessitant alors de faire appel à des librairies tierces. En effet, le SDK fournit les briques de base pour permettre au système de fonctionner mais ne couvre pas certains besoins beaucoup plus spécifiques, comme les graphiques, par exemple, ou l'accès aux fonctionnalités du téléphone.De manière générale, l’utilisation de librairies tierces est incontournable, tant pour l’affichage d'éléments graphiques particuliers (des graphiques de statistiques par exemple) que pour faciliter certains calculs (manipulations de dates par exemple). Ce sont des développeurs tiers qui créent ces librairies, que ce soit en open source ou non. Un projet en React Native aura donc un nombre de dépendances bien plus élevé qu’un projet natif, car elles sont nécessaires pour répondre aux besoins fonctionnels non couverts par défaut par le framework .Développer une librairie pour React Native implique la rédaction de code natif pour chaque plateforme. Ce qui signifie que l’auteur doit maîtriser JavaScript, mais aussi les frameworks Android et iOS. Ce qui, dans les faits, est rarement le cas, obligeant à maintenir ou corriger certaines parties d’une librairie lorsqu’elle est intégrée dans un projet.Par ailleurs, l’utilisation d’une telle librairie dans un projet en React Native engendre une dépendance aux développeurs tiers pour maintenir celle-ci. Il est donc important de comprendre le code natif pour choisir la bonne librairie et bien maîtriser le développement de l’application. À noter que les projets simples n’utilisent pas ou peu de librairies.React Native est donc une étape intéressante de la démocratisation du développement mobile en y invitant l’immense communauté des développeurs maîtrisant JavaScript. La base commune de code peut également permettre de réduire les coûts de développement et facilite la passation entre développeurs.Néanmoins, il est important de garder en mémoire que sous tout développement React Native sommeille du développement natif : le code que l’on produit et dont on dispose à l’issue du projet dépend des développeurs natifs, de leurs compétences mais aussi de leur capacité à corriger et mettre à jour les librairies que nous employons.Cependant, la bonne nouvelle côté utilisateur est que la qualité des applications produites avec ces technologies ne permet pas à un utilisateur de voir une différence notable avec une application développée en natif, comme l’application Instagram ou encore Uber Eats.Quelques exemples d'applications développées par Beapp : 

• Camping Car Park et son app à destination des campings-caristes
• La Manufacture Française du Cycle et son app Nakamura pour son vélo connecté du même nom
• Queeny et son application de défi vélo en entreprise

Vous vous interrogez pour votre projet d’application mobile ou la refonte de celle-ci ?Sources de cet article :

• https://customerthink.com/the-battle-of-react-native-vs-native-has-outgrown-since-the-day-making-your-over-react-native-application-development-is-an-advantage/
• https://www.netguru.com/what-is-react-native