React Native vs Flutter : Quelle plateforme pour le développement de mon application mobile ?

Vincent Barbier Non classé 10 mars 2019 | 0

Le fait de disposer de plusieurs plates-formes pour lesquelles différentes applications doivent être développées pose problème depuis un certain temps. En plus de devoir maintenir deux équipes, une pour Android et une pour iOS, il y a toujours un écart entre les applications développées car elles sont créées par des équipes totalement différentes. C’est ce qui a donné naissance à l’idée de créer des applications mobiles multi-platesformes.

React Native et Flutter : Les deux sont conçus pour le développement d’applications multi-plateformes:

React Native et Flutter offrent tous deux des performances supérieures, rapides et de grande qualité pour les applications sur plusieurs plates-formes, notamment Android, iOS

La technologie	React Natif	Flutter
Langage de programmation	Javascript	Dart
Bibliothèque de composants	Plus petit, non inclus	Très grande bibliothèque inclusive
Composants adaptatifs	Certains sont adaptatifs automatiquement	Les composants ne sont pas adaptatifs. Doit être configuré manuellement.
Courbe d’apprentissage	Facile à utiliser, surtout si vous avez déjà utilisé React ou Javascript	Assez rapide, vous devez prendre Dart, et la programmation réactive n’est pas tout à fait intuitive
Créé par	Facebook	Google
Architecture principale	Flux et Redux	Bloc
EcoSystem	Assez mature, utilisé dans la production de nombreuses grandes entreprises du monde entier, de nombreux packages sont disponibles	Pas encore mature, moins de paquets
Rechargement à chaud	Prise en charge	Prise en charge
Github Stars	68 690	37 200
Première sortie	Jan 2015	Mai 2017

Je parle de mon projet avec un Expert

Open-Source, gratuit et rapide:

React Native et Flutter sont des SDK gratuits et à code source ouvert qui permettent aux développeurs de créer des applications étonnantes rapidement grâce à leurs performances natives.

Documentation mise à jour et détaillée:

Les communautés de ces deux environnements déploient des efforts supplémentaires pour maintenir la documentation à jour avec des références d’API et des ressources complètes.

Excellent support d’interface utilisateur et expérience native:

React Native utilise des éléments de construction d’interface utilisateur fondamentaux que vous utilisez dans Android / iOS pour offrir une expérience native. Flutter utilise également des widgets riches pour offrir une expérience native remarquable sur les plateformes Android et iOS.

Rechargement à chaud et modifications rapides:

React Native prend en charge le «rechargement à chaud» qui permet d’exécuter simultanément un nouveau code et de conserver l’état de l’application, au lieu de la recompiler. Cela rend le développement plus rapide, instantané et efficace.

Flutter n’est pas en reste. En introduisant le «Stateful Hot Reloading», comme expliqué ci-dessus, Flutter permet une réflexion immédiate des modifications sans redémarrage ou en cas de perte de l’état de l’application.

Maintenant, nous nous sommes familiarisés avec les similitudes, nous allons de l’avant avec les différences de processus, de flux et de fonctionnalités.

Flutter

Flutter est un framework de développement mobile multi-plateformes réactif utilisant le langage Dart. Dart and Flutter ont été créés par Google qui utilise le framework pour certaines de ses applications les plus importantes et le pousse constamment à devenir la solution ultime pour la création d’applications multiplates-formes. Sa version alpha initiale était de retour en mai 2017, elle est donc beaucoup plus jeune que React Native.

React Native

React Native est peut-être le champion mondial du développement mobile multiplateforme. React Native est un framework javascript basé sur la bibliothèque React, tous deux créés par Facebook, qui vous permet d’expédier des applications IOS et Android avec une seule base de code. Il est principalement utilisé par Facebook, Instagram, Airbnb et bien d’autres. React Native a débuté en tant que projet de hackathon interne sur Facebook en 2013 et a été rendu public en 2015.

Développement

