Trois frameworks front-end Web grand public : 1. Angular, un framework front-end utilisé pour créer une interface d'application unique, avec des fonctions de module puissantes et des commandes personnalisées ; 2. React, un JavaScript utilisé pour créer des interfaces utilisateur. Framework de développement, principalement utilisé pour build UI; 3. vue, est un framework JavaScript progressif pour créer des interfaces utilisateur. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue et est très facile à apprendre et à intégrer avec d'autres bibliothèques ou projets existants.
L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.
Au cours des dix dernières années, l'industrie informatique s'est développée rapidement et de nombreux nouveaux métiers ont vu le jour, tels que les concepteurs d'interface utilisateur, les ingénieurs de développement, les ingénieurs de tests de logiciels, etc. Parmi les nombreux nouveaux métiers de haut niveau, les ingénieurs front-end Web sont l'un des eux. Alors, quels sont les trois frameworks principaux pour le front-end Web ?
Les trois principaux frameworks frontaux Web sont Angular, React et Vue.
1. Angulaire
AngularJS a été créé en 2009 par Misko Hevery et d'autres, puis acquis par Google. Il s’agit d’un excellent framework JS front-end utilisé dans de nombreux produits. Il ne s'agit pas seulement d'un framework de développement front-end avec des concepts avancés, mais aussi d'une solution de bout en bout. Il suit le modèle MVC dans la conception architecturale et préconise un couplage lâche des composants de données et de traitement logique. AngularJS réalise l'extension naturelle du HTML grâce à la technologie d'instruction et réalise une synchronisation automatique bidirectionnelle du modèle de données et de la vue d'affichage grâce à la technologie de compilation, allégeant ainsi les opérations DOM complexes. En outre, il fournit également une bonne prise en charge de la technologie de test automatisé frontal.
Angular est un framework frontal permettant de créer des interfaces d'application uniques. Il possède de nombreuses fonctionnalités de base telles que la liaison de données, les services, les directives, l'injection de dépendances, etc. Il possède des fonctions de module puissantes et présente les avantages des commandes personnalisées
caractéristiques:
1. Bonne structure de candidature
2. Liaison de données bidirectionnelle
3.Instructions
4.Modèle HTML
5. Peut être intégré, injecté et testé
avantage:
1. Le modèle est puissant et riche en fonctions, et est livré avec un ensemble extrêmement riche d'instructions angulaires.
2. Il s'agit d'un cadre frontal relativement complet, comprenant des services, des modèles, une liaison de données bidirectionnelle, une modularisation, un routage, des filtres, une injection de dépendances et d'autres fonctions ;
3. Personnalisez les instructions. Après avoir personnalisé les instructions, vous pouvez les utiliser plusieurs fois dans le projet.
4. La modularisation ng introduit audacieusement certaines choses de Java (injection de dépendances), ce qui facilite l'écriture de code réutilisable, ce qui est très utile pour les équipes de développement agiles.
5.angularjs est développé par le géant de l'Internet Google, ce qui signifie également qu'il dispose d'une base solide et du soutien de la communauté.
défaut:
1. Débuter avec Angular est facile, mais une fois que vous y êtes approfondi, de nombreux concepts sont difficiles à comprendre pendant l'apprentissage.
2. Il y a très peu d'exemples dans la documentation. La documentation officielle ne parle essentiellement que de l'API sans aucun exemple. Dans de nombreux cas, vous pouvez obtenir les instructions spécifiques de Google, ou demander directement à Misko, l'auteur d'Angular.
3. La compatibilité avec IE6/7 n'est pas particulièrement bonne, mais vous pouvez utiliser jQuery pour écrire votre propre code afin de résoudre certains problèmes.
4. Il existe peu de didacticiels de bonnes pratiques sur l'application des instructions. Angular est en fait très flexible. Si vous ne suivez pas les principes d'utilisation de certains auteurs, il est facile d'écrire différents codes. Par exemple, il existe de nombreuses opérations DOM dans js. qui sont similaires à jQuery.
5. L'injection de dépendances DI nécessite une déclaration explicite si la compression du code est requise.
2.Réagir
React, produit par Facebook, a été officiellement lancé en 2013, 4 ans plus tard qu'angular. Cependant, grâce à son VirtualDOM innovant, il a dépassé angulaireJS en termes de performances. Une fois lancé, il est devenu très populaire. Il possède de nombreuses fonctionnalités, notamment VirtualDOM, JSX, l'algorithme Diff, etc., prend en charge la syntaxe ES6 et utilise une programmation fonctionnelle. Le seuil est légèrement plus élevé, mais il est également plus flexible, permettant plus de possibilités de développement.
caractéristiques
1. Conception déclarative : React adopte un paradigme déclaratif, qui facilite la description des applications.
2. Efficace : React minimise l'interaction avec le DOM en simulant le DOM.
3. Flexible : React fonctionne bien avec des bibliothèques ou des frameworks connus.
avantage:
1. Vitesse rapide : pendant le processus de rendu de l'interface utilisateur, React implémente des mises à jour partielles du DOM réel via des micro-opérations dans le DOM virtuel.
2. Compatibilité entre navigateurs : Virtual DOM nous aide à résoudre les problèmes entre navigateurs. Il nous fournit une API standardisée, ce qui ne pose aucun problème même dans IE8.
3. Modularisation : écrivez des composants d'interface utilisateur modulaires indépendants pour votre programme, de sorte qu'en cas de problème avec un ou plusieurs composants, vous puissiez facilement l'isoler.
4. Flux de données unidirectionnel : Flux est une architecture permettant de créer une couche de données unidirectionnelle dans les applications JavaScript. 5. JavaScript isomorphe et pur : parce que les robots des moteurs de recherche s'appuient sur des réponses côté serveur plutôt que sur l'exécution de JavaScript, pré-rendu de votre application aide au référencement. 6. Bonne compatibilité : par exemple, RequireJS est utilisé pour le chargement et l'empaquetage, tandis que Browserify et Webpack conviennent à la création de grandes applications. Ils rendent ces tâches difficiles moins ardues. Inconvénients : React lui-même n'est qu'un V, pas un framework complet, donc si vous voulez un framework complet pour un grand projet, vous devez essentiellement ajouter ReactRouter et Flux pour écrire de grandes applications.
3.Vue
En tant que dernier framework lancé (2014), Vue s'appuie sur les fonctionnalités de ses prédécesseurs angulaires et réactifs (comme VirtualDOM, liaison de données bidirectionnelle, algorithme diff, propriétés réactives, développement de composants, etc.) et réalise des optimisations pertinentes pour le rendre utilisable. Plus pratique, plus facile à démarrer et moins adapté aux débutants.
caractéristiques:
1. Cadre léger
2. Liaison de données bidirectionnelle
3.Instructions
4. Plugin
avantage:
1. Simple : La documentation officielle est très claire et plus facile à apprendre qu'Angular.
2. Rapide : mettez à jour le DOM dans le traitement par lots asynchrone.
3. Composition : Composez votre application avec des composants découplés et réutilisables.
4. Compact : ~18 kbmin+gzip et aucune dépendance.
5. Puissante : les expressions n'ont pas besoin de déclarer des propriétés déductibles dépendantes (propriétés calculées).
6. Compatible avec les modules : il peut être installé via NPM, Bower ou Duo. Il n'oblige pas tout votre code à suivre les différentes réglementations d'Angular et les scénarios d'utilisation sont plus flexibles.
défaut:
1. Nouveau-né : Vue.js est un nouveau projet, pas aussi mature qu'angular.
2. L'influence n'est pas très grande : je l'ai recherché sur Google et j'ai découvert que la diversité ou la richesse de Vue.js est inférieure à celle de certaines autres bibliothèques célèbres.
3. Ne prend pas en charge IE8.
Connaissances étendues : quelle est la différence entre Vue.js et les autres frameworks ?
1. Différences avec AngularJS
Points similaires :
Les deux instructions de support : instructions intégrées et instructions personnalisées.
Les deux prennent en charge les filtres : filtres intégrés et filtres personnalisés.
Les deux prennent en charge la liaison de données bidirectionnelle.
Aucun des deux ne prend en charge les navigateurs bas de gamme.
Différences :
1. Le coût d'apprentissage d'AngularJS est élevé, comme l'ajout de la fonctionnalité d'injection de dépendances, tandis que l'API fournie par Vue.js elle-même est relativement simple et intuitive.
2. En termes de performances, AngularJS s'appuie sur une vérification sale des données, donc plus il y a d'observateurs, plus cela devient lent.
Vue.js utilise une observation basée sur le suivi des dépendances et utilise des mises à jour de file d'attente asynchrones. Toutes les données sont déclenchées indépendamment.
Pour les grandes applications, cette différence d’optimisation est assez évidente.
2. Différences avec React
Points similaires :
React utilise une syntaxe JSX spéciale et Vue.js recommande également d'écrire un format de fichier spécial .vue dans le développement de composants. Il existe certaines conventions sur le contenu des fichiers, et les deux doivent être compilées pour être utilisées.
L'idée centrale est la même : tout est un composant et les instances de composants peuvent être imbriquées.
Tous fournissent des fonctions de hook raisonnables, permettant aux développeurs de personnaliser leurs besoins.
Les colonnes AJAX, Route et autres fonctions ne sont pas intégrées au package principal, mais sont chargées en tant que plug-ins.
Les fonctionnalités des mixins sont prises en charge dans le développement de composants.
Différences :
React s'appuie sur Virtual DOM, tandis que Vue.js utilise des modèles DOM. Le DOM virtuel utilisé par React effectuera des vérifications approfondies sur les résultats rendus.
Vue.js fournit des instructions, des filtres, etc. dans des modèles, qui peuvent faire fonctionner le DOM de manière très pratique et rapide.
Ce qui précède est le contenu détaillé des trois frameworks front-end Web grand public. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur ce site !