J’ai développé la même appli avec Flutter, React Native et Ionic

• En cherchant le meilleur framework mobile cross-platform, Flutter, React Native et Ionic ont retenu mon attention
• Ces trois frameworks promettent de bonnes performances sur plusieurs plateformes à partir d’une base de code unique
• J’ai créé trois versions d’une application mobile qui affiche des données de base via une API afin de les comparer
  • Exigences de l’application : afficher les informations d’un pays au chargement de l’écran, montrer un spinner de chargement, proposer un bouton pour récupérer un nouveau pays aléatoire, et ne récupérer la liste des pays qu’une seule fois

Flutter

• Flutter est un framework open source créé par Google en 2017, qui permet de créer des applications natives pour plusieurs plateformes à partir d’une base de code unique. Il est basé sur le langage Dart
• J’ai commencé le développement après une heure d’apprentissage de la documentation et des tutoriels Flutter
• La configuration de l’environnement de développement et le lancement de l’émulateur se sont déroulés sans accroc
• J’ai réalisé une application avec les fonctionnalités de base en 4 heures
• Les suggestions d’Android Studio ont beaucoup aidé au développement
• La fonctionnalité Hot Reload permet de voir immédiatement les changements, ce qui raccourcit le temps de développement
• En revanche, le concept selon lequel « tout est widget » entraîne beaucoup d’imbrication, avec un mélange de styles et d’éléments qui n’est pas très intuitif

React Native

• Il s’agit d’un framework JavaScript open source créé par Meta en 2015, qui permet de construire des applications natives Android et iOS
• J’avais déjà de l’expérience avec la bibliothèque React, et VS Code était déjà installé
• Le processus de configuration de l’environnement de développement était complexe et déroutant (il fallait comprendre la différence entre Expo Go et React Native CLI)
• J’ai terminé l’application en 2,5 heures, mais j’ai eu des difficultés à résoudre les problèmes d’affichage des images
• Grâce à l’architecture orientée composants de React, le code est concis et modulaire
• Avec JSX, on peut écrire l’UI des composants dans un code proche du HTML

Ionic

• Ionic est un toolkit UI mobile open source créé en 2012, qui permet de construire des applications mobiles cross-platform modernes et de haute qualité à partir d’une base de code unique
• Il permet de développer avec React, Vue et Angular
• Il propose de riches composants UI et une interface utilisateur attrayante
• J’ai commencé le développement après 30 minutes passées à consulter des vidéos et des guides Ionic
• J’ai développé l’application avec la version Angular, et j’ai pu avancer rapidement grâce à un écosystème de développement familier
• Les nombreux fichiers de configuration JSON et TypeScript générés lors de la configuration initiale étaient un peu pesants
• J’ai terminé l’application en 2 heures
• L’implémentation de l’UI était simple et la documentation est de qualité
• Les templates HTML permettent de séparer l’UI et la logique
• Les composants UI comme Spinner et Floating Action Button facilitent la mise en œuvre de l’UI

Comparaison : Flutter, React Native, Ionic

• Style de code et langage
  • Les frameworks basés sur JavaScript ont l’avantage en matière de lisibilité et de simplicité du code
  • Le style de code imbriqué de Flutter est quelque peu déroutant et difficile à lire
  • La préférence entre les templates React et Angular dépend des goûts personnels
• Écosystème
  • En avril 2024, parmi les 500 applications les plus installées aux États-Unis, 12,57 % ont été réalisées avec React Native, 5,24 % avec Flutter et 0,52 % avec Ionic
  • React Native offre une grande liberté, mais cela peut rendre la configuration et l’usage des outils déroutants
  • L’adoption de Flutter est en hausse, et le nombre de dépôts publics GitHub est élevé
• Outils
  • Hot Reload
    • Dans le navigateur, les trois frameworks rechargent rapidement l’application lors des changements de code
    • Sur appareil Android ou simulateur, le Hot Reload de Flutter est le plus rapide
  • Débogage à distance
    • Flutter DevTools est intuitif et propose de nombreuses fonctionnalités
    • Ionic facilite le débogage grâce à une interface proche de Chrome Developer Tools
    • React Native propose React DevTools, mais reste en retrait par rapport à Flutter et Ionic en matière de débogage à distance
