React-Native vs Flutter
Le développement d’applications mobiles a toujours été un pilier fondamental de l’industrie des techniques, cependant disposé de plusieurs plateformes, Java pour Android et Objective-C pour iOS pose toujours problème depuis un certain temps. En plus de devoir disposer de deux équipes, une pour Android et l’autre pour iOS, il aura toujours un écart entre les applications développées car elles sont créées par deux équipes totalement différentes. Ce constat a donné naissance à l’idée de créer des applications mobiles multiplate-forme. Aujourd’hui, nombreuses sont les solutions qui existent et qui proposent le développement multiplate-forme à partir d’une seule et même base de code, parmi les plus populaires actuellement, nous avons react native de Facebook et Futter de google, les deux plateformes proposent un système qui permet de créer des applications compilées offrant les performances qui sont plus proches de celle des applications réelles natives. Alors quelles sont les forces et les faiblesses de Flutter et de React Native ?
FLUTTER
Flutter est un framework de développement d’applications mobile cross-plateforme réactif utilisant le langage dart. Dart et Flutter ont été créés par Google qui utilise le framework pour certaines de ces applications les plus importantes et le pousse constamment à devenir la solution ultime pour la création d’applications multiplate-forme. Sa toute première version a vu le jour en mai 2017, elle est donc beaucoup plus jeune que react Native.
Programmation réactive avec Flutter
Flutter est un framework réactif, qu’est-ce que cela signifie ? C’est quoi la programmation réactive et pour quelle raison elle est puissante et utile, en particulier dans le cadre du développement d’applications. Supposons que vous souhaitiez envoyer une demande à un serveur et que vous fassiez quelque chose en fonction de la réponse. Si vous agissez avant que la réponse ne soit renvoyée, vous entreprendrez une action qui entraînera une erreur. La situation devient critique si vos données arrivent de manière asynchrone et qu’il ne s’agit pas d’une demande envoyée, mais d’un flux de clics utilisateur par exemple, et de nombreuses parties de votre programme doivent répondre aux données entrantes.
Ce problème a donné naissance à un paradigme de la programmation appelé programmation réactive, qui est au cœur du langage Dart.
Développement
Le bloc de construction principale d’une application Flutter est un widget. Les widgets sont l’équivalent des composants dans React Native. Flutter est livré avec un grand nombre de widgets prêts à l’emploi. Il existe deux types de widgets, les widgets sans état et les widgets avec état, tout comme les composants de classe et les composants fonctionnels dans React. Malheureusement, les widgets de Flutter ne sont pas adaptatifs, vous devez donc effectuer manuellement l’adaptation spécifique à la plate-forme. Il est assez facile de démarrer avec Flutter. Tout ce que vous avez à faire est de télécharger le package Flutter, de le décompresser, puis de créer une variable d’environnement pointant vers un dossier situé à l’intérieur du dossier décompressé. Et vous seriez prêt à commencer, cependant, vous devrez peut-être télécharger Android Studio, configurer et émuler si vous ne souhaitez pas utiliser votre téléphone. Flutter prend en charge la fonctionnalité Hot Reload, qui vous permet de ré-exécuter votre application avec les ajustements que vous apportez pendant le développement et d’accélérer le développement. Flutter est officiellement pris en charge sur Android Studio, IntelliJ Idea et Visual Studio Code.
Écosystème
Flutter est certainement derrière React Native en ce qui concerne l’écosystème, car React Native existait déjà depuis deux ans avant la sortie de Flutter et est déjà bien établi avec des tonnes de paquets. Cependant, Flutter est en train de rattraper son retard, et de nombreux packages de base pour le développement mobile sont disponibles pour un usage public et l’écosystème de Flutter est en train de prendre un élan fou avec le dévouement de la communauté. À l’heure actuelle, il y a plus de 1450 paquets disponibles pour Flutter sur le site officiel dartlang.org.
Performance
En matière de performances, l’approche de Flutter est assez différente de celle de React Native. L’application Flutter est compilée à l’aide de la bibliothèque Arm C./C++ ce qui la rapproche du langage machine et améliore les performances natives. Dart est un langage assez performant en lui-même, et beaucoup de gens pensent qu’en matière de performance, Flutter a l’avantage, bien qu’il soit difficile de juger de manière définitive car de nombreux facteurs sont impliqués dans la performance.
Documentation
La documentation de Flutter est incroyablement bonne. La documentation est très utile et très complète. Il peut être un peu difficile à lire si vous n’avez aucune expérience en programmation, mais une fois que vous vous y serez habitué, vous trouverez à peu près tout ce dont vous avez besoin, écrit dans la documentation.
Architecture
Flutter est très jeune, ce qui rend tout le monde incertain de la meilleure architecture à implémenter pour votre application. Cependant, il existe quelques architectures populaires dans la communauté Flutter.
Vous pouvez utiliser l’architecture BloC, qui correspond à business Logic component. L’architecture a été décrite par Google dans Dart Conf2018 et indique que la logique applicative doit être extraite de la couche de présentation et placée dans les composants de la logique applicative. Le modèle bloc s’appuie fortement sur les flux et Rx Dart (réactive Dart), un bon outil pour mieux comprendre les flux et Rx Marbles .
Par exemple, il existe d’autres architectures dans Flutter. Par exemple, si vous êtes plus à l’aise avec Redux / Flux, vous pouvez utiliser ces modèles à la place, et des packages dans Flutter rendent cela possible. Pour les petites applications et l’essai de la structure, il suffit de stocker l’état à l’intérieur des composants.
React Native
React Native est surement 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 de créer 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 d’hackathon interne sur Facebook en 2013 et a été rendu public en 2015.
Développement
React Native utilise le principe de composant, mais au lieu d’utiliser les composants Web que vous avez l’habitude de voir 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 utilisateurs 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 approprié 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-react native app 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. 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. 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 composants, 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 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 est un peu plus proche 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.
Architecture
Il existe deux modèles principaux dans la construction d’applications natives 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 possibles.
Conclusion : React-Native vs Flutter
