Qu'est-ce que l'architecture frontale Web

L'architecture frontale Web est un ensemble d'outils et de processus conçus pour améliorer la qualité du code front-end et obtenir des flux de travail efficaces et durables. Il existe 4 cœurs de l'architecture frontale Web : 1. Code (HTML, CSS, JavaScript) ; 2. Processus, la manière d'utiliser les outils et les processus pour créer un flux de travail efficace et sans erreur est une considération importante ; créer une couverture Un programme de tests approfondi peut garantir que l'ancien code peut toujours fonctionner normalement. 4. Documentation, la documentation de conception est un outil pour vous permettre de communiquer avec les autres.

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

Aujourd'hui, avec l'évolution rapide de la technologie Web front-end, les projets Web front-end deviennent de plus en plus complexes. L'architecture frontale évoluera également avec nos besoins itératifs et notre technologie architecturale en constante évolution. C'est une question à laquelle non seulement les architectes mais aussi chacun de nos développeurs doivent prêter attention.

1. L'origine de l'architecture front-end Web

Lors de la conférence des développeurs CSS du 13 octobre 2014, « lever le drapeau de l'architecture front-end » dans une salle bondée du New Orleans Convention Center est devenu une lutte de première ligne C'est l'attrait commun de tous les développeurs. Après cela, les développeurs qui essayaient de comprendre qui ils étaient et quel rôle ils jouaient dans l'entreprise ont découvert qu'ils jouaient le rôle d'architecte front-end mais qu'ils n'avaient jamais détenu le titre ou qu'ils manquaient de confiance pour le faire. le pouvoir qui accompagne ce poste.

Quelques semaines après la conférence, de nombreuses personnes ont changé leur profil sur Twitter en « Front End Architect ».

2. Qu'entendez-vous par architecture front-end web ?

L'architecture frontale est comme la conception architecturale. Pendant le processus de construction, les concepteurs architecturaux doivent concevoir et planifier des plans, et suivre le processus de construction. Ceci est similaire au travail d’un architecte front-end, sauf que ce dernier construit des sites Web plutôt que des bâtiments. Les architectes consacrent plus d’efforts à concevoir la composition d’un projet qu’à couler le béton. De la même manière, les architectes front-end se concentrent davantage sur le développement d’outils et l’optimisation des processus que sur l’écriture de code spécifique.

L'architecture front-end est un ensemble d'outils et de processus conçus pour améliorer la qualité du code front-end et obtenir des flux de travail efficaces et durables.不 L'architecture de conception frontale n'est pas un travail une fois pour toutes. Aucune conception n'est parfaite au début, et il n'y a aucun plan à mettre en place.

La particularité de l'architecture front-end

Le front-end n'est pas un sous-système indépendant, mais couvre l'ensemble du système

Dispersion : ingénierie front-end

Abstraction, découplage et combinaison de pages

Contrôlable : échafaudages, spécifications de développement, etc. , gestion des exceptions, etc.

Trois principes de l'architecture frontale Web

1. Conception du système

Imaginez si un bâtiment n'a pas une conception structurelle claire et que toutes les questions importantes sont directement déterminées par les ouvriers du bâtiment, alors un tel scénario peut se produire : un mur est en pierre, le deuxième mur est en briques, le troisième mur est en bois et le quatrième mur est laissé vide pour des raisons de mode.

Bien que l'apparence générale et le ton du style du site Web soient entièrement déterminés par des concepteurs visuels expérimentés, les architectes front-end contrôlent les méthodes de développement front-end et la philosophie de conception du système qui les sous-tend. En concevant des spécifications système que suivent tous les développeurs front-end, les architectes front-end créent une image claire de la forme finale du produit et du code.

Une fois que l'architecte front-end aura établi les spécifications de conception du système, le projet disposera d'une norme pour mesurer la qualité du code. Sinon, comment pouvons-nous juger si le code répond aux normes ? Un système bien conçu doit disposer d'un mécanisme d'inspection complet et faire les compromis appropriés pour garantir que le code du système a une valeur substantielle et n'est pas simplement empilé.

