Les frameworks front-end Web comprennent : 1. Angular, un framework front-end pour créer une interface d'application unique ; 2. React, un framework de développement JavaScript pour créer des interfaces utilisateur ; 3. Vue, un ensemble d'outils pour créer des interfaces utilisateur ; Framework JavaScript progressif ; 4. Bootstartp, un framework front-end basé sur HTML, CSS et JavaScript ; 5. QUICK UI, un ensemble de solutions de développement web front-end au niveau de l'entreprise ; .

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

Le front-end Web, également connu sous le nom de ? client ?, concerne les aspects visuels du site Web que l'utilisateur peut voir et expérimenter, c'est-à-dire tout ce que l'utilisateur voit et que le navigateur Web affiche, impliquant ce que l'utilisateur peut voir, toucher et expérimenter Tout, c'est-à-dire que le front-end Web comprend la structure de la page Web, l'apparence visuelle du Web et la mise en ?uvre de l'interaction au niveau du Web.

Quels sont les frameworks front-end Web?? 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 lache des composants de données et de traitement logique. AngularJS réalise l'extension naturelle du HTML grace à la technologie d'instruction et réalise une synchronisation automatique bidirectionnelle du modèle de données et de la vue d'affichage grace à 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 grace à 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

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 taches 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.

4. Bootstartp
Bootstrap est le framework frontal open source de Twitter basé sur HTML, CSS et JavaScript. Il s'agit d'une bo?te à outils frontale con?ue pour le développement rapide d'applications Web. Il prend en charge la mise en page réactive et adhère à la priorité des appareils mobiles après la version V3.

Bootstrap fournit des spécifications HTML et CSS élégantes, écrites dans le langage CSS dynamique Less. Bootstrap est très populaire depuis son lancement et est un projet open source populaire sur GitHub, y compris le Breaking News MSNBC (Microsoft National Broadcasting Company) de la NASA. Certains frameworks familiers aux développeurs mobiles nationaux, tels que le framework open source frontal WeX5, sont également optimisés en termes de performances sur la base du code source Bootstrap. Adresse officielle : https://getbootstrap.com

Bootstrap est très populaire, grace à ses fonctions et fonctionnalités très pratiques . Les principales fonctionnalités de base sont les suivantes?:

1) Multi-appareils et multi-navigateurs

Il est compatible avec tous les navigateurs modernes, y compris les plus critiqués IE7 et 8. Bien entendu, ce cours ne prend plus en compte les navigateurs inférieurs à IE9. 2) La disposition réactive

peut non seulement prendre en charge l'affichage de différentes résolutions sur le PC, mais également prendre en charge l'affichage de commutation réactif du PAD mobile, du téléphone mobile et d'autres écrans.

3) Composants complets fournis

Bootstrap fournit des composants très pratiques, notamment?: la navigation, les étiquettes, les barres d'outils, les boutons et une série de composants, que les développeurs peuvent facilement appeler.

4) Plug-in jQuery intégré

Bootstrap fournit de nombreux plug-ins jquery pratiques, qui permettent aux développeurs d'implémenter divers effets spéciaux généraux sur le Web.

5) Prise en charge HTML5, CSS3

Les balises sémantiques HTML5 et les attributs CSS3 sont bien pris en charge.

6) Prise en charge des styles dynamiques LESS

LESS utilise des variables, l'imbrication et un codage mixte d'opérations pour écrire du CSS plus rapide et plus flexible. Il peut être bien développé avec Bootstrap.

5. QUICK UI

QUICK UI est un ensemble complet de solutions de développement Web front-end au niveau de l'entreprise, composé d'un cadre de base, d'une bibliothèque de composants d'interface utilisateur, d'un package d'habillage, d'un exemple de projet et d'une documentation. Les développeurs utilisant QUICKUI peuvent réduire considérablement leur charge de travail, améliorer l'efficacité du développement et créer rapidement des systèmes d'applications Web puissants, esthétiques et compatibles.

6. MDC Web

Material Components for the web (MDC Web), un nouveau framework front-end con?u par Google pour le Web. MDC Web aide les développeurs à mettre en ?uvre la conception matérielle et les composants sont développés par l'équipe principale d'ingénieurs et de concepteurs UX de Google. Ces composants permettent un flux de développement solide pour créer des projets Web beaux et fonctionnels.

