Retour aux articles
  • 05.02.2021

Développement mobile 2021 : React Native vs Flutter

Développement mobile 2021 : React Native vs Flutter

React Native et Flutter sont les technologies populaires pour le développement d’applications mobiles multiplateformes.

Contrairement à une approche de développement mobile native, ces frameworks permettent la création d'une base de code unique qui fonctionne à la fois pour iOS et Android. Ainsi, comme il y a moins d’écriture de code nécessaire, les applications peuvent être lancées plus rapidement et avec un budget plus restreint. 

Dans cet article nous examinons les forces et les faiblesses de Flutter et de React Native. 

 

Qu'est-ce que le Flutter ?

Flutter est un framework open-source de développement mobile multiplateforme créé par Google et qui utilise le langage Dart. Sa première version a été publiée en mai 2017, elle est donc un peu plus récente que React Native.

Quelques caractéristiques de Flutter :

  • Dart est un langage de programmation rapide et orienté objet, qui est relativement nouveau et facile à apprendre, en particulier pour les développeurs expérimentés plus familiers avec Java et C#.
  • L'architecture est basée sur la très populaire programmation réactive (elle suit le même style que React)
  • Elle fournit ses propres widgets, tirés de son propre moteur de rendu haute performance

Qu'est-ce que le React Native ?

React Native est un framework javascript basé sur la bibliothèque React, tous deux créés par Facebook, et il permet de développer des applications iOS et Android avec une seule base de code. 

Les avantages et les inconvénients de Flutter

Flutter : Hot Reload = Rapidité

Flutter offre un développement d'applications plus dynamique et plus rapide. 

Les développeurs peuvent apporter des modifications à la base de code à la volée, et voir les modifications immédiatement reflétées dans l'application. C'est ce qu'on appelle la fonction de rechargement à chaud. 

Flutter : Une seule base de code

Avec Flutter, les développeurs peuvent écrire une seule base de code pour les plateformes iOS et Android.

Google travaille actuellement sur Flutter for Web, une base de code unique qui couvrira Android, iOS et les plateformes web.

Flutter : Jusqu'à 50 % de tests en moins

Étant donné que l’application reste la même peu importe la plateforme, les mêmes tests peuvent être créés et exécutés.

Flutter : Des applications plus rapides

Les applications en Flutter fonctionnent de manière fluide et rapide, car Flutter utilise la bibliothèque graphique Skia. Grâce à celle-ci, l'interface utilisateur est redessinée à chaque fois qu'une vue change.

La plupart du travail est effectué sur le GPU, c'est pourquoi l'interface utilisateur de Flutter est fluide et fournit 60 images/seconde.

Cependant, attention à ne pas provoquer de redessin des éléments de la vue dont les données n'ont pas changé, cela peut affecter les performances et la vitesse de l'application.

Flutter : Design user friendly

Flutter ne repose pas sur des composants de système natif, mais possède plutôt son propre ensemble de widgets personnalisés, rendus et gérés par le moteur graphique du framework. 

Les applications en Flutter ont une interface utilisateur particulièrement conviviale : un avantage crucial pour Flutter par rapport à React Native. Flutter a été créé afin de faciliter la création et la personnalisation de widgets. 

Flutter : Parfait pour les MVP

Si vous devez créer un MVP (Minimum Viable Product) pour votre application, Flutter est l'option parfaite.

Flutter : Taille de la communauté de développeurs 

L’un des principaux avantages de React Native par rapport à Flutter est sa communauté de développeurs plus établie et plus expérimentée. En outre, en termes de langages de programmation, Dart n'est pas aussi largement utilisé que JavaScript, du moins pour l'instant.

Cependant, ce n’est pas un inconvénient important, car la communauté Flutter connaît une croissance exponentielle. 

Les tendances des balises de débordement de piles montrent une augmentation intense de l'intérêt des développeurs pour Flutter

Flutter : Bibliothèques et soutien

Flutter est encore nouveau et il n’est pas toujours possible de trouver la fonctionnalité parfaite dans les bibliothèques existantes, de sorte que vos développeurs peuvent avoir besoin de créer eux-mêmes des fonctionnalités personnalisées, ce qui prend du temps.

Flutter : Soutien continu à l'intégration

Flutter n'a pas de support pour les plateformes de CI comme Travis ou Jenkins. Donc, pour obtenir une construction, un test et un déploiement automatiques, les développeurs doivent utiliser et maintenir des scripts personnalisés.

Les avantages et les inconvénients de React Native

React Native : Hot Reload = Rapidité

Hot Reload accélère le processus de développement en permettant à un développeur d'injecter un nouveau code directement dans une application en cours d'exécution. Ainsi, un développeur peut voir les changements instantanément, sans avoir à reconstruire l'application.

Hot Reload conserve également l'état de l'application, évitant ainsi le risque de la perdre lors d'un rechargement complet, ce qui accélère encore le processus de développement de l'application.

Pour améliorer l'expérience des développeurs en matière de rechargement à chaud, l'équipe React Native a inclus dans la version 0.61 une nouvelle fonctionnalité appelée "fast refresh" qui unifie le rechargement en direct et à chaud. Elle est plus résistante aux fautes de frappe et aux erreurs par rapport à la version précédente. 

React Native :  Une seule base de code

Comme pour Flutter, React Native permet l’utilisation d’une seule base de code pour alimenter les plateformes Android et iOS.

JavaScript vous donne un coup de pouce pour écrire des applications multiplateformes en partageant le code avec les applications web. 

Voici des exemples de bibliothèques qui permettent de créer simultanément du code sur des platesformes autres qu'iOS et Android :

  • React Native for Web : prend en charge Android, iOS et le web ReactXp
  • React Native Windows : développé par l'équipe Microsoft, supporte tous les appareils supportés par Windows 10 

React Native :  Utilisation de JavaScript

React Native utilise JavaScript : un langage de programmation très populaire, alors que Dart est encore peu connu et utilisé.

React Native :  Maturité relative

L'équipe de Facebook a eu tout le temps de stabiliser l'API, ainsi que de se concentrer sur la résolution des problèmes.

Aujourd'hui, ils travaillent sur quelques améliorations comme la réduction de la taille de l'application.

React Native : Une communauté active et vaste

React Native bénéficie d’une communauté de développeurs très importante. De plus, il existe d'innombrables tutoriels, bibliothèques et frameworks utilisateurs qui facilitent l'apprentissage de la technologie, ainsi qu’un développement rapide.

React Native : Jusqu'à 50 % de tests en moins

Comme pour Flutter, React Native permet de réduire d’environ 50 % ses tests automatisés car il est possible de créer et d’exécuter les mêmes tests sur les deux plateformes.

React Native : Moins de composants prêts à l'emploi

React Native ne prend en charge que les composants de base prêts à l'emploi, Il existe cependant des repos externes avec de nombreux composants supplémentaires pour React Native. 

Contrairement à Flutter qui est conçu pour supporter le Material Design out of box, donc le framework supporte beaucoup plus de widgets. 

React Native : Beaucoup de modules abandonnés

React Native possède un nombre énorme de bibliothèques. Malheureusement, un trop grand nombre d'entre elles sont de mauvaise qualité ou ont été complètement abandonnées.

React Native : Des applications plus lourdes que des applications natives

Les applications écrites en React Native doivent être capables d'exécuter du code Javascript (JavaScript Virtual Machine). Android ne dispose pas de cette fonctionnalité par défaut, ce qui signifie que les applications doivent inclure une bibliothèque qui supporte le code JavaScript, ce qui donne des applications plus volumineuses que leurs homologues natives d'Android.