Maintenant, le marché est rempli d'un grand nombre d'excellents cadres frontaux, chacun avec ses propres mérites. Il est vraiment difficile de choisir le cadre à apprendre ou quel framework est le meilleur pour votre prochain projet.
Cet article comparera les cinq cadres JavaScript les plus populaires pour fournir un aperçu de haut niveau de leurs fonctionnalités, outils, courbes d'apprentissage et autres avantages et inconvénients.
Bien sûr, je ne peux pas vous dire quel framework est "le meilleur": cela dépend de vos sentiments subjectifs, ainsi que de votre niveau actuel d'expérience JavaScript et du type d'application en cours de développement. Cependant, je vous ferai rapidement connaître les principaux concurrents et vous aiderai à prendre des décisions éclairées sur le cadre à choisir pour l'apprentissage approfondi.
La popularité est déterminée sur la base de l'utilisation du cadre dans l'enquête sur l'état JavaScript 2020. L'enquête comptait 23 765 répondants et les concurrents ont été classés comme suit:
J'ai également considéré la "conscience du cadre" dans la même enquête:
J'ai également traversé ces résultats avec une utilisation du cadre dans le sondage des développeurs de débordements de pile 2020. L'enquête, avec un total de 65 000 répondants participant, était essentiellement cohérent avec les résultats de l'enquête sur le statut JavaScript - bien que, malheureusement, il ne se distingue pas entre les cadres frontaux et les cadrans arrière.
Bien sûr, il existe de nombreuses autres mesures qui peuvent être référencées, telles que les ouvertures d'emploi, les stars GitHub, les téléchargements NPM, "Utilisation" et ainsi de suite. Si vous voulez connaître certaines de ces mesures (au moins pour les trois premiers frameworks), veuillez vous référer à ce gist github.
pour afficher de manière interactive la comparaison de ces cadres, reportez-vous à ce tableau de NPMTrends.
Le problème le plus critique est que le framework le plus populaire (REACT) sur la liste se définit comme une "bibliothèque".
Je ne veux pas entrer dans cette question en profondeur, car il existe déjà des articles complets qui expliquent les différences entre les cadres et les bibliothèques. Dans cet article, j'utiliserai la définition suivante fournie par Martin Fowler:
La bibliothèqueest essentiellement un ensemble de fonctions qui peuvent être appelées et qui est généralement organisée en classes aujourd'hui. Chaque appel fonctionne et renvoie le contrôle au client.
Le cadre incarne une conception abstraite avec plus de comportements qui y sont intégrés. Pour l'utiliser, vous devez insérer votre comportement dans divers endroits du cadre en sous-classé ou en insérant votre propre classe. Le code du framework appellera ensuite votre code à ces points.
À mon avis, React est plus conforme au comportement du cadre que la bibliothèque. Bien qu'il ne s'agisse pas techniquement d'un cadre, les développeurs adoptent souvent de nombreux outils et packages de leur écosystème pour le faire fonctionner.
Le but principal de React est de combiner les interfaces utilisateur interactives à partir de composants réutilisables. Il utilise JSX (une extension de syntaxe pour JavaScript) pour les modèles et implémente un modèle de flux de données unidirectionnel pour remplir les composants avec des données. Chaque fois que les données des composants changent, React utilise son Dom virtuel pour mettre à jour la page rapidement et efficacement.
Les outils de développement sont très utiles. L'équipe React a construit et maintenu une CLI (création de l'application React) pour construire rapidement et facilement de nouveaux projets, ainsi que des extensions d'outils de développeur pour Chrome et Firefox. Il existe de nombreux packages tiers disponibles qui peuvent accomplir diverses tâches (telles que le routage, la manutention des formulaires et les animations), ainsi que certains cadres basés sur React tels que Next.js et Gatsby.
React suit le concept de "apprendre une fois, écrire n'importe où". Il peut utiliser React Native pour conduire des applications mobiles et peut rendre côté serveur à l'aide du nœud. Cela signifie une excellente prise en charge SEO, qui ne fera que s'améliorer avec l'introduction des composants du serveur.
L'une des principales critiques de React est qu'elle est trop non contrainte: elle se concentre uniquement sur la couche de vue de l'application, laissant tout le reste au développeur. Certaines personnes aiment cette liberté, mais d'autres - en particulier les nouveaux développeurs - peuvent être submergées par cette approche de codage non structurée encouragée.
React a une courbe d'apprentissage modérée. Il encourage l'utilisation de divers paradigmes de programmation fonctionnelle tels que l'invariance et les fonctions pures, ce qui signifie que les développeurs vont mieux de maîtriser ces concepts avant d'essayer de construire quelque chose de sérieux.
Si vous êtes satisfait de l'approche sans contrainte de React et que la majeure partie du processus de développement aux développeurs, c'est un excellent choix pour les applications basées sur les données de toute taille.
Pour résoudre les problèmes de performances et le défi de construire de grandes applications JavaScript, Google a réécrit AngularJS à partir de zéro et a publié Angular 2 (maintenant angulaire pour faire court) en 2016. Il n'y a pas de chemin de migration simple entre ces deux versions, donc AngularJS et Angular deviennent deux cadres distincts. AngularJS a maintenant été interrompu pour la maintenance et ne devrait pas être utilisé pour de nouveaux projets.
Quant à Angular, c'est un poids lourd dans le monde du cadre frontal. Des entreprises comme Google et Microsoft l'utilisent dans des environnements de production, il a donc été entièrement testé entièrement. Il existe également de nombreuses ressources disponibles en ligne (comme l'excellent tutoriel Tour of Heroes), et il existe également de nombreuses questions sur Angular on Stack Overflow.
Contrairement à React, qui gère uniquement les couches de vue, Angular fournit une solution complète pour créer des applications clients à une seule page. Les composants angulaires peuvent implémenter la liaison des données bidirectionnelles, ce qui leur permet d'écouter les événements simultanément et de mettre à jour les valeurs entre les composants du parent et de l'enfant. Les modèles sont des extraits HTML qui permettent d'utiliser une syntaxe spéciale pour profiter de nombreuses fonctionnalités d'Angular. TypeScript est la langue principale pour le développement angulaire, ce qui rend ce cadre particulièrement adapté aux applications au niveau de l'entreprise.
L'outil est très utile. Angular fournit une CLI très poli pour initialiser, développer, construire et maintenir des applications angulaires. Des extensions d'outils de développement chrome et Firefox sont également disponibles pour aider à déboguer les applications angulaires. Angular Native fournit des solutions pour gérer de nombreuses tâches communes telles que les formes et le routage, mais il existe toujours un riche écosystème de bibliothèques tierces.
À mon avis, la courbe d'apprentissage d'Angular est la plus raide de tous les cadres énumérés ici. Les développeurs doivent être familiers avec TypeScript, ainsi que des concepts tels que les décorateurs et l'injection de dépendance afin d'utiliser efficacement le cadre. Par conséquent, il ne convient pas aux nouveaux développeurs. Au lieu de cela, il est plus adapté au travail d'équipe pour créer de grandes applications.
Si vous voulez avoir une compréhension complète de la différence entre React et Angular, voir "React vs Angular: Comparaison approfondie".
Veuillez noter que ces statistiques s'appliquent à Vue V2. La version 3 est disponible, mais doit être installée comme Vue @ Suivant.
La troisième place de notre liste est Vue.js, un cadre frontal Model-View-View Model (MVVM) pour la création d'interfaces utilisateur et d'applications à page unique. Il a été écrit par vous Yuxi et a été publié pour la première fois en 2014. Vue a une communauté de développeurs très fidèle (par exemple, il a plus d'étoiles GitHub que de réagir), ce qui est probablement parce qu'il comble l'écart laissé par AngularJS après l'avoir réécrit à Angular.
Vue est développé et maintenu par environ 20 membres de l'équipe de base, et bien qu'il ne soit pas directement soutenu par le géant de l'Internet, des entreprises telles que Alibaba, Gitlab et Adobe l'utilisent dans des environnements de production. La documentation de Vue est sans doute le meilleur de tous les cadres, et son forum est également une excellente ressource pour obtenir de l'aide avec les problèmes de code. Vue est également populaire dans le monde PHP et est disponible dans le cadre du framework Laravel.
L'un des arguments de vente de Vue est qu'il a été conçu pour être progressivement adopté dès le début. Cela signifie que vous pouvez ajouter Vue à des pages Web régulières pour améliorer ses fonctionnalités, ou vous pouvez tout faire pour créer une application complète de page unique. Vue.js utilise une syntaxe de modèle basée sur HTML qui vous permet de lier facilement les propriétés au modèle de données sous-jacent. Il fournit également un composant de fichier unique qui conserve les modèles, le code JavaScript et les CSS de portée dans le même fichier.
Les outils autour de Vue sont super. Il existe une CLI officielle pour créer et développer des applications VUE, et il existe une extension d'outil de développeur pour Chrome et Firefox pour aider à déboguer. En contraste fortement avec React, Vue fournit un ensemble officiel pour le routage et la gestion de l'État, qui fournit une approche de normalisation agréable. Il existe également une large gamme d'outils tiers, ainsi que des cadres basés sur Vue tels que Nuxt.js et Gridome (réponse de Vue à NEXT.JS et GATSBY de React).
La barrière à l'entrée à l'utilisation de Vue est faible, en partie parce qu'elle utilise une approche incrémentielle pour créer des applications, en partie parce qu'elle est basée sur HTML, CSS et JavaScript - les technologies qui devraient être familières à tout développeur.
Vue est un excellent choix pour les applications de toutes tailles. Il convient aux développeurs ayant moins d'expérience, ainsi qu'à ceux qui préfèrent obtenir plus de structure et de conseils du cadre.
Svelte convertit votre application en code JavaScript idéal lors de la construction, plutôt que d'interpréter votre code d'application à l'exécution. Cela signifie que vous ne payez pas de performances pour l'abstraction du cadre et que vous ne serez pas pénalisé lorsque l'application se charge pour la première fois.En d'autres termes, il évite le concept de DOM virtuel, mais compile votre code en petits modules JavaScript simples lorsqu'il est construit qui met à jour le DOM lorsque votre état d'application change. Comme vous pouvez l'imaginer, cela rend l'application plus rapidement et prend moins de place. Svelte restaure la gestion de l'état de traitement brut et offre une réactivité hors de la boîte.
Malheureusement, l'outil est un peu un mal de tête en ce moment. Initialement, Sapper (un cadre d'application construit au-dessus de Svelte) a été utilisé pour créer des applications Svelte avec des structures prédéfinies et les équiper de fonctionnalités plus avancées telles que le routage et le rendu côté serveur. Cependant, en novembre 2020, les créateurs de Svelte ont annoncé que la version 1.0 de Sapper ne sera jamais publiée et que Sveltekit est désormais le seul moyen recommandé de commencer à créer des applications avec Svelte. Extensions d'outils de développeur de navigateur pour Chrome et Firefox, ainsi qu'une variété de modules tiers, bien que bien moins qu'un cadre plus mature.
Bien que la courbe d'apprentissage de Svelte soit très faible, sa communauté reste petite et n'a pas encore gagné le même appel que les trois premiers cadres mentionnés ici. Mais des entreprises comme IBM et le New York Times l'utilisent dans des environnements de production, et c'est certainement un cadre qui mérite d'être prêté attention dans les mois et les années à venir.
svelte n'est pas encore assez mature, il est donc parfait pour les petits projets. Cependant, cela change. Sveltekit est en phase bêta ouverte et la communauté se développe. Bien que Svelte soit encore un nouveau venu pour le moment, vous devez vous concentrer sur ce domaine ...
Cela fait près d'une décennie et remonte à React, Vue, Svelte et tous les autres cadres. Le cadre n'a jamais été à l'avant-garde de la vague de battage médiatique frontale, mais elle permet silencieusement à l'équipe de libérer des produits de manière stable et continue - y compris Qonto et Clark, qui sont tous deux les 50 meilleures sociétés fintech en Europe en 2020. 🎜>Similaire à Angular, Ember adopte une approche plus complète du développement des applications et fournit tout ce dont vous avez besoin pour créer des applications JavaScript frontal modernes. Cela inclut les solutions de routage, les couches de données et un outil de test moderne entièrement tracé intégré à chaque application par défaut. Il suit un cycle de libération de six semaines (lorsqu'une nouvelle version mineure est publiée) et s'engage à stabilité. Cela pourrait être un réel avantage pour les développeurs qui ne peuvent pas réécrire continuellement des applications pour éviter d'être laissé par des cadres plus rapides.
Un large éventail d'outils est apparu autour de Ember, de la CLI Ember (la façon officielle de créer, de construire, de tester et de servir les applications Ember) à l'inspecteur Ember (le complément de navigateur officiellement pris en charge qui vous permet de vérifier votre application l'objet Ember). Il existe également des bibliothèques tierces disponibles, et la CLI fournit un format commun (c'est-à-dire des addons Ember) pour les distribuer.
La communauté d'Ember n'est pas aussi grande que celles de React, mais ses membres sont très actifs et ont un forum et un serveur de discorde où vous pouvez demander de l'aide pour les problèmes de code. Ember est le cadre le plus avisé répertorié ici, en utilisant l'approche "Convention sur la configuration". Ces développeurs plus doivent être familiarisés avec des concepts plus avancés - comme les sérialiseurs et les adaptateurs - pour rendre leur courbe d'apprentissage modérée à raide.
Ember peut ne pas convenir aux débutants ou aux petits projets. Il a beaucoup de pièces mobiles et n'offre pas beaucoup de flexibilité dans la façon de construire des choses. Mais il brille lors de la construction d'applications frontales riches et complexes avec l'équipe.
Il s'agit de ma comparaison des cinq cadres frontaux les plus populaires sur le marché aujourd'hui. Bien que ce ne soit pas un aperçu exhaustif de la fonctionnalité de chaque cadre, j'espère que cela vous donne une idée des principaux concurrents pourraient convenir à votre prochain projet, ou quels frameworks valent votre exploration plus approfondie.
Si vous avez des questions ou des commentaires, pourquoi ne pas rejoindre le forum SitePoint pour la discussion?
Lors du choix d'un cadre frontal, vous devez prendre en compte des facteurs tels que la courbe d'apprentissage, le soutien communautaire, la documentation, la flexibilité et les performances. Si vous n'êtes pas familier avec le développement frontal, la courbe d'apprentissage est importante. Certains cadres sont plus faciles à apprendre que d'autres. Le soutien communautaire est essentiel pour obtenir de l'aide lorsque vous rencontrez des problèmes. Les grandes communautés actives signifient souvent plus de ressources et de tutoriels. Une bonne documentation peut rendre le processus d'apprentissage plus fluide. La flexibilité fait référence à la capacité du cadre à s'adapter aux différents besoins du projet. Enfin, les performances affectent la vitesse et l'expérience utilisateur de l'application.
Angular est un framework puissant et riche en fonctionnalités développé par Google. Il est connu pour sa liaison bidirectionnelle,, son injection de dépendance et son architecture modulaire. Cependant, sa courbe d'apprentissage est raide par rapport à d'autres cadres. Il est parfait pour les applications grandes et complexes.
React est développé par Facebook et est connu pour son DOM virtuel, qui améliore les performances en minimisant les opérations directes sur le DOM réel. Il est basé sur des composants, qui favorise la réutilisabilité et la maintenabilité. Il a également une énorme communauté et une grande bibliothèque.
Vue est un cadre progressif, ce qui signifie que vous pouvez l'adopter étape par étape. Il est facile à apprendre et a une grammaire plus simple qu'angulaire et réagi. Il a également une architecture DOM et des composants virtuelle. Il est parfait pour les petits et moyens projets.
liaison bidirectionnelle en angulaire signifie que lorsque les données du modèle changent, la vue reflète ce changement et vice versa. Cette synchronisation entre le modèle et la vue simplifie le code et améliore la lisibilité.
Le DOM virtuel est une copie légère du DOM réel. Lorsqu'un changement se produit, le DOM virtuel est d'abord modifié. L'algorithme de différence compare alors le nouveau Dom virtuel à l'ancien DOM virtuel, et seuls les modifications réelles sont mises à jour dans le vrai DOM. Ce processus améliore les performances.
L'architecture modulaire d'Angular organise le code en modules, chaque module responsable d'une fonction spécifique. Cette séparation des préoccupations rend le code plus facile à maintenir et à tester. Il favorise également la réutilisabilité et l'évolutivité du code.
décompose l'interface utilisateur en composants réutilisables indépendants. Chaque composant a sa propre logique et contrôle une partie de l'interface utilisateur. Cette approche favorise la réutilisabilité, la maintenabilité et la testabilité du code.
Les communautés grandes et actives peuvent fournir des ressources, des tutoriels précieux et aider à obtenir de l'aide lorsque vous rencontrez des problèmes. Il montre également la popularité et la vie en service du cadre. Angular, React et Vue ont tous un fort soutien communautaire.
Les performances affectent directement la vitesse de l'application. Les applications lentes peuvent frustrer les utilisateurs et conduire à des taux de rebond plus élevés. Par conséquent, le choix d'un cadre haute performance peut améliorer l'expérience utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Solution à javascript :;
Qu'est-ce que la résolution 2K ?
Analyse coût-efficacité de l'apprentissage de Python et C++
expression régulière Perl
Type de commande de redémarrage Linux
COMMENT INSTALLER LINUX
Classement des dix principales plateformes de trading formelles
Quels sont les logiciels de programmation du microcontrôleur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