2. Planification du travail

Après avoir une conception structurelle claire, vous devez formuler un flux de travail de développement. Quelles étapes un développeur doit-il suivre pour écrire une ligne de code et la soumettre en ligne ? Pour donner l'exemple le plus simple, ce processus consiste à se connecter au serveur via FTP, à modifier un fichier et à l'enregistrer. Cependant, pour la plupart des projets, le flux de travail complet peut utiliser plusieurs outils, tels que des contrôleurs de version, des planificateurs de tâches, des processeurs CSS, des outils de documentation, des composants de test et des outils d'automatisation de serveur.

L'objectif d'un architecte front-end est de concevoir un système qui fonctionne correctement. Ce système peut non seulement démarrer efficacement et rapidement, mais également fournir en permanence un retour d'information efficace grâce à l'analyse linguistique, aux cas de test, à la documentation et à d'autres méthodes, et réduire considérablement les erreurs humaines causées par des opérations répétées.

3. Supervision et suivi

La conception d'une architecture front-end n'est en aucun cas une tâche unique. Aucune conception n’est parfaite dès le départ, et aucun plan n’est parfait en une seule étape. Les besoins des clients et des développeurs évoluent avec le temps. Un processus de développement qui fonctionne bien à un moment donné devra peut-être être restructuré ultérieurement pour améliorer l'efficacité et réduire les erreurs.

Une capacité très importante d'un architecte front-end est la capacité à optimiser en permanence le flux de travail. Les différents outils de build actuels nous permettent de modifier facilement notre façon de travailler et d'informer chaque développeur.

Certaines personnes se demandent si les architectes front-end sont équivalents à des rôles de direction et n'ont plus besoin d'écrire du code métier. Les architectes front-end doivent non seulement écrire plus de code, mais ils doivent également être capables d'utiliser plusieurs langages de programmation et d'utiliser de nombreux outils. La quantité de code n'a pas diminué, seuls les lecteurs du code ont changé. Les développeurs front-end écrivent du code pour les utilisateurs finaux, tandis que les architectes front-end écrivent du code pour les développeurs de l'équipe.

4. Le cœur de l'architecture frontale du Web

1. Code

En dernière analyse, tous les sites Web sont composés d'un ensemble de fichiers texte et de fichiers de ressources composés de HTML, CSS et JavaScript. Lorsque nous sommes confrontés à la quantité de code nécessaire à la création d'un site Web, il devient évident à quel point il est important de définir des attentes en matière de code et de ressources.

2. Processus

Comment utiliser les outils et les processus pour créer un flux de travail efficace et sans erreur est une considération importante. Les workflows deviennent de plus en plus complexes, tout comme les outils utilisés pour les créer. Ces outils apportent des résultats étonnants en termes d’augmentation de la productivité, d’accélération de l’efficacité et de maintien de la cohérence du code, mais ils comportent également un risque de sur-ingénierie et d’abstraction.

3. Tests

Pour construire un système évolutif et optimisé en permanence, nous devons nous assurer que le nouveau code est bien compatible avec l'ancien code. Notre code n'existera pas de manière isolée, ils font tous partie d'un grand système, créez un. plan de test avec une couverture étendue pour garantir que l’ancien code peut toujours fonctionner normalement.

4. Documentation

La documentation de conception est un outil qui vous permet de communiquer avec les autres, d'expliquer quelles sont vos décisions de conception, d'expliquer quelles sont vos décisions de conception et pourquoi vos décisions sont bonnes. À moins qu’un membre clé de l’équipe ne parte, rares sont ceux qui réaliseront l’importance de la documentation.

Ces quatre noyaux constituent la base de la construction d'un système évolutif et optimisé de manière durable.

(Partage de vidéos d'apprentissage : Démarrer avec le front-end Web)

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!