React Native utilise le composant, mais au lieu d’utiliser les composants Web que vous avez sur le Web, tels que Div et H1, vous utilisez l’ensemble des composants fournis par la bibliothèque react-native pour le développement mobile. React Native utilise également un DOM virtuel, mais pas pour manipuler un DOM car il n’y en a pas, mais il est utilisé pour communiquer avec des éléments d’interface utilisateur natifs.

Le nombre de widgets fournis par React-Native n’est pas aussi important que celui de Flutter, mais il est plutôt inclusif. En outre, certains de ces composants sont adaptatifs. Ils peuvent ainsi déterminer la plate-forme sur laquelle ils sont exécutés, qu’ils soient sous IOS ou Android, et rendre le résultat. compositions appropriées pour cette plate-forme.

Il est également très facile de démarrer avec React Native. Vous pouvez commencer en installant le paquetage create-react-native-app avec npm install, puis en l’utilisant pour créer une nouvelle application React Native. Le développement avec React Native présente un avantage intéressant, à savoir que create create native fournit une intégration Expo. Expo vous permet d’exécuter votre code sur votre appareil mobile sans avoir à le brancher, en scannant simplement un code QR qui apparaît sur la console.

Écosystème

React Native est présent depuis longtemps. Il est donc pris en charge par la plupart des éditeurs, sinon tous, que vous souhaitez utiliser. Il prend également en charge le rechargement à chaud. En ce qui concerne les paquets, React Native est le grand gagnant, avec plus de cinq fois le nombre de paquets disponibles pour le flutter, par nature depuis plus de trois ans. C’est un cadre mature maintenant et beaucoup plus stable que le flutter.

Documentation

La documentation de React Native est plutôt bonne et plus conviviale: elle explique ce que sont les accessoires, ce qu’ils représentent et comment les utiliser. La documentation officielle comprend également des guides et des rubriques courantes sur le développement multiplate-forme avec React Native, telles que la procédure d’installation et d’utilisation de modules natifs ou la création de composants spécifiques à une plate-forme.

Performance

L’approche de React Native est différente de celle de Flutter. Toute l’application n’est pas compilée en C / C ++ ou dans un langage natif, mais les composants de l’interface utilisateur sont compilés en leurs équivalents natifs, et le JS s’exécute dans un thread séparé et communique avec les modules natifs pour toute action requise via un pont. Cela permet à React Native d’être beaucoup plus rapide et plus performant que les solutions hybrides telles que Ionic / Cordova, mais le place dans une position difficile par rapport à Flutter qui se rapproche un peu plus des applications natives.

Bien sûr, il est assez délicat d’avoir un vainqueur définitif dans le jeu de performance, car de nombreux facteurs entrent en jeu, comme le périphérique sur lequel l’application est exécutée, et pour certaines personnes, React Native surpasse Flutter, bien qu’en règle générale, flutter devrait avoir la main.

L’équipe de développement a évalué l’application Facebook Events réalisée avec React Native pour en savoir plus sur les performances de React Native. Vous remarquerez que pour toutes les tâches effectuées, initialiser Javascript et requérir les modules est la tâche la plus fastidieuse. Il existe de nombreux domaines d’optimisation permettant à React Native d’augmenter ses performances, tels que le chargement de modules natifs paresseux et la lecture incrémentielle de cache, de sorte que ce n’est pas aussi grave que vous pourriez le penser.

Architecture

Il existe deux modèles principaux dans la construction d’applications natives React / React, à savoir Flux et Redux. Flux est celui créé par les créateurs du framework, Facebook, tandis que Redux est l’option la plus populaire de la communauté. Ces frameworks concernent le flux de données unidirectionnel et le stockage de l’état de votre application dans un emplacement central appelé Store, et rendent les composants de votre application aussi apatrides que possible. Vous pouvez également utiliser l’API de contexte, qui est une nouvelle fonctionnalité de React pour gérer l’état.