Vous souhaitez développer des applications plus rapidement ? Vous souhaitez réduire les coûts grâce au développement multiplateforme ? Vous ne savez pas quelle technologie choisir ?
Dans cet article, nous comparons les principaux acteurs du marché. Pour vous aider à identifier le framework qui correspond le mieux à votre idée d'application, alors, Flutter ou React Native ?
Nous considérons que Flutter est La technologie d'avenir et (presque) toutes nos applications sont développées avec Flutter, l'outil de développement d'application moderne créé par Google. Toutefois, React Native, l'outil développé par Facebook est un framework ayant déjà fait ses preuves ! Ces deux outils permettent de créer tout type d'application.
Les solutions multiplateformes gagnent en popularité. Flutter et React Native sont les deux principaux acteurs du marché. Le rapport annuel 2021 de Malt, désigne Flutter comme la seconde technologie la plus croissante en termes de demandes
| Flutter | React Native | |
|---|---|---|
| Définition | Une boîte à outils d'interface utilisateur dynamique permettant de créer des applications compilées en mode natif pour tous les devices | Un cadre pour la création d'applications natives à l'aide de React |
| Créateur | ||
| Open source ? | Oui | Oui |
| Langage | Dart | Javascript |
| Popularité | 120.000 étoiles Github | 95.000 étoiles Github |
| Interface utilisateur | Les apps Flutter sont aussi belles sur les systèmes d'exploitation les plus récents que sur les anciennes versions. La compatibilité avec tout les devices est sans doute sa plus grande force. Ces app ont une seule base de code commune. Elles ont un aspect et un comportement similaires sur iOS et Android. Grâce au Material Design et aux widgets, elles peuvent aussi imiter le design natif de l'Os. En effet, Flutter contient deux ensembles de widgets qui se conforment à des langages de conception spécifiques : Les widgets Material Design mettent en œuvre le langage de conception du même nom de Google ; les widgets Cupertino imitent le design iOS d'Apple. Cela signifie que votre application Flutter aura un aspect et un comportement naturels sur chaque plateforme, en imitant leurs composants natifs. | React native utilise des composants natifs, c-a-d les composants de l'application ressemblent aux composants natifs (par exemple, un bouton sur un appareil iOS ressemble à un bouton natif iOS). Si vous souhaitez que votre application ait un aspect presque identique sur toutes les plateformes, ainsi que sur les anciennes versions d'un système d'exploitation (comme le fait Flutter), envisagez d'utiliser des bibliothèques tierces . Elles vous permettront d'utiliser des composants Material Design, à la place des composants natifs. |
| Utilisation d'un code similaire | Flutter 2 (annoncé en mars 2021), permet d'utiliser la même base de code pour envoyer des applications natives vers cinq systèmes d'exploitation : iOS, Android, Windows, macOS et Linux ; ainsi que des expériences web ciblant des navigateurs tels que Firefox, Chrome, Safari ou Edge. Flutter peut même d'être intégré (en version beta) dans les voitures, les téléviseurs et les appareils domestiques intelligents. | React Native, permet d'utiliser une même base de code pour iOS et Android (+95% de l'environnement mobile). Il existe toutefois des bibliothèques permettant d'étendre ce code à window10 et au web. Vous pouvez également extraire le code partagé dans les applications mobiles, de bureau et Web, dans un dépôt séparé, le traiter comme un projet distinct, puis l'injecter de la même manière qu'une autre dépendance. Cela permet à un développeur de se concentrer sur l'écriture du code pour une plateforme spécifique sans avoir à tenir compte de la compatibilité avec une autre, un atout en terme d'organisation du travail, notamment pour des projets complexes.. |
| Exemples d'application | Hamilton, Google Ads app, Philips Hue, BMW, Hopteamhome | Instagram, Facebook, Facebook Ads, Skype, Tesla |
| Principaux avantages | - Son adaptabilité grâce à des widgets riches ; - La customisation et l'ajout de fonctionnalités simplifié - Une communauté en forte croissance; - L'excellente documentation avec un soutien solide de l'équipe Flutter ; - L'amélioration de Flutter for Web, offrant la possibilité d'une base de code unique pour les plateformes mobiles et Web. - Les délais de production - Le Hot Reload, permettant de faire un changement dans le code de l’application et de le voir en temps réel | - Sa stabilité (plus de 5 ans sur le marché) ; - Les nombreux acteurs positionnés ; - La communauté mature et vaste ; - Une technologie facile à apprendre ; - De nombreux tutoriels et bibliothèques, qui permettent un développement rapide et sur mesure; |
Flutter est un en quelque sorte un kit de développement logiciel (SDK) complet pour des applications web et mobile. Flutter offre aux développeurs un moyen facile de déployer et créer une application mobile visuellement attrayante, compilée en mode natif, pour les téléphones mobiles (iOS, Android), le Web et les ordinateurs de bureau, le tout à l'aide d'une base de code unique.
Flutter est un excellent outil créé par Google pour créer des applications multiplateformes qui, à partir de la dernière version stable, peuvent être déployées sur le Web, le bureau et le mobile.
La particularité de Flutter par rapport à d’autres alternatives est qu’il fonctionne un peu comme un moteur de jeu vidéo. C’est lui qui a la maîtrise de chaque pixel qui s’affiche à l’écran. Il n’utilise aucun composant prédéfini des SDKs natifs pour dessiner les écrans des applications. Flutter montre patte blanche sur de nombreuses specs :
Flutter permet de compiler le code source de l'application mobile en une application native Windows, macOS ou Linux. Le support desktop de Flutter s'étend également aux plugins - les développeurs peuvent installer des plugins existants qui prennent en charge les plateformes macOS, Windows ou Linux, ou ils peuvent créer les leurs.
React Native est un framework d'application mobile open-source qui utilise JavaScript.
Les applications créées à l'aide de React Native ne sont pas des applications web mobiles. React Native utilise les mêmes éléments fondamentaux de l'interface utilisateur que les applications iOS et Android ordinaires : cela signifie qu'au lieu de construire en Java, Kotlin ou Swift, vous assemblez les mêmes éléments en utilisant JavaScript et React.
Pour développer des applications web et de bureau avec React Native, il est préférable d'utiliser d'autres bibliothèques Javascript.
L'équipe de Facebook a eu tout le temps de stabiliser l'API et de se concentrer sur la résolution des problèmes sous-jacents. Ils travaillent actuellement sur plusieurs améliorations :
Du point de vue des développeurs, Flutter offre un développement d'applications plus dynamique - et plus rapide. C'est l'une des plus grandes qualités de Flutter, appréciée par toutes les meilleures entreprises de développement d'applications mobiles.
Les développeurs peuvent apporter des modifications à la base de code à la volée, et les voir immédiatement dans l'application. C'est ce que l'on appelle la fonction de Hot Reload. Cette fonction aide les équipes à ajouter des fonctionnalités, à corriger des bogues et à expérimenter de nouvelles idées en un instant.
Flutter possède ses propres widgets et designs, ce qui signifie que vous pouvez avoir exactement la même application sur plusieurs plateformes. Avec Flutter, les développeurs peuvent écrire une seule base de code pour deux applications, couvrant à la fois les plateformes iOS et Android.
Si vous avez la même application sur les deux plates-formes, le suivi qualité sera beaucoup plus rapide, tout simplement parce que les tests seront les mêmes d'une plateforme à l'autre.
Les applications Flutter sont connues pour être rapides !
Flutter utilise la bibliothèque graphique Skia. Grâce à elle, l'interface utilisateur est redessinée à chaque fois qu'une vue change. La majeure partie du travail est effectuée sur le GPU (unité de traitement graphique) ; c'est pourquoi l'interface utilisateur de Flutter est fluide et offre 60 images par seconde.
Flutter dispose de son propre ensemble de widgets personnalisés, rendus et gérés par le moteur graphique du framework. Les applications Flutter ont une interface utilisateur particulièrement conviviale : un avantage crucial pour Flutter par rapport à React Native, découlant d'une super attention portée aux détails visuels. Flutter a été créé pour que vous puissiez facilement créer vos propres widgets, ou simplement personnaliser un widget existant.
Le principal avantage de Flutter par rapport à React Native (et aux solutions natives) est l'absence de contraintes liés à la plateforme. Flutter n'utilise pas les composants natifs, il créé les siens. La customisation des éléments est donc plus simple.
De plus, toutes les applications se présentent de la même manière sur les anciens systèmes iOS ou Android, de sorte que vous n'avez jamais à vous soucier de la prise en charge sur les anciens appareils. Pas de problème de compatibilité
Un avantage clé 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. En vérité, Flutter a beaucoup de retard à rattraper s'il veut égaler son "grand frère", ce qui est compréhensible. La communauté a besoin de temps pour éduquer son public et acquérir plus d'expérience, ce qui est typique de tout outil nouveau.
Les tendances d'Udemy, de Malt ou encore des tags de Stack overflow montrent une augmentation intense de l'intérêt des développeurs pour Flutter. Sur Udemy, il existe plus de 257 cours sur Flutter (avec environ 1 410 000 participants).
Il existe également 75 cours sur Dart (avec environ 608 000 participants aux cours).
Les chiffres concernant React Native sont moins élevés - environ 866 000 étudiants pour 133 cours. Flutter compte plus de 120 000 étoiles sur Github, tandis que React Native en compte plus de 95 300.
Flutter ne prend pas (encore) en charge les plates-formes de Continuous integration, comme Travis ou Jenkins par exemple. Ainsi, pour réaliser la construction, les tests et le déploiement automatisés, les développeurs doivent utiliser et maintenir des scripts personnalisés.
L'approche CI/CD garantit une automatisation et une surveillance continue tout au long du cycle de vie d'une application : Phases d'intégration, de test et de déploiement.
Même si Flutter est open source, si Google décidait de retirer son soutien au projet, ce serait une catastrophe. Il y a bien sur presque aucune chance que cela arrive. C'est même le contraire, depuis que l'équipe de Google a publié la version bêta de Flutter, elle n'a fait qu'intensifier ses efforts.
Les applications écrites en Flutter sont plus volumineuses que les applications natives.
Flutter est encore assez récent et il est parfois possible de ne pas trouver une fonctionnalité spécifique, les développeurs peuvent avoir besoin de construire eux-mêmes une fonctionnalité personnalisée, ce qui prend du temps.
React Native utilise des composants pouvant s'adapter à plusieurs plateformes. react native est écrit en Javascript et une même base de code peut être utilisée pour Android et ios. Les composants utilisés peuvent même être compilés et être réutilisés sur le web. Des bibliothèques comme React native for web ou ReactXp fonctionnent en ce sens : " React native expose des API, des composants, des accessoires, des styles et des paramètres d'animation qui sont implémentés de manière cohérente dans React JS (HTML) et React Native pour iOS et Android."
Il s'agit essentiellement de la même fonctionnalité que Flutter, qui reste un des atouts majeurs des deux frameworks. Le "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.
React Native utilise JavaScript comme langage de programmation. Javascript est un langage très connu (contrairement à Dart). Il est donc plus facile de trouver la solution à un problème ou encore un développeur Javascript.
React Native offre de nombreuses libertés aux développeurs. La logique de développpement d'une application peut être adaptée en fonction du projet. Le développeur peut décider comment gérer l'état global (comment stocker et gérer les données utilisées), choisir une bibliothèque de routeurs ou encore choisir entre JavaScript et TypeScript.
Ce large choix en termes de structuration et de développement peut également être une limite. Un développeur ayant l'habitude de traiter ses projets de telle ou telle manière sera influencé dans sa vision des prochains projets. De fait, le choix de l'équipe de développement d'un projet est primordiale et doit être réfléchie à long terme, d'autant plus pour un projet React native.
La version officielle de React Native a été publiée il y a plus de 5 ans et sa popularité est aujourd'hui de taille ! L'équipe de Facebook a eu beaucoup de temps pour stabiliser l'API. Aujourd'hui ils travaillent dans la réduction de la taille des applications.
Du fait de son expérience et de sa popularité, React Native a construit une réelle communauté de développeurs. Il existe d'innombrables didacticiels, formations, bibliothèques et cadres d'interface utilisateur qui facilitent l'apprentissage de la technologie.
Bien que de nombreux composants / bibliothèques peuvent être utilisés avec React native, leur ajout demandent souvent un temps supplémentaire de développement. Contrairement à Flutter qui prend en charge beaucoup plus de widgets. Un développement avec Flutter permet de créer la plupart des vues avec des widgets préfabriqués qui sont facilement personnalisables et cohérents entre les différentes platesformes.
Comme toute solution multiplateforme, l'UX et l'UI ne sont pas les mêmes que dans un développement natif. Néanmoins, il est plus facile d'obtenir une "sensation native" avec React Native qu'avec Flutter. Dans les deux cas, un développement supplémentaire sera nécessaire pour ajouter des composants natifs tant sur ios que sur Android.
Effectivement, la diversité des bibliothèques disponibles aux développeurs React native est un atout. Toutefois, certaines d'entre elles sont de mauvaise qualité, voire complètement abandonnées.
Les composants de React Native sont considérés comme "basiques". Si le(s) développeur(s) a besoin d'éléments supplémentaires, un développement sur mesure sera nécessaire. Seule une poignée de composants s'adaptent à la plateforme, et la plupart du temps, il est nécessaire d'utiliser un composant différent pour iOS et Android, ou de le styliser différemment. Contrairement à Flutter où chaque élément est un widget. Et les widgets sont basés sur le Material Design, ce qui les rend facilement personnalisables. La plupart des widgets sont adaptables, et les mêmes widgets sont utilisés sur Android et iOS.
Le fait que React Native utilise des composants natifs est un point fort. Toutefois, après chaque mise à jour de l'interface utilisateur du système d'exploitation, les composants sont également mis à jour. Cela peut casser l'interface utilisateur, ce genre de problématique arrive très rarement, mais sont tout de même présentes. Au contraire de Flutter qui recrée lui-même les composants natifs et qui par conséquent, est beaucoup plus stable.
Flutter et React native présente tout deux, en tant que développement cross-plateforme, de nombreuses similitudes : développement multiplateformes, open-source, utilisations de bibliothèques / widgets, large customisation, hot reload ...
Le développement multiplateforme est aujourd'hui la meilleure solution pour un développement qualitatif à moindre coût. Les temps de développement sont moins importants (donc moins couteux) qu'un développement natif, dont la finalité est parfois souvent la même
Découvrez combien coute le développement d'une application mobile
De plus en plus d'entreprises (notamment les startups) sont attirées par Flutter. C'est une technologie d'avenir propulsée par Google, dont la croissance est exponentielle. Chaque mois, nous assistons à des améliorations du SDK de Flutter. La communauté est toujours utile et enthousiaste. Flutter ouvre de nouveaux horizons et nous permet de créer non seulement des applications mobiles, mais aussi des applications pour le Web et le bureau. Flutter n'est pas bridé par l'interface utilisateur de la plateforme, car il ne l'utilise pas. La liberté en terme d'UX et d'UI est bien plus vaste et plus facile à implémenter.
React Native reste toutefois un très bon choix pour développer une application mobile, nous le conseillons notamment dans plusieurs cas de figure :
En réalité il n'y a pas de bon ou de mauvais choix. Tout dépend de la complexité du projet, de son architecture, des composants nécessaires, des services additionnels à brancher dans l'appli et des préférences de l'équipe de développement.