• Taille de l’application
  • Ionic : 3.2MB, Flutter : 18.1MB, React Native : 25.2MB
  • Après installation, l’espace occupé est respectivement de 9.61MB, 34.66MB et 55.47MB
• Expérience utilisateur
  • Flutter et Ionic fournissent des composants UI adaptés à la plateforme, garantissant une expérience utilisateur cohérente
  • React Native doit s’appuyer sur des bibliothèques supplémentaires
• Performances
  • Flutter, compilé en code natif, devrait être plus rapide que React Native
  • Ionic s’exécutant dans une webview, ses performances peuvent être un peu plus lentes

Conclusion

• J’ai envie d’approfondir le style de code de Flutter, et sa fonctionnalité Hot Reload, capable de changer la donne pour le débogage, est séduisante
• Malgré cela, je suis davantage attiré par Ionic, qui permet de réutiliser les connaissances existantes en développement web (TypeScript, HTML, CSS) pour le développement d’applications mobiles
• Je pense que développer mes compétences sur Ionic renforcera mes capacités de développeur mobile et web
• À mesure que le projet évoluera, l’organisation du code, la séparation des responsabilités et la réutilisabilité des composants deviendront plus claires
• Il est possible de construire une excellente application avec n’importe lequel de ces trois frameworks
  • Il ne faut pas négliger le plaisir de développer au moment de choisir un framework
  • Je recommande d’explorer différents frameworks en développant une application expérimentale

[firea32]

C’est la seule bibliothèque cross-platform qui utilise une UI native, donc difficile d’y renoncer…
S’il y avait une alternative, j’aurais envie de changer immédiatement, mais vu que dans l’article, ni Flutter ni Ionic n’ont choisi une UI native, on dirait qu’il n’y a pas d’avenir.

[bus710]

Dans mon cas, j’ai apprécié Flutter, car il permet de tout faire en Dart sans avoir besoin de connaître le HTML/CSS.

[superwoou]

En général, ceux qui ont fait du web trouvent que RN est plus pratique, et ceux qui n’en ont pas fait disent que Flutter est plus confortable.

[optid77]

Comme le cross-platform reste malgré tout assez marginal, le développement des bibliothèques associées est souvent tardif ou insuffisant.
React Native semble avoir pour point fort le fait de partager une partie de l’écosystème React.

J’ai le souvenir qu’en développant récemment avec RN, par rapport à il y a 2 ans, la productivité avait nettement augmenté grâce à l’utilisation de bibliothèques très actives et largement utilisées dans l’univers React, comme tailwind, ReactQuery ou TRPC.

[kaistj]

D’après mon expérience personnelle, les points importants dans le développement d’applications étaient la gestion d’état et l’UI.

Pour RN, j’utilisais Redux + Redux-saga pour la gestion globale, et React-query pour chaque page.
Pour Flutter, j’utilisais Riverpod.

Personnellement, j’ai trouvé la gestion d’état côté React ainsi que l’organisation de la logique un peu plus faciles à comprendre,
et aussi plus simples à développer. Le fait que ce soit une plateforme basée sur le web rendait aussi le développement un peu plus facile.

Avec Flutter, personnellement, Riverpod ne m’a pas paru facile à appréhender. (Je n’y ai peut-être pas consacré assez de temps non plus.)
La gestion d’état simple ne posait pas de grosse difficulté, mais peut-être à cause de ma compréhension de la plateforme,
j’ai trouvé qu’il y avait une certaine complexité, voire une difficulté, dans le traitement des changements d’état ainsi que dans les traitements communs après les appels à l’API serveur.

Côté UI, les widgets de Flutter avaient des propriétés et des fonctionnalités bien définies, donc le développement était fluide.
Pour React, j’ai utilisé la bibliothèque UI antd, et l’expérience d’utilisation n’était pas mauvaise.

Mon expérience de développement avec React remonte à il y a deux ans, donc elle concerne des bibliothèques de développement un peu anciennes,
alors que j’ai développé avec Flutter récemment, mais en y consacrant peu de temps.

Je laisse aussi mon retour d’expérience en commentaire~
Prenez-le simplement comme un « ah, donc il y a aussi cet aspect-là... »~ ^^

[xguru]

Merci ! Je pense que ça pourra aussi aider d’autres personnes.