Bien que React Native soit une technologie plutôt récente, de nombreuses applications utilisées par des millions de personnes tous les jours sont basées dessus. C’est notamment le cas de Twitter, Facebook, Uber Eats, Instagram, ou encore Discord.
Ces entreprises reconnues ont choisi d’utiliser React Native car c’est une technologie qui permet d’avoir une expérience très proche du natif tout en développant une seule et unique application. Cependant, d’autres technologies utilisent et permettent de faire quelque chose de similaire, tel que Flutter ou Xamarin.
Pourquoi, chez Sirup lab, avons-nous donc choisi de partir sur React Native ? Quel bilan peut-on tirer des projets que nous avons créés via cette technologie et comment les réussir ? C’est ce que nous allons voir ici.
Tout d’abord, React Native est un framework développé par les équipes de Facebook issu de sa version web ReactJS, et en 5 ans, il est devenu un langage plutôt mature. Cette maturité, il la doit d’abord à ReactJS, qui est l’une des technologies les plus utilisées parmi les développeurs web de nos jours.
Il la doit également aux nombreuses évolutions qu’ont connues le langage, avec des mises à jour majeures et constantes, pour le rendre plus optimisé, plus fluide mais aussi plus simple à prendre en main. Le framework impose relativement peu de spécificités et l’utiliser revient pour beaucoup à écrire du JavaScript pur en ajoutant les fonctions et widgets spécifiques de React, ainsi que le JSX, qui permet d’écrire des pseudo balises HTML dans le code.
En plus d’avoir acquis cette maturité, React Native repose sur une base communautaire relativement solide. L’un de ces exemples les plus marquants est react-native-community, qui fournit de nombreux composants aidant au développement, tel qu’un sélecteur de date, la gestion des permissions, la gestion des images vectorielles…
La communauté React Native est très active, et l’est également chez les francophones. Certains s’essayent à des défis tels que les “Can it be done in React Native ?” de William Candillon.
React Native a la particularité d’utiliser les composants propres à chaque plateforme et rend son expérience très proche de ce que peut proposer une application native. De plus, il a l’avantage de fournir deux applications avec une seule base de code, ce qui permet de réduire considérablement les coûts de développement car il n’y a plus besoin de séparer les deux équipes iOS et Android.
Cependant, ce gain de temps vient avec un inconvénient : iOS et Android ont des lignes directrices bien différentes en termes de design, ce qui implique de devoir faire quelques concessions. En effet, certains éléments se retrouvent seulement sur l’une ou l’autre des plateformes, tel que les menus sandwichs d’Android, ce qui pourrait donner une expérience utilisateur amoindrie pour un utilisateur iOS.
React Native possède également des avantages d’un point de vue UI. Sa structure repose sur Flexbox, déjà très populaire sur le web et qui s’intègre relativement bien aux outils de design les plus populaires tels que Figma ou Adobe XD. Sa simplicité d’application et son intégration lui permettent de rivaliser avec des technologies natives similaires telles que Compose d’Android ou swiftUI côté iOS.
React Native ne fournit cependant pas les mêmes capacités de développement que le natif pour réaliser des UI ou animations complexes, mais il excelle cependant dans la réalisation d’applications simples et intuitives.
Flutter est un concurrent direct de React Native, qui permet lui aussi de développer une application mobile cross-platform avec une unique base de code. Ce framework, créé par Google, est écrit en Dart, qui est le langage uniquement utilisé pour Flutter.
Google envisagerait de remplacer un jour Android par un nouvel OS, Fushia, qui serait intégralement écrit en Dart, mais pour le moment il reste plutôt réservé à Flutter.
Les deux langages cross-platforms fonctionnent différemment mais donnent des performances plutôt équivalentes.
La raison qui nous a poussé vers React Native plutôt que Flutter est que ce premier est plus facilement abordable par les équipes techniques de nos clients car très proche du JavaScript classique utilisé aussi pour du Web.
Il est aussi plus mature (2015 pour React Native contre 2017 pour Flutter) rassemble une communauté nombreuse et active et nous semble donc plus pérenne que Flutter aujourd’hui.
Vous avez besoin de rendre votre application mobile disponible aussi sur le web ? React Native Web permet de transformer votre application mobile en site web responsif.
Nous l’avons testé sur des premiers projets et les résultats sont étonnants !
Si l’application n’utilise pas trop de composants propres au mobile (camera, carnet d’adresse, partage natif) l’effort d’adaptation est très faible. Avec une même base de code il est maintenant possible d’adresser tous les écrans. Cela nécessite aussi une bonne connaissance des outils de build Web (Webpack, Babel).
Côté performance : c’est fluide et rapide. Vous souhaitez voir un exemple concret ? Twitter l’utilise.
Côté SEO : à la différence de Flutter, comme nous sommes en JavaScript, il est possible de faire de l’optimisation simple. Le HTML généré est cependant complexe et non sémantique et l’optimisation sera probablement plus compliquée.
Développer une application en React Native implique de savoir comment la créer et la documentation de Facebook indique d’ailleurs que l’on peut facilement en créer une. Or, de nombreuses parties d’une application sont très similaires l’une à l’autre, comme la navigation ou la logique de traductions. C’est là qu’interviennent les boilerplates, comme Ignite.
Le principe d’un boilerplate est le même que pour un modèle PowerPoint ou InDesign : Il permet de partir d’une base de code commune afin d’arriver à accélérer le développement d’une application. Les seules paramètres variant d’une application à une autre étant son nom et les informations présentes sur les différents stores.
Une bonne pratique qui permet un gain de temps significatif est de créer son propre boilerplate. C’est ce que nous avons fait chez Sirup lab. D’abord avec une première version, plutôt dure à prendre en main, et moins propice aux évolutions. Puis, nous avons créé Mercury, qui reprend les bases communes de nos applications et qui s’étoffe au fur et à mesure avec de nouvelles fonctionnalités. L’avantage de gérer son propre boilerplate est qu’il est plus simple de le faire évoluer ou de le mettre à jour, car bien moins opaque qu’un système de boilerplate classique comme Ignite sur ses capacités et son fonctionnement.
Le cœur de l’application réside dans sa navigation. C’est elle qui définit quelle page apparaît avant l’autre, comment celles-ci sont organisées entre elles, si elles sont cachées ou non, etc… Il est donc important de bien la structurer au départ de l’application.
Une librairie permettant de gérer ces aspects sur React Native est React Navigation. Cette dernière s’adapte parfaitement aux récentes mises à jour de React Native, et notamment aux Hooks, ce qui permet entre autres d’accéder à la navigation depuis n’importe quel écran.
React Native utilise le JavaScript. C’est un langage mature de haut niveau, plutôt permissif, mais qui nécessite de faire attention aux moindres parcelles de son code afin d’éviter de potentielles erreurs. C’est pourquoi de plus en plus de projets utilisent une alternative à celui-ci : TypeScript.
TypeScript est un langage de programmation libre et open source développé par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JavaScript. C’est un sur-ensemble de JavaScript, ce qui signifie qu’un code JavaScript correct l’est également en TypeScript.
L’avantage majeur du TypeScript est donc l’ajout des différents types de variables. Il permet par exemple de définir les réponses que l’on peut recevoir d’un serveur afin de l’utiliser de manière optimale dans son code.
Chez Sirup lab, nous avons également commencé à utiliser ce langage avec notre nouveau boilerplate. Il permet un gain de temps de développement ainsi qu’une réduction drastique des bugs introduits par des erreurs de syntaxe.
Une fois que le corps de l’application est en place, la partie la plus importante est son apparence. Mais, comme pour la navigation, cette partie là peut facilement se répéter d’une application à une autre, avec une palette de couleurs, des tailles de textes similaires reprenant certains standards comme H1, H2, etc…
Avant d’utiliser React Native Paper chez Sirup lab, nous nous contentions de respecter les directives de Material Design de Google. Seulement, celles-ci sont plutôt denses, et l’on devait donc en permanence adapter nos composants aux comportements de ceux présents chez Google.
Nous avons donc intégré à notre boilerplate ce design system, qui nous permet de répliquer un même et unique thème de manière simple et intuitive dans le reste de notre application.
Développer une application mobile demande souvent une API qui permet de gérer toutes les données. Lors de nos nombreux projets, nous avons pu traiter avec un certain nombre d’API, faites pour la plupart de manières différentes. Ces API ne se ressemblent pas mais ont quelque chose en commun : elles impliquent systématiquement de devoir repenser la façon de les connecter à nos applications, et plus globalement à notre boilerplate.
Pour simplifier ceci nous avons décidé de partir sur une solution plus globale : Firebase. Ce service a pour avantage d’être très bien intégré à React Native via React Native Firebase, une librairie externe très efficace et régulièrement mise à jour. Ce service permet non seulement d’avoir une API uniformisée, mais propose également toute une suite de fonctionnalités tel que la gestion des notifications, des Analytics ou des outils de livraison continue.
Nous l’utilisons maintenant de manière systématique dans tous nos projets. Dorénavant, nous avons simplement à adapter le format des données présentes et non leurs intégrations. On acquiert également de l’expérience au fur et à mesure, ce qui nous fait gagner en rapidité sur l’ensemble de nos développements.
React Native permet donc, en développant une application pour les deux plateformes simultanément, de gagner en rapidité et en coût avec une expérience utilisateur de qualité. Néanmoins, le framework ayant beaucoup évolué, de nombreux points de friction sont apparus.
React Native permet d’utiliser des modules initialement conçus pour une plateforme native. Avant sa version 0.60, ces modules devaient être intégrés manuellement dans l’application, ce qui pouvait régulièrement s’avérer chronophage. Cela a depuis été résolu par une logique d’auto-link des paquets utilisés, mais ce n’est pas systématiquement le cas. Par exemple, les Unimodules d’Expo, un service permettant facilement de gérer des sons, des images ou de la localisation nécessite une intégration particulière, et il peut être complexe de s’en détacher une fois cette solution choisie.
Un autre problème de taille avec l’utilisation de dépendances via des paquets est que ceux-ci sont régulièrement mis à jour, avec de nombreux changements majeurs, demandant alors de retravailler leur intégration. Le risque ici peut donc être relativement élevé si l’on a peu de budget ou de temps à accorder à la maintenance de son application.
Depuis l’arrivée de React Native sur le marché du mobile, de nombreuses améliorations ont été constatées, autant du côté développement avec par exemple l’auto-link qu’au niveau performance, ou celles-ci peuvent maintenant rivaliser avec ce que proposent les langages natifs traditionnels. Par ailleurs, React Native continue ses améliorations fréquentes, à tel point que 3 voire 4 mises à jour majeures sortent par an, en apportant toutes leur lot de nouveautés.
D’un point de vue développeur, son framework en JavaScript rend son apprentissage plus simple et rapide que d’autres langages. Il est donc plus simple de trouver sur le marché des talents capables de prendre en main React Native. De plus, créer une application cross-platform sera forcément un avantage : celle-ci ne sera faite qu’une seule fois pour les deux plateformes majeures du marché, donc un coût divisé jusqu’à 2.
Vous souhaitez réaliser un nouveau produit numérique disponible sur mobile ? Vous aimeriez vous faire accompagner par des experts pour aller plus vite ? Faites appel à nous, nous proposons des offres au forfait pour réaliser la V1 de votre produit.
Si vous hésitiez, n’hésitez plus, c’est le moment ou jamais de vous lancer !
Nous envoyons une fois par mois nos nouveaux articles, tutoriaux et notre veille technologique
