Comparatif environnement de développement Web-Mobile :
15/04/2022
	Cordova	React	Angular	Flutter
Créateur	Apache	Facebook	Google	Google
Clients		Instagram, Whatsapp, Airbnb, Uber, Netflix, Dropbox, Atlassian, Tesla	Google Analytics, Forbes, Upwork, VMWare	Xianyu app-Alibaba, Hamilton Musical, Google Ads, Philips Hue, My BMW
Langage source	JavaScript	Javascript	Javascript	Dart, combinaison de JavaScript et de Java
Hybride Androïd/iOS	Oui	Oui	Oui	Oui
Temps d'apprentissage		Rapide et simple si connaissance de Javascript	Long et difficile
Structure		Flexible	Fixe et complexe
Instructions/code		Facile si connaissance de Javascript	Incompréhensible sans connaissance d'Angular
Injection de dépendances		Non	Oui
Liaison des données		Unidirectionnel (Bidirectionnel avec Redux)	Bidirectionnel
Rendu		Virtuel (DOM)	Réel (DOM)
Fonctionnalités intégrées		+++	+++++
		JSX, un langage de type XML construit sur des composants basés sur des classes JavaScript hooks de cycle de vie ou des composants fonctionnels plus simples gestion des états à l'aide de setState et des hooks. Protection XSS division de code et chargement différé limites de gestion des erreurs utilitaires pour les composants de test unitaire	modèles d'injection de dépendances basés sur une version étendue de HTML composants basés sur des classes avec des hooks de cycle de vie routage, fourni par @ angular / router Requêtes Ajax utilisant @ angular / common / http @ angular / forms pour les formes de construction encapsulation CSS des composants code de protection XSS splitting and lazy loading test runner, framework et utilitaires pour les tests unitaires.
		Bibliothèque de composants d'interface utilisateur	Complet et riche en fonctionnalités
		Permet d'adapter la configuration aux exigences particulières de chaque projet, et coût d'apprentissage de nouvelles bibliothèques pas aussi élevé.	Certaines de ces fonctionnalités sont intégrées au cœur du framework et vous n'avez pas la possibilité de ne pas les utiliser.
		Contrairement à la plupart des frameworks, React n'a pas de langage de création de modèles séparé. Au lieu de suivre une approche classique de séparation du balisage et de la logique, React a décidé de les combiner dans des composants en utilisant JSX un langage de type XML qui vous permet d'écrire du balisage directement dans votre code JavaScript.	Angular a un niveau d'abstraction plus élevé que React, introduisant ainsi plus concepts fondamentaux pour se familiariser. Les principaux sont: . composants : définis comme des classes ES spécialement décorées qui sont responsables de l'exécution de la logique d'application et du rendu du modèle . services : classes responsables de l'implémentation de la logique métier et applicative, utilisée par les composants . modules : essentiellement des conteneurs DI pour le câblage des composants, services, tuyaux et autres entités liés ensemble. Angular fait un usage intensif des classes ainsi que des concepts tels que DI, qui sont moins populaires dans le monde du développement front-end, mais devraient être familiers à toute personne ayant une expérience de développement back-end.
		Les mérites de mélanger le balisage avec JavaScript peuvent être discutables, il a un avantage indiscutable: l'analyse statique. Si vous faites une erreur dans votre balisage JSX, le compilateur émettra une erreur au lieu de continuer en silence. Cela aide en attrapant instantanément les fautes de frappe et autres erreurs stupides. L'utilisation de JSX s'est propagée dans différents projets – tels que MDX qui permet d'utiliser JSX dans les fichiers de démarque.	TypeScript est un nouveau langage basé sur haut de JavaScript et développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript ES2015 et comprend des fonctionnalités issues de versions plus récentes du langage. Vous pouvez l'utiliser à la place de Babel pour écrire du JavaScript à la pointe de la technologie. Il comporte également un système de frappe extrêmement puissant qui peut analyser statiquement votre code en utilisant une combinaison d'annotations et d'inférence de type.
		Dans React, vous pouvez définir des composants à l'aide de fonctions et de classes.	Il y a aussi un avantage plus subtil. TypeScript a été fortement influencé par Java et .NET, donc si vos développeurs ont une expérience dans l'un de ces langages, ils trouveront probablement TypeScript plus facile à apprendre que le JavaScript ordinaire.
		Même si cette notation est plus facile à comprendre pour les personnes familiarisées avec la programmation POO, vous devez être conscient de toutes les nuances subtiles de JS – par exemple, comment cela fonctionne, sans oublier de lier les gestionnaires d'événements.	Similaire à React, les composants angulaires ont un concept de composant Etat. Les composants peuvent stocker des données dans leurs propriétés de classe et lier les valeurs à leurs modèles. Si vous souhaitez partager l'état dans toute l'application, vous pouvez le déplacer vers un service avec état qui pourra ensuite être injecté dans les composants. Étant donné que la programmation réactive et RxJS sont un citoyen de première classe dans Angular, il est courant d'utiliser des observables pour recalculer des parties de l'état en fonction de certaines entrées.
		Les composants fonctionnels sont définis comme des fonctions simples. Ils sont souvent purs et fournissent un mappage clair entre les accessoires d'entrée et la sortie rendue. Le code fonctionnel est généralement moins couplé et plus facile à réutiliser et à tester.	Cependant, cela peut devenir délicat dans les applications plus volumineuses, car la modification de certaines variables peut déclencher une cascade multidirectionnelle de mises à jour difficile à suivre. Il existe des bibliothèques pour Angular qui vous permettent de simplifier la gestion des états à grande échelle.
		Des hooks ont été introduits pour rendre les composants fonctionnels plus simples et plus composables. Vous pouvez désormais diviser les fonctions volumineuses en parties atomiques plus petites, ce qui vous permet de diviser les éléments de fonctionnalité associés – en les séparant de la logique de rendu et en les réutilisant dans différents composants. Les hooks sont une alternative plus propre à l'utilisation des composants de classe et d'autres modèles, tels que les fonctions de rendu et les composants d'ordre supérieur – qui peuvent rapidement devenir trop compliqués.	Une tendance populaire avec les frameworks modernes est d'avoir un outil CLI qui vous aide à démarrer votre projet sans avoir à configurez vous-même la construction. Angular a Angular CLI pour cela.
		React fournit des moyens de structurer votre application sans impliquer beaucoup de couches d'abstraction compliquées. L'utilisation de composants fonctionnels avec des hooks vous permet d'écrire du code plus simple, plus atomique et réutilisable. Même si l'idée de combiner le code et les modèles peut sembler controversée, séparer la logique de présentation et d'application en différentes fonctions vous permet d'obtenir des résultats similaires.	Une chose importante dans l'utilisation de tout framework JavaScript est de pouvoir les intégrer à un composant bibliothèque de votre choix, pour éviter d'avoir à tout construire à partir de zéro. Angular offre des intégrations avec la plupart des bibliothèques de composants populaires ainsi qu'avec ses propres bibliothèques natives.
		Create React App est un utilitaire CLI permettant à React de configurer rapidement de nouveaux projets. Semblable à Angular CLI, il vous permet de générer un nouveau projet, d'exécuter l'application en mode développement ou de créer un bundle de production.	Ionic est un framework populaire pour le développement d'applications mobiles hybrides. Il fournit un conteneur Cordova bien intégré à Angular et une jolie bibliothèque de composants de matériaux. En l'utilisant, vous pouvez facilement configurer et créer une application mobile. Si vous préférez une application hybride à une application native, c'est un bon choix.
		Semblable à Angular, React a une grande variété des bibliothèques de composants parmi lesquelles choisir.
		Nous avons été vraiment surpris de la facilité avec laquelle il était de commencer à utiliser React. Même les personnes ayant une formation en développement back-end et une expérience limitée du développement front-end ont pu rattraper rapidement leur retard. Les messages d'erreur que vous pourriez rencontrer en cours de route sont généralement clairs et fournissent des explications sur la façon de résoudre le problème sous-jacent.	Learning Angular vous fera découvrir plus de nouveaux concepts que React. Tout d'abord, vous devez vous familiariser avec TypeScript. Pour les développeurs ayant de l'expérience dans les langages à typage statique tels que Java ou .NET, cela peut être plus facile à comprendre que JavaScript, mais pour les développeurs purement JavaScript, cela peut demander quelques efforts.
		L'inconvénient est que vous devrez investir du temps dans le choix des bibliothèques pour prendre en charge vos activités de développement.	Dans l'ensemble, nous avons remarqué que la barrière d'entrée pour Angular est plus élevée que pour React. Le nombre de nouveaux concepts peut être excessif pour les nouveaux arrivants. Et même après avoir commencé, l'expérience peut être un peu difficile, car vous devez garder à l'esprit des choses comme la gestion des abonnements Rx.js, les performances de détection des changements et les bananes dans une boîte (oui, c'est un conseil réel tiré de la documentation).
		Bien que TypeScript ne soit pas requis pour React, nous vous recommandons fortement de l'évaluer et de l'adopter dans vos projets.	Nous avons souvent rencontré des messages d'erreur trop énigmatiques pour être compris, nous avons donc dû les chercher sur Google et prier pour obtenir une correspondance exacte.
	Les WebViews et des navigateurs mobiles, qui peuvent ralentir une application. Les fonctions de multithreading qui ne sont pas disponibles en JS. Il est difficile d'obtenir des résultats exceptionnels avec les fonctionnalités prêtes à l'emploi.	Atteindre un niveau de performance impressionnant.
	Créer une application à un coût minimal. Les startups choisissent généralement Cordova car il permet de réduire le temps et les coûts de développement.	Si vous êtes prêt à consacrer plus de temps, d'argent et de ressources pour obtenir une solution avancée, optez pour le développement React Native.
	-	Créer un design accrocheur et unique (aspect différent sur différents appareils).
	Développer une application hybride basée sur votre site web, des technologies web dans une solution mobile.	Développer une application d'aspect natif. React Native répond à ces préoccupations bien mieux que Cordova (fonctionnent de manière transparente et à la vitesse de l'éclair).
	Une application basée sur Cordova ressemble à une application web. Dans la plupart des cas, vous pouvez constater un manque de réactivité. Cependant, si vous faites plus d'efforts en matière de conception et de développement, vous obtiendrez des résultats étonnants. Bien qu'il soit assez difficile d'obtenir une UI/UX native, avec l'aide de plugins spéciaux, vou serez en mesure de créer une solution web d'apparence native.	Un seul moteur de mise en page flexbox pratique permet de créer des interfaces mobiles et Web de bonne qualité.
		Avec React Native, vous pouvez corriger les bugs à distance en utilisant Chrome. Il est également assez pratique de travailler avec des erreurs dans React Native : l'application vous avertit de chaque erreur en changeant l'arrière-plan du code en rouge. L'éditeur de code fournit l'emplacement précis de l'erreur.
			Angular doit reconstruire la même application lorsqu'elle passe d'Android à iOS.	Flutter est plus performant car il utilise le même code ARM pour iOS et Android.
			Angular sort du lot grâce à ses caractéristiques de grande stabilité.	En ce qui concerne la convivialité, il est légèrement moins stable.
				Comparé aux autres frameworks de développement d’applications multiplateformes, Flutter est plus rentable. Il répond à toutes les exigences de chaque entreprise, quels que soient son modèle et sa taille.
				Les développeurs peuvent déboguer et tester les codes rapidement. Le respect des délais, la réduction des coûts et les autres ressources et efforts nécessaires au développement d’une application sont nettement moins importants avec Flutter.
				L’interface utilisateur basée sur Flutter peut être installée virtuellement sur n’importe quelle plateforme. Elle possède son propre moteur de rendu qui permet aux développeurs de conserver l’interface utilisateur telle quelle tout en passant à une autre plateforme. Lles utilisateurs peuvent bénéficier d’une expérience excellente et identique à celle d’une application native sur diverses plateformes.
				Flutter offre des performances inégalées par rapport à ses concurrents. Flutter compile les conceptions vers le code natif. Contrairement à React Native, Flutter affiche les widgets directement à partir de la bibliothèque native plutôt que de télécharger les bibliothèques et les composants sur l’appareil avant de les afficher. Flutter est le meilleur choix lorsqu’on a besoin d’une application mobile qui offre une interface utilisateur transparente sans entraîner de coûts de développement trop élevés.
		Dans certains cas, la nécessité de connecter les modules natifs avec le code JavaScript pendant l'exécution peut rendre l'application lente. Cependant, les performances du framework sont généralement satisfaisantes malgré son architecture.		La plupart de ces composants essentiels font déjà partie de Flutter. Si l'on compare Flutter à ReactJS, les applications construites sur Flutter sont donc plus stables et plus efficaces.
		Stabilité
		Le code peut être facilement réutilisé pour le développement d'applications Web et de bureau.
				Difficile de battre le délai de mise sur le marché.
		De nombreux tutoriels existent en ligne.		La documentation de Flutter est beaucoup mieux faite que celle de React Native. De nombreux tutoriels existent en ligne.
		React Native propose moins de composants clef en main par rapport à Flutter. Toutefois il existe de nombreuses librairies externes de composants pour pallier à ce problème.