Quels sont les trois frameworks principaux pour le front-end Web ?

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 framework front-end utilisé pour créer des interfaces utilisateur. Le framework de développement JavaScript est principalement utilisé pour créer une interface utilisateur ; 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 d'affichage et est très facile à apprendre et à intégrer avec d'autres bibliothèques ou existantes. bibliothèques.

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, donnant naissance à de nombreux nouveaux métiers, tels que concepteurs d'interface utilisateur, ingénieurs de développement, ingénieurs de tests logiciels, etc. Parmi les nombreux nouveaux métiers très médiatisés, ingénieur front-end Web en fait partie. Alors, quels sont les trois frameworks principaux pour le front-end Web ?

Les trois frameworks principaux pour le front-end Web sont Angular, React et Vue.

1. Angular

AngularJS a été créé par Misko Hevery et d'autres en 2009, et a ensuite été acquis par Google. Il s'agit d'un excellent framework JS frontal 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 une interface d'application unique. 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 d'application

• 2. Liaison de données bidirectionnelle

• 3. . Modèle HTML

• 5. Peut être intégré, injecté et testé

• Avantages :

1. Le modèle est puissant et riche, et est livré avec un ensemble extrêmement riche d'instructions angulaires.

• 2. Il s'agit d'un framework 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 toutes les autres fonctions

• 3. La directive peut être utilisée plusieurs fois dans le projet. La modularité

• 4.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é.

• Inconvénients :

1. Angular est facile à démarrer, mais il existe de nombreux concepts lorsque vous approfondissez et il est difficile à 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, et il n'y a aucun exemple du tout, la manière spécifique de l'utiliser vient de Google, ou demande directement. Misko, l'auteur d'Angular.

• 3. Il n'est pas particulièrement compatible avec IE6/7, mais vous pouvez utiliser jQuery pour écrire votre propre code afin de résoudre certains problèmes.

• 4. Il existe peu de tutoriels 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 des codes différents. de nombreuses opérations DOM dans des idées de type js ou jQuery.

• L'injection de dépendances 5.DI nécessite une déclaration explicite si une compression de code est requise.

2, React

React, produit par Facebook, la version officielle a été lancée en 2013, 4 ans plus tard qu'angular, mais grâce à son VirtualDOM innovant, elle écrase angulaireJS en performances, le Pushed out. le feu était un désastre. 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.

Fonctionnalités

1. Conception déclarative : React adopte un paradigme déclaratif, qui facilite la description des applications.

• 2. Efficace : React minimise les interactions avec le DOM en simulant le DOM.

• 3. Flexible : React fonctionne bien avec des bibliothèques ou des frameworks connus.

• Avantages :

1. Rapide : pendant le processus de rendu de l'interface utilisateur, React implémente des mises à jour locales 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 JavaScript. -le 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

Vue, en tant que dernier framework lancé (2014), s'appuie sur les caractéristiques de ses prédécesseurs angulaires et réactifs (comme VirtualDOM, liaison de données bidirectionnelle, algorithme de diff, attributs réactifs , développement de composants, etc.) et a apporté des optimisations pertinentes pour le rendre plus pratique à utiliser, plus facile à démarrer et moins adapté aux débutants.

Caractéristiques :

• 1. Cadre léger

• 2. Liaison de données bidirectionnelle

• 3.
  Avantages :
1. Simple : La documentation officielle est très claire et plus facile à apprendre qu'Angular.

2. Rapide : mise à jour du DOM dans le traitement par lots asynchrone.

• 3. Composition : Composez votre application avec des composants découplés et réutilisables.

• 4. Compact : ~18kbmin+gzip, et aucune dépendance.

• 5. Puissant : les expressions n'ont pas besoin de déclarer des propriétés déductibles dépendantes (propriétés calculées).

• 6. Adapté aux 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.

• Inconvénients :
1. Nouveau-né : Vue.js est un nouveau projet, pas aussi mature qu'angular.

2. L'impact n'est pas très grand : je l'ai recherché sur Google et j'ai trouvé que la diversité ou la richesse de Vue.js est inférieure à celle de certaines autres bibliothèques célèbres

• 3.

Développer les connaissances : quelle est la différence entre Vue.js et les autres frameworks ?

1. Différences avec AngularJS

Mêmes points : 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.

Ne prend pas en charge les navigateurs bas de gamme.

Différences :

1. AngularJS a un coût d'apprentissage élevé, comme l'ajout de la fonctionnalité d'injection de dépendances, alors que les API fournies par Vue.js lui-même sont relativement simples et intuitives.

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 l'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 applications volumineuses, cette différence d'optimisation est assez évidente.

2. Différences avec React

Mêmes points :

React utilise une syntaxe JSX spéciale, Vue.js recommande également d'écrire un format de fichier spécial .vue dans le développement de composants et a certaines conventions sur le contenu des fichiers. compilé avant utilisation.

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.

Il n'y a pas de fonctions AJAX, Route et autres intégrées dans le package principal, mais sont chargées sous forme de plug-ins.

Prend en charge les fonctionnalités des mixins dans le développement de composants.

Différence :

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 le modèle, qui peuvent faire fonctionner le DOM très facilement et rapidement.

(Partage de vidéos d'apprentissage :

web front-end

)

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!