Comment comprendre «l'ingénierie front-end»?

Faites attention au compte officiel WeChat "frontal et arrière", vous obtiendrez une série d'articles techniques de haute qualité "intentionnellement originaux", des sujets comprenant, mais sans s'y limiter, le front-end, Node.js et la technologie côté serveur

1. Qu'est-ce que l'ingénierie frontale?
Un terme similaire est le génie logiciel:

Software engineering is the systematic application of engineering approaches to the development of software.

L'application systématique de méthodes d'ingénierie au développement de logiciels est appelée génie logiciel. Ensuite, il y a deux autres questions immédiatement:

• Quelle est la méthode d'ingénierie?

• Comment comprendre la systématisation?

L'ingénierie fait référence à l'utilisation de principes scientifiques pour concevoir et fabriquer des machines, des structures, etc., tels que la réparation de ponts, le pavage de routes, la construction de tunnels, la construction de voitures et la construction de maisons:

Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.

Plus précisément dans le domaine des logiciels, il se réfère au développement, à l'exploitation et à la maintenance de logiciels de manière systématique, rigoureuse et quantifiable. Le génie logiciel comprend l'application et la recherche de ces méthodes:

Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.

La soi-disant systématisation peut être comprise comme ces méthodes d'ingénierie utilisées dans le cycle de vie du logiciel sont complémentaires, chacune résolvant une partie du problème et travaillant ensemble pour assurer la qualité et la rapidité de livraison du logiciel.

En résumé, l'ingénierie frontale peut être définie comme l'application systématique de méthodes d'ingénierie au développement frontal, et le développement, l'exploitation et la maintenance d'applications frontales dans une méthode systématique, rigoureuse et quantifiable.

2. L'évolution de l'ingénierie frontale
s'intéresse également d'abord à l'ingénierie logicielle, et son développement a connu les points clés suivants:

• Le matériel informatique est abstrait dans l'architecture von Neumann, et il y a une distinction entre le logiciel et le matériel

• Avec l'augmentation de la complexité logicielle, les concepts de modularité et de dissimulation d'informations ont été proposés

• Afin de comprendre et de gérer le processus de développement logiciel, le génie logiciel est devenu un domaine professionnel

• Afin d'évaluer les capacités de l'équipe de développement logiciel, le standard de mesure de la maturité (CMMI-DEV) est formé

• Basé sur les meilleures pratiques de l'ingénierie logicielle moderne, un système de connaissances en génie logiciel généralement accepté a été mis en place

L'ingénierie front-end est passée par un processus similaire:

• L'essor de l'architecture B / S a conduit à une distinction entre front-end et back-end

• Avec l'augmentation de la complexité du front-end, la réutilisation des modules et les spécifications pratiques deviennent de plus en plus importantes

• Afin de gérer et de simplifier le processus de développement frontal, des cadres frontaux, des systèmes d'automatisation et de construction ont émergé et se sont développés rapidement.

• Sur la base des meilleures pratiques de l'industrie, des cadres prêts à l'emploi (tels que dva) et des systèmes d'outils sont progressivement mis en place

Le front-end devient de plus en plus lourd et complexe, et le système d'ingénierie front-end de soutien se développe et s'améliore constamment, ce qui peut être simplement divisé en trois grandes lignes: développement, construction et publication:

• Framework front-end: plug-in (jQuery) -> modulaire (RequireJS) -> composant (React)

• Outil de construction: tâche (grunt / gulp) -> système (webpack)

• CI / CD: Outillage (Jenkins) -> Automatisation (Web Hook)

Les trois axes principaux soutiennent le système d'ingénierie front-end et couvrent systématiquement le processus principal de développement front-end. Les méthodes d'ingénierie sont également complémentaires et s'influencent mutuellement, ce qui se traduit par:

• L'outil de construction permet au framework frontal et à la bibliothèque de classes de fonctionner ensemble de manière transparente

• Les frameworks frontaux et les bibliothèques de classes affectent également les outils de construction (tels que le chargement de modules, le prétraitement CSS), et même CI / CD (tels que ***) dans une certaine mesure

3. Système d'ingénierie front-end dans une perspective orientée processus

（摘自 Livre de l'outillage frontal moderne）

Un flux de travail frontal typique est divisé en 5 étapes:

• Développement

• tester

• Construction

• déployer

• moniteur

De l'échafaudage au système de surveillance, le système d'ingénierie front-end de support a été intégré dans chaque lien du flux de travail frontal, ce qui détermine en grande partie l'efficacité de la production frontale.

Les étapes d'analyse et de conception avant le lien de développement PS ne sont pas effectuées ici, car les méthodes traditionnelles de génie logiciel sont également applicables, et les projets front-end ne sont pas très spécifiques à ce stade.

La
tâche principale de la phase de développement est de créer un modèle pour la phase de développement du projet (cadre frontal, bibliothèque), puis de commencer à modifier - la vérification de la boucle principale, principalement liée à ces installations d'ingénierie:

• Échafaudage: créez une structure de répertoires pour les applications frontales et générez un code standard

• Bibliothèque publique: gère les ressources publiques telles que les composants d'interface utilisateur réutilisables et les modules d'outils

• Gestionnaire de packages: présentez des bibliothèques / composants tiers, puis suivez et gérez ces dépendances

• Éditeur: fournit des fonctions telles que la coloration syntaxique, les invites intelligentes et les sauts de référence pour améliorer l'expérience de développement

• Outils de construction: Fournissez des fonctions telles que la vérification de la syntaxe, la compilation, le packaging, DevServer, etc. pour simplifier le flux de travail

• Kit de débogage: fournit des fonctions de débogage telles que l'aperçu, DevTools, Mock, l'analyse des performances et le diagnostic, accélérant la boucle principale de modification-vérification

Une fois le
développement de la phase de test terminé et le début de la phase de test, la fonction globale doit être entièrement autotestée, puis remise à des testeurs professionnels pour vérification. Les installations d'ingénierie qui doivent être utilisées dans le processus sont les suivantes:

• Cadre de test unitaire: fournir un support de test pour les composants et la logique

• Outil d'analyse statique: inspection statique à partir de plusieurs dimensions telles que la qualité du code, la qualité du produit de construction, les meilleures pratiques / protocole de développement, etc.

• Outils de test automatisés: fournir une assistance de test pour les effets de l'interface utilisateur et les processus métier

• Outils de test de performance: surveillez et comptez des données de performance relativement précises

La phase de construction est
différente de la phase de développement. Dans la phase de construction, une optimisation plus extrême et un couplage des processus doivent être effectués, impliquant:

• Script d'empaquetage: sur la base de la vérification grammaticale, de la compilation et de l'empaquetage, des optimisations extrêmes telles que la fusion, la compression, le fractionnement de code, le traitement d'image et *** sont effectuées

• Service de création: prise en charge de l'empaquetage et de la notification parallèles multi-tâches

À la fin de la phase de déploiement, l'
application frontale entièrement testée est déployée dans l'environnement de production et ces outils d'ingénierie sont nécessaires:

• Plateforme de publication: téléchargez des ressources frontales vers des services de rendu CDN ou ***, ou intégrez-les aux clients mobiles sous la forme de packages hors ligne

• Plateforme de gestion des itérations: fournir un support CI / CD

Une fois l'
application frontale mise en ligne dans la phase de surveillance , il est nécessaire de continuer à faire attention aux effets réels et aux conditions anormales en ligne, et à s'appuyer sur ces installations d'ingénierie:

• Plateforme Buried Point: statistiques et analyse des données métiers, suivi des indicateurs de performance

• Plateforme de surveillance: observez les informations anormales en ligne, y compris les rapports d'erreur, les écrans blancs, le trafic anormal, etc.

4. Connexion entre les processus
Outre les installations d'ingénierie à chaque étape du flux de travail, une autre partie de l'ingénierie frontale est la connexion entre les processus. Le premier vise à améliorer l'efficacité de la production, tandis que le second vise à résoudre le problème de l'expérience

En général, l'évolution de l'ingénierie front-end se traduit par deux aspects:

• Mode de collaboration: principalement exprimé sous forme de nouvelles idées et de nouvelles architectures, telles que BFF / SFF

• Modèle de développement: incarné dans une nouvelle couche d'abstraction, un nouveau flux de travail, tel que Sass, React, webpack et même Cloud IDE

Qu'il s'agisse d'un changement dans la répartition des responsabilités ou d'un changement de contenu de travail spécifique, pour les développeurs, cela signifie plus de coûts d'apprentissage et de compréhension, et se manifeste finalement dans l'expérience de développement. Les installations d'ingénierie orientées vers la connexion entre les processus sont conçues pour alléger le coût de mise à niveau et d'adaptation causé par ces changements, et pour sortir en douceur de la période de transition

Par exemple:

• codemod: connectez les anciens et les nouveaux frameworks frontaux pour réduire les coûts de mise à niveau et d'adaptation

• dva: connectez divers excellents concepts dans l'écosystème React (redux, redux-saga, etc.) pour réduire les coûts d'apprentissage

• IDE: d'une part, il intègre un ensemble complet d'installations d'ingénierie pour réduire le coût de démarrage, et d'autre part, il connecte toutes les étapes du flux de travail pour améliorer l'expérience de développement

Idéalement, l'ingénierie frontale doit non seulement optimiser en permanence le mode de collaboration et améliorer l'efficacité du développement, mais également garantir une expérience pratique prête à l'emploi, une expérience de connexion unique et une expérience de mise à niveau de commutation transparente.

V. Résumé
Du point de vue des processus, l'ingénierie frontale est une série d'installations d'ingénierie tout au long du cycle de vie des applications frontales pour garantir l'expérience de développement, la qualité et la vitesse de livraison des applications frontales

Plus précisément, l'ingénierie frontale s'articule autour des trois grandes lignes de développement, de construction et de mise en production, et utilise l'outillage et l'automatisation pour résoudre les problèmes rencontrés dans chaque lien. D'une part, il contrôle la complexité du développement frontal et améliore l'efficacité de la production frontale. D'autre part, il réduit les coûts de migration et d'adaptation causés par les mises à niveau de l'architecture et les changements de mode de collaboration, et améliore l'expérience de développement.