React Native ou Flutter en 2023 ?

Cher Lecteur,

Aujourd’hui, nous allons supposer que vous êtes le lead developper de votre entreprise, ou mieux le CTO.

Votre entreprise vous a ordonné de développer une application mobile fonctionnant sur les plateformes iOS et Android. Parmi votre équipe d’ingénieurs logiciel, certains vous recommandent le framework React Native, tandis que d’autres ne jurent que par Flutter.

Comment choisir le meilleur framework pour créer une application mobile multi-plateforme aussi performante qu’une application native ?

Voici quelques éléments qui pourront vous aider à choisir votre framework.

React Native ou Flutter : 8 critères pour trouver le framework qui vous conviendra le plus

Cher Lecteur,

Si vous côtoyez régulièrement des programmeurs informatiques, vous savez à quel point une discussion autour d’un outil peut vite devenir une guerre de tranchées.

Sceptique ? Demandez à quelques-uns si vous devez créer votre site d’e-commerce sur-mesure ou via un CMS, en headless ou à partir d’un template… et observez le feu que vous avez allumé brûler.

Le débat React Native vs Flutter ne fait pas exception à cette règle.

Pour vous permettre de trancher, nous allons comparer les deux cadres de développement sur 8 critères :

1. Installation et configuration
2. Composants de l’interface utilisateur
3. Processus de développement
4. Architecture
5. Performance
6. Documentation
7. Communauté
8. Tests

Mais avant, présentons les deux frameworks.

Présentation générale de Flutter et React Native

Flutter, ou le développement mobile selon Google

Google Ads, Alibaba, eBay, Groupon… les applications développées via Flutter sont légion sur la toile (et dans les app stores).

Pourtant, Flutter est assez récent. Lancé en 2017 par Google, Flutter est un SDK cross-plateforme Android et iOS open-source. La popularité de Flutter auprès des codeurs s’explique par deux raisons :

• il utilise le langage de programmation orienté objet DART (qui est plus facile à utiliser que Java, mais moins que le JavaScript) ;
• il dispose d’une quantité ahurissante de widgets prêts à l’emploi (parfait pour passer rapidement du wireframe à un MVP fonctionnel).

De plus, si vous souhaitez créer un site internet responsive au design épuré, vous pourrez utiliser Flutter for web.

React Native, le framework de Meta (ex-Facebook)

Créé par Facebook en 2015, React Native est aussi un framework open-source permettant de créer des applications mobiles cross-plateformes.

Sans surprise, dans la liste des applications utilisant React Native, bon nombre sont issues de la grande famille Meta : Facebook, Instagram, WhatsApp… mais aussi Netflix, Amazon, Uber et Viber.

Côté langage de programmation, React Native vous plonge dans des codes JavaScript et de React.js. Ce qui est un grand avantage si vous ne voulez pas avoir à réapprendre de nouveaux langages de programmation à partir de zéro.

Par rapport à Flutter, React Native a vu le jour un peu plus longtemps puisqu’il a été lancé en 2015. Les principaux avantages de React Native sont de vastes bibliothèques ainsi qu’un grand nombre de guides de formation.

Installation et configuration : +1 pour React Native

Commençons par React Native.

Vous avez deux méthodes plutôt simples pour installer le framework de Facebook :

• via le Node Packet Manager (NPM) en installant directement une distribution sur votre système (n’oubliez pas de télécharger aussi Android SDK) ;
• via l’environnement de développement ExpoGo (méthode la plus facile).

Honnêtement, les deux installations sont d’une facilité déconcertante (surtout si l’on compare à celle d’Android Studio et du JDK😥). Pour plus de détails, voici des tutoriels qui vous expliquent pas à pas comment configurer React via le NPM ou via ExpoGO.

Concernant Flutter, le processus d’installation vous demandera un peu plus d’effort.

En effet, vous devrez installer :

• le JDK et l’Android SDK ;
• Android Studio (si vous voulez créer une application Android) ou Xcode pour iOS ;
• le SDK de flutter.

Voici un tutoriel qui présente l’installation de Flutter pas à pas, et c’est loin d’être simple. Preuve en est que vous devrez modifier la variable PATH de votre os, voire télécharger le code binaire de Flutter.

Notre verdict ? Si vous aimez les installations simples, optez pour React Native.

Composants de l’interface utilisateur : +1 pour flutter

Si vous souhaitez créer une application au design qui fera pousser un « wow » à vos utilisateurs, ce point est fait pour vous.

Et pour cause : en travaillant avec un webdesigner, vous obtiendrez des maquettes que vous devrez implémenter le plus fidèlement possible. L’objectif étant que le rendu final ressemble à s’y méprendre à celui d’une application native iOS ou Android.

Les composants natifs sont des composants implémentés directement par les concepteurs des plateformes (Google et Apple).

Et quand il s’agit de gérer les éléments natifs, Flutter gagne haut la main, voici pourquoi :

• Flutter est livré avec une armée de widgets prêts à l’emploi et hautement personnalisable ;
• Flutter continent des composants de rendu de l’interface utilisateur ;
• il embarque l’accès aux API du périphérique ainsi que des composants de rendu ;
• vous pouvez utiliser du code natif au sein de votre application Flutter.

Pour finir, Flutter dispose d’une foule de bibliothèques capables qui en font un véritable kit de développement logiciel complet.

De son côté, le framework React Native fournit uniquement le rendu de l’interface utilisateur et les API d’accès aux périphériques. Exit les accès intégrés aux modules natifs : vous devrez y accéder via des bibliothèques tierces.

Pour couronner le tout, React Native offre moins d’éléments graphiques que Flutter.

Processus de développement : match nul

Pour estimer le coût du développement d’un logiciel et déterminer le mode de facturation le plus adapté, mieux vaut un framework rapide.

Ici, difficile de départager les deux : ils sont équivalents.

En effet, qu’importe que vous jetiez votre dévolu sur React Native ou Flutter, vous utiliserez des modules prêts à l’emploi. En plus de leurs nombreux modules prêts à l’emploi, les deux vous offrent la fonction Hot Reload.

Elle permet aux codeurs d’introduire des changements dans le code de l’application sans avoir à la recompiler. Naturellement, le fait de pouvoir visualiser des changements à l’instant augmente l’efficacité et la vitesse de développement.

Architecture : match nul

En termes d’architecture de logiciel, Google et Facebook ont des approches radicalement différentes.

Chez Meta, le choix a été fait d’utiliser deux patterns principaux pour la conception d’application mobile : Flux et Redux. Leur particularité : stocker l’état de l’application globale dans un magasin central, rendant ainsi les composants de l’application sans état.

Côté Google, la solution la plus populaire est le BLoC (Business Logic Component), suivi de près par… le Flux et le Redux.

Maintenant, laquelle de ces architectures est la plus efficace ? Impossible à dire, à vous de trouver celle qui cadre le plus avec votre projet.

Performances : +1 pour flutter

Pour déterminer les performances – c’est-à-dire la vitesse d’exécution des codes compilés via ces frameworks – analysons les en détails.

Chez React Native, le code est écrit dans le langage JavaScript et en langage natif. Pour convertir le tout en code natif et interpréter le rendu des composants, React utilise un pont logiciel. Autrement dit, après avoir écrit votre code JavaScript, React va directement l’exécuter.

Conséquence : vous devrez attendre plus longtemps pour avoir le fichier .apk ou .ipa et vos animations seront plus lentes.

De son côté, Flutter compile l’ensemble de vos fichiers informatiques en code natif, sans avoir à passer par un pont.

Résultat : des performances de loin supérieures à celles de React et un rendu rapide.

Documentation : match nul

Cher Lecteur,

Imaginez un instant…

Après de longues heures confronté à un bug, vous vous rendez compte que le problème vient d’une fonction de votre framework.

À ce moment, vous vous ruez sur stackoverflow en quête de réponse, mais ne trouvez rien : vous devez lire la documentation.

Ici, clairement, vous serez avantagé si vous développez votre application avec le framework Flutter. Voici pourquoi :

• Flutter dispose d’une documentation exhaustive ;
• Flutter possède une variété d’outils dédiés aux développeurs ;
• Dart, le langage informatique utilisé par Flutter, est très similaire à Java, Swift et Kotlin, ce qui permet de trouver des réponses assez facilement.

De son côté, React Native possède une documentation technique moins garnie, mais à l’avantage de carburer au JavaScript. De plus, sa communauté d’utilisateurs a produit de nombreux guides – éparpillés sur le web – ce qui vous assure de trouver une réponse rapidement.

Communauté : +1 pour React Native

Parfois, dans votre quête de réponse ou de patch contre les bugs, vous aurez besoin du soutien d’autres développeurs. Vous aurez besoin de la communauté d’aficionados du framework que vous utilisez.

Bonne nouvelle : React Native et Flutter disposent tous deux d’une vaste communauté de passionnés.

Mais, en termes de nombre de membres, React Native surpasse de loin Flutter. En cause : Flutter est sorti en premier et a été plutôt bien reçu par les adeptes du développement mobile.

Test et assurance-qualité : match nul

Saviez-vous que le moindre bug peut pousser Apple à rejeter votre demande de publication sur son App store ? Mieux vaut donc vous assurer que la version build de votre app que vous soumettrez n’en comporte aucun.

L’un des avantages du développement multi-plateforme est que vous réduisez le temps alloué aux tests unitaires par deux.

React Native brille par sa gestion des tests unitaires sous JavaScript. Par contre, lorsqu’il s’agit d’automatiser et de tester l’interface utilisateur, il y a encore des progrès à faire.

Quant à Flutter, sa particularité est qu’il dispose d’excellentes options pour tester les widgets hors-ligne, et à la vitesse des tests unitaires.

React Native ou Flutter : lequel des deux choisir pour ?

Au final, devez-vous choisir React Native ou Flutter ?

Difficile à dire. Cela dépend des attentes que vous avez envers votre application hybride.

De nombreux experts s’accordent à dire que l’intérêt croissant de Flutter lui conférera le leadership. D’autres par contre soutiennent que la stabilité, la fiabilité et la très forte communauté des pro-react native continueront d’augmenter sa popularité.

Pour résumer :

• React Native utilise le JavaScript, ce qui le rend facile à prendre en main ;
• Flutter développe de nouvelles fonctionnalités plus rapidement.

Souhaitez-vous trouver le meilleur framework de développement mobile ? Contactez l’un de nos experts pour lui parler de votre projet.