7、Pur

Bootstrap, Patternfly et MDC Web sont des frameworks CSS très puissants, mais très fastidieux et complexes. Si vous souhaitez un framework CSS léger, il est recommandé d'essayer Pure.css. Il est plus proche de la programmation CSS, mais il peut également aider à créer une bonne page Web. Pure est un framework CSS léger avec une empreinte minimale. Il est développé par Yahoo et est open source sous licence BSD.

8. Foundation

Foundation prétend être le framework front-end réactif le plus avancé au monde. Il fournit des fonctionnalités avancées et des didacticiels pour créer des sites Web professionnels. Ce cadre est utilisé par de nombreuses entreprises et organisations et dispose d’une documentation complète.

9, le framework open source de Bulma

Bulma basé sur Flexbox est open source sous licence MIT. Un framework très léger qui ne nécessite qu'un seul fichier CSS. Bulma dispose d'une documentation concise et claire permettant de choisir facilement le thème souhaité. Il existe également de nombreux composants Web disponibles pour les utiliser dans vos conceptions.

10. Squelette

Cadre léger Squelette. La bibliothèque Skeleton ne fait qu'environ 400 lignes et le framework ne fournit que quelques composants de base du framework CSS. Skeleton fournit toujours une documentation détaillée pour vous aider à démarrer rapidement.

11. Materialise

Materialize est un framework frontal réactif moderne basé sur le style Material Design, qui résout le travail le plus ardu et combine des composants personnalisés pour fournir des styles par défaut. La page de documentation de Materialise est très complète et facile à suivre. Sa page de composants comprend des boutons, des cartes, une navigation, etc.

12. Bootflat

Bootflat est un framework CSS open source dérivé de Bootstrap de Twitter. Bootflat est plus simple et plus léger que Bootstrap. Surtout des images sans beaucoup de texte.

13. PatternFly

PatternFly est le framework CSS open source de Red Hat. Contrairement à Bootstrap, Bootstrap est con?u pour ceux qui souhaitent créer de beaux sites Web, tandis que PatternFly se concentre principalement sur les développeurs d'applications d'entreprise. graphiques, navigation, etc., Red Hat l'a en fait utilisé pour créer OpenShift. En plus du HTML statique, PatternFly prend également en charge le framework ReactJS, un framework JavaScript populaire développé par Facebook. PatternFly possède de nombreux composants avancés tels que des graphiques à barres, des graphiques, des modèles et des mises en page adaptés aux applications de niveau entreprise.

14, flex

Flex est encore en phase d'incubation et n'est pas encore un projet Apache officiel. Flex4.8 n'est pas une version officielle d'Apache. , cette version marque le début d'une nouvelle ère pour Flex, où l'avenir de Flex sera piloté par la communauté plut?t que par une seule entreprise. Les développeurs peuvent contribuer à améliorer Flex en contribuant au code, par exemple en corrigeant des bogues, en ajoutant des fonctionnalités, etc.

Ci-dessus sont quelques frameworks couramment utilisés pour le développement web front-end partagés par Xiaoqian. Les programmeurs peuvent choisir un cadre de développement frontal simple, intuitif et puissant en fonction des besoins de leur entreprise pour rendre leur travail plus rapide et plus facile et améliorer l'efficacité du développement.

15. SUI

"SUI est une bibliothèque de composants front-end développée sur la base de bootstrap. C'est également un ensemble de spécifications de conception. Grace à SUI, vous pouvez facilement concevoir et implémenter de belles pages." Effectivement, il est préférable de citer directement la publicité officielle ennuyeuse pour sauver vos propres cellules cérébrales (囧...) Bien s?r, comme le dit la publicité, si vous avez déjà utilisé Bootstrap, vous pouvez facilement passer à SUI. être ce que Taobao donne aux perdants du premier plan. .

Github : https://github.com/sdc-alibaba/sui

Site officiel : http://sui.taobao.org/sui/docs/index.html

(Partage de vidéos d'apprentissage : web front- fin)

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!