React Native by Facebook et Flutter de Google sont deux technologies de développement d’applications multiplates-formes qui suscitent l’intérêt. Dans cet article, nous allons comparer les deux en détail du point de vue du développeur.

En raison de la popularité croissante des applications mobiles, presque toutes les entreprises ont besoin d’une ou plusieurs applications mobiles pour rester compétitives sur le marché. De plus, les entreprises recherchent une option pour créer des applications mobiles, en particulier pour iOS et Android, avec une vitesse plus rapide et moins de ressources. De toute évidence, Apple et Google ont fourni des outils et des technologies natifs pour créer des applications. Les développeurs d’applications iOS peuvent créer des applications à l’aide de Xcode et Swift, tandis que les développeurs Android utilisent Android Studio et Kotlin / Java. Cependant, les ingénieurs doivent apprendre deux technologies totalement différentes. En conséquence, les entreprises ont commencé à adopter des solutions multiplates-formes par rapport aux solutions natives pour créer plus rapidement des applications pour iOS et Android dans une seule langue.

Flutter vs React Native :

 

React Native est un projet lancé par Facebook en interne et qui a ouvert le code source en 2015. De l’autre côté, Flutter, un projet lancé par Google, qu’ils promeuvent depuis I / O 2017. Ces deux technologies aident les développeurs d’applications à créer les applications plus rapidement en utilisant un seul langage de programmation. React Native est déjà un outil mature et a une énorme communauté, mais Flutter a également commencé à enregistrer des taux d’adoption énormes depuis 2017. Dans cet article, nous comparerons chacun d’eux à l’aide de dix critères:

  • Langage de programmation
  • Architecture technique
  • Installation
  • Configuration et configuration du projet
  • Composants d’interface utilisateur et
  • API de développement
  • La productivité des développeurs
  • Soutien communautaire
  • Support de test
  • Construire et libérer le support d’automatisation
  • DevOps et support CI / CD

Maintenant que nous avons défini tous nos critères, commençons par explorer chacun d’eux en détail.

Langage de programmation

Le principal avantage de l’utilisation d’une technologie de développement d’applications mobiles multiplates-formes est la possibilité d’utiliser un seul langage de programmation pour développer des applications pour iOS et Android.

React Native – JavaScript

React Native utilise JavaScript pour créer des applications multiplates-formes. JavaScript est un langage très populaire dans la communauté Web en ce moment. Il est couramment utilisé avec React et d’autres frameworks JavaScript populaires. Grâce à React Native, les développeurs Web peuvent créer des applications mobiles avec un peu de formation. Dans cet esprit, les entreprises ont adopté React Native comme solution simple. JavaScript est un langage typé dynamiquement et tout peut être fait avec JavaScript, ce qui est bon et mauvais en même temps.

Flutter – Dart

Flutter utilise le langage de programmation Dart introduit par Google en 2011 et rarement utilisé par les développeurs. La syntaxe Dart est facile à comprendre pour les développeurs JavaScript ou Java car elle prend en charge la plupart des concepts orientés objet. Il est facile de se familiariser avec Dart, car une documentation excellente et facile à suivre est disponible sur le site officiel de Dart, ici.

Résultats d’analyse

Le langage JavaScript étant largement utilisé par la plupart des développeurs Web, il est facile d’adopter le framework React Native. Dart possède également de nombreuses fonctionnalités, mais il est rarement utilisé et moins connu de la communauté des développeurs. Compte tenu de cela, il est clair que React Native gagne le point dans la catégorie langage de programmation.

React Native gagne le premier point face à Flutter

Gagnant: React Native
Score: React Native vs Flutter 10

Architecture technique

Lors du choix d’un cadre de développement d’applications mobiles multiplates-formes, il est essentiel de prendre en compte son architecture technique. En connaissant les éléments internes du cadre, nous pouvons prendre une décision éclairée et choisir celle qui convient le mieux à notre projet.
React Native – Flux

L’architecture native de React s’appuie fortement sur l’architecture de l’environnement d’exécution JS, également appelée pont JavaScript. Le code JavaScript est compilé en code natif à l’exécution. React Native utilise l’architecture Flux de Facebook. Vous trouverez ici un article détaillé sur l’architecture de base de React Native. En bref, React Native utilise le pont JavaScript pour communiquer avec les modules natifs.
Flutter – Skia

Flutter utilise le framework Dart qui contient la plupart des composants intégrés. Par conséquent, sa taille est plus grande et le pont ne nécessite souvent pas de communication avec les modules natifs. Dart possède de nombreux frameworks, tels que Material Design et Cupertino, qui contiennent toutes les technologies requises pour développer des applications mobiles. Le framework Dart utilise le moteur Skia C ++ qui possède tous les protocoles, compositions et canaux. L’architecture du moteur Flutter est expliquée en détail dans le wiki de Github. En bref, Flutter a tout ce qu’il faut pour le développement d’applications dans le moteur Flutter lui-même.

Résultats d’analyse

Le moteur Flutter contient la plupart des composants natifs dans la structure elle-même et n’a pas toujours besoin d’un pont pour communiquer avec les composants natifs. React Native, cependant, utilise le pont JavaScript pour communiquer avec les modules natifs, ce qui entraîne de mauvaises performances.

Flutter égalise face à React Native

Gagnant : Flutter

Score: flutter vs react native 1 – 1 

Installation 

 

La méthode d’installation doit être simple, sans trop d’étapes compliquées, pour que les développeurs qui débutent ne puissent l’apprendre facilement.

React Native – NPM

L’infrastructure native de React peut être installée à l’aide du gestionnaire de package de nœud (NPM). L’installation de React Native est simple pour les développeurs qui possèdent un arrière-plan JavaScript, tandis que d’autres développeurs doivent connaître le gestionnaire de packages de noeud. Le gestionnaire de package de noeud peut installer les packages localement ou globalement. Les développeurs devront comprendre où se trouve exactement le binaire. Lors de l’installation de React Native sur macOS, nous devons également disposer du gestionnaire de paquets HomeBrew.

Flutter Téléchargement binaire à partir de la source

Flutter peut être installé en téléchargeant le binaire pour une plate-forme spécifique à partir de Github. Dans le cas de macOS, nous devons télécharger le fichier flutter.zip et l’ajouter en tant que variable PATH.
Flutter devrait améliorer la méthode d’installation en prenant en charge les gestionnaires de paquets tels que Homebrew, MacPorts, YUM, APT, etc., de sorte que les utilisateurs n’aient pas besoin de suivre ces étapes supplémentaires lors de l’installation.

Résultats d’analyse

Flutter et React Native n’ont pas d’installation one-liner avec des gestionnaires de packages natifs pour un système d’exploitation spécifique, mais l’installation de Flutter semble nécessiter des étapes supplémentaires pour l’ajout du binaire à PATH et son téléchargement à partir du code source, ce qui peut s’avérer utile pour les applications non JavaScript. développeurs. React Native peut être installé en utilisant simplement les gestionnaires de paquets et sans avoir à télécharger le binaire à partir de la source.

Point va à Notre célèbre candidat : React Native

Gagnant: React Native
Score: flutter vs react native 1 – 2

Mise en place et configuration projet

Le processus de configuration de la machine de développement pour utiliser le nouveau framework prend du temps. Cela nécessite beaucoup de configuration d’installation de logiciels. La technologie doit avoir une documentation appropriée pour que les utilisateurs soient opérationnels.

React Native

Le guide de démarrage du projet React Native suppose que le développeur dispose déjà de toute la configuration requise pour le développement sur iOS et Android. Il existe peu d’informations sur les outils de ligne de commande Xcode, mais elles ne seront pas suffisantes pour continuer. La documentation passe directement à la création d’un nouveau projet. Un nouveau projet React Native peut être créé et exécuté sur un simulateur iOS à l’aide des commandes suivantes:

$ react-native init MyProject
$ cd MyProject
$ react-native run-ios

Il n'y a pas de guide d'installation pour les projets Android dans le document React Native.

Flutter

Le guide de démarrage de Flutter contient des informations détaillées sur la configuration IDE et la configuration de la plate-forme pour iOS et Android. Vous pouvez lire tous les détails de la configuration requise pour l’installation de Flutter pour macOS ici. En plus de cela, Flutter dispose d’un outil CLI appelé flutter doctor qui peut guider les développeurs tout au long de la configuration. Il vérifie quels outils sont installés sur la machine locale et quels outils doivent être configurés. Une fois que la commande du docteur Flutter est satisfaite, nous pouvons continuer à créer une nouvelle application Flutter. Une page distincte explique comment configurer les éditeurs pour pouvoir utiliser Flutter. Une fois que toute la configuration est terminée, nous pouvons créer et exécuter une nouvelle application Flutter à partir de la CLI:

$ flutter create MyProject
$ cd MyProject
$ flutter run

A ce stade, vous devriez avoir toute la configuration et la configuration du projet Flutter.

Résultats d’analyse

La comparaison ci-dessus montre clairement que Flutter offre une meilleure documentation et un meilleur support CLI pour l’installation et la configuration.

Égalité

Gagnant: Flutter
Score: flutter vs react native 2 – 2

Composant d’interface utilisateur et API de développement

 

Lors du développement d’applications mobiles multiplate-formes, la prise en charge du composant natif est essentielle. Sans le support du composant natif, notre application ne se sentira pas comme une application native. Il est très important que le framework dispose d’une API pour accéder aux modules natifs sans difficulté.

React Native – Moins de composants

L’infrastructure principale de React Native fournit uniquement des API de rendu d’interface utilisateur et d’accès aux périphériques. Pour pouvoir accéder à la plupart des modules natifs, React Native doit s’appuyer sur des bibliothèques tierces. React Native dépend trop des bibliothèques tierces.

Flutter – riche en composants

La structure Flutter est fournie avec les composants de rendu d’interface utilisateur, l’accès aux API du périphérique, la navigation, les tests, la gestion avec état et le chargement de bibliothèques. Ce riche ensemble de composants évite d’avoir à utiliser des bibliothèques tierces. Si vous obtenez le framework Flutter, cela signifie que vous aurez tout le nécessaire pour développer des applications mobiles. Flutter dispose également de widgets pour Material Design et Cupertino qui permettent aux développeurs de restituer facilement l’interface utilisateur sur les plateformes iOS et Android.

Résultats d’analyse

Flutter est riche en API de développement et en composants d’interface utilisateur, tandis que React Native dépend trop des bibliothèques tierces.

Point va à Flutter

Gagnant: Flutter
Score: flutter vs react native 3 – 2

La productivité des développeurs

La productivité des développeurs est la clé pour créer plus rapidement des applications. À cet égard, il est très important de pouvoir se concentrer sur le développement d’applications sans attente ni distraction.

React Native

Si le développeur est compétent en JavaScript, il est assez facile d’utiliser ces compétences pour le développement d’applications multiplates-formes. React Native possède une fonctionnalité de rechargement à chaud qui permet aux développeurs de gagner beaucoup de temps lors du test des modifications dans l’interface utilisateur. En termes de support IDE, les développeurs sont libres d’utiliser n’importe quel éditeur de texte ou IDE de leur choix.

Flutter

Flutter possède également une fonction de rechargement à chaud et il est très facile de commencer à utiliser l’application de démonstration. Cependant, à mesure que la complexité des applications augmente, les développeurs doivent apprendre et adopter les nouveaux concepts Flutter. De plus, Dart n’est pas un langage de programmation courant et de nombreux IDE et éditeurs de texte ne la prennent pas en charge.

Résultats d’analyse

En tant que framework mature, React Native offre un excellent support aux développeurs en termes d’IDE et de fonctionnalités de langage. Flutter est relativement nouveau à ce stade, mais le rattrapera très bientôt, alors que la communauté autour de Flutter s’agrandit.

Egalité

Gagnant: React Native
Score: flutter vs react native 3 – 3

Soutien communautaire

Dès que les développeurs commencent à s’intéresser à une technologie et à l’adopter dans leur processus de développement, ils forment une communauté pour partager des connaissances. Une communauté forte aide les développeurs à apprendre les uns des autres et à résoudre les problèmes auxquels ils sont confrontés.

React Native

React Native a été lancé en 2015 et gagne en popularité depuis. Il existe une communauté de développeurs autochtones de React sur GitHub et de nombreuses réunions et conférences à travers le monde. L’une des conférences les plus récentes sur React Native a été React Native EU, qui s’est tenue en Pologne, mais des réunions se déroulent dans presque toutes les grandes villes du monde.

Flutter

Flutter existe depuis un certain temps, mais il a suscité beaucoup d’attention lorsque Google l’a promu lors de la conférence Google I / O en 2017. La communauté Flutter se développe rapidement ces jours-ci, des réunions et des conférences se déroulant en ligne. Le plus gros jusqu’à présent était Flutter Live en 2018, où Google a annoncé la sortie de Flutter 1.0. En bref, la communauté Flutter se développe rapidement; Cependant, les développeurs ne disposent pas encore de suffisamment de ressources pour résoudre les problèmes courants.

Résultats d’analyse

La communauté et les ressources de React-Native ont pris de l’ampleur depuis le lancement du cadre. Flutter est encore relativement nouveau, bien que le soutien de la communauté augmente rapidement.

React native gagne flutter sur ce point

Gagnant: React Native
Score: flutter vs react native 3 – 4

Support de test

 

La rédaction de tests est un excellent moyen d’obtenir un retour rapide sur le code. Il existe toujours un cadre de test associé à chaque technologie mature pour permettre aux développeurs de créer des tests unitaires, d’intégration et d’interface utilisateur pour les applications.

React Native

React Native est un framework JavaScript. Quelques frameworks de test au niveau de l’unité sont disponibles en JavaScript. Des outils tels que Jest peuvent être utilisés pour les tests d’instantané. Toutefois, en ce qui concerne les tests d’intégration ou de niveau d’interface utilisateur, React Native ne fournit aucun support officiel. Il existe des outils tiers tels qu’Appium et Detox qui peuvent être utilisés pour tester les applications React Native, mais ils ne sont pas officiellement pris en charge.

Flutter

Flutter fournit un ensemble complet de fonctionnalités de test permettant de tester les applications au niveau de l’unité, du widget et de l’intégration. Flutter propose une excellente documentation sur le test des applications Flutter, vous pouvez également consulter le blog de Codemagic sur les tests des applications Flutter pour obtenir des informations détaillées sur la manière de tester les applications Flutter. Flutter dispose d’une fonctionnalité de test de widgets intéressante dans laquelle nous pouvons créer des tests de widgets pour tester l’interface utilisateur et les exécuter à la vitesse des tests unitaires.

Résultats d’analyse

La communauté autochtone de React n’a aucun support officiel pour l’intégration et les tests de niveau d’interface utilisateur, tandis que Flutter dispose d’une excellente documentation et d’un ensemble complet de fonctionnalités de test.

Un bras de fer infini

Gagnant: React Native
Score: flutter vs react native 44

Construire et libérer le support d’automatisation

La publication d’applications mobiles sur l’App Store ou le Play Store est un processus pénible. Cela signifie que la tâche est complexe. The Mobile App Mobile Development Multiples, la situation devient encore plus délicate.

React Native

La documentation officielle de Réactif Natif ne doit pas être facilement déplié les applications iOS sur App Store. mais tout le processus semble manuel. Nous pouvons utiliser des outils tels que fastlane pour déployer des applications iOS et Android écrites avec React Native. Le processus d’utilisation de fastlane pour expédier les applications natives de React est décrit dans cet article. Cela signifie que la langue maternelle doit s’appuyer sur les bibliothèques pour automatiser la génération et la publication.

Flutter

Flutter une interface de ligne de commande puissante. Nous pouvons créer un fichier binaire avec l’application de la commande et en suivant les instructions fournies dans la documentation de Flutter pour la création et la publication d’applications Android et iOS. En plus de cela, Flutter est un document officiel du processus de déploiement avec fastlane.

Résultats d’analyse

Flutter dispose d’un excellent outil d’automatisation de la construction et peut être utilisé pour déployer des applications à partir de la ligne de commande. Les applications natives de Réactif ne sont pas chargés des outils de la CLI officiellement pris en charge pour l’automatisation de la construction.

Flutter a pris les devants

Gagnant: Flutter
Score: Flutter vs React Native 5 – 4

DevOps et support CI / CD

Les pratiques d’intégration continue et de livraison continue sont essentielles pour toute application, afin d’obtenir un retour continu et d’éviter de publier du code erroné.

React Native

React Native n’a aucune documentation officielle sur la configuration de CI / CD. Cependant, certains articles décrivent le CI / CD pour les applications React Native. Un article explique le processus de configuration de CI / CD pour les applications natives React avec Nevercode, un outil d’intégration et de livraison continues pour les applications natives Android, iOS, Ionic, Cordova et React.

Flutter

Flutter comprend une section sur l’intégration et les tests continus, qui inclut des liens vers des sources externes. Cependant, l’interface riche en ligne de commande de Flutter nous permet d’installer facilement CI / CD. Lors de l’événement Flutter Live, Nevercode a lancé son nouvel outil d’intégration et de distribution en continu, appelé Codemagic, qui est le premier outil CI/CD créé exclusivement pour la création d’applications Flutter. Vous pouvez trouver plus d’informations sur le processus CI/CD de Codemagic sur leur site.

Résultats d’analyse

Les applications Flutter sont faciles et faciles à configurer sur les services CI/CD en utilisant ses puissants outils CLI. React Native ne fournit aucune instruction officielle concernant les pratiques CI/CD.

Nous avons un gagnant !

Gagnant: Flutter
Score: Flutter vs React Native 6 – 4

C’était très serré, mais Flutter est le gagnant de cette compétition. React Native s’est battu jusqu’au bout mais Flutter est le champion de la course d’aujourd’hui!

Flutter vs react native : Conclusion

 

React Native et Flutter ont tous les deux des avantages et des inconvénients, mais Flutter est sorti vainqueur de ce match. Certains experts de l’industrie ont prédit que Flutter constituait l’avenir du développement d’applications mobiles. Compte tenu de la comparaison ci-dessus, il est clair que Flutter est entré très fortement dans la course au développement de plates-formes mobiles multi-plateformes. Ne prédisons pas l’avenir mais attendons !