Preste atención a la cuenta oficial de WeChat "front-end y backward", obtendrá una serie de artículos técnicos de alta calidad "intencionalmente originales", temas que incluyen pero no se limitan a front-end, Node.js y tecnología del lado del servidor.
1. ¿Qué es la ingeniería de front-end?
Un término similar es Ingeniería de software:
Software engineering is the systematic application of engineering approaches to the development of software.
La aplicación sistemática de métodos de ingeniería al desarrollo de software se denomina ingeniería de software. Entonces, hay dos preguntas más de inmediato:
-
¿Qué es el método de ingeniería?
- ¿Cómo entender la sistematización?
La ingeniería se refiere al uso de principios científicos para diseñar y fabricar máquinas, estructuras, etc., tales como reparar puentes, pavimentar carreteras, construir túneles, construir automóviles y construir casas:
Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.Específicamente en el campo del software, se refiere al desarrollo, operación y mantenimiento de software de forma sistemática, rigurosa y cuantificable. La ingeniería de software comprende la aplicación e investigación de estos métodos:
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 llamada sistematización puede entenderse como estos métodos de ingeniería utilizados en el ciclo de vida del software son complementarios, cada uno de los cuales resuelve una parte del problema y trabaja en conjunto para asegurar la calidad y velocidad de entrega del software.
En resumen, la ingeniería de front-end se puede definir como la aplicación sistemática de métodos de ingeniería al desarrollo de front-end para desarrollar, operar y mantener aplicaciones de front-end en un método sistemático, riguroso y cuantificable.
2. La evolución de la ingeniería de front-end
también se centra en la ingeniería de software en primer lugar, y su desarrollo ha experimentado estos puntos clave:
-
El hardware de la computadora se abstrae en la arquitectura de von Neumann, y existe una distinción entre software y hardware
-
Con el aumento de la complejidad del software, se han propuesto los conceptos de modularidad y ocultación de información.
-
Para comprender y gestionar el proceso de desarrollo de software, la ingeniería de software se ha convertido en un campo profesional.
-
Para evaluar las capacidades del equipo de desarrollo de software, se forma el estándar de medición de madurez (CMMI-DEV)
- Basado en las mejores prácticas de la ingeniería de software moderna, se ha establecido un sistema de conocimiento de ingeniería de software generalmente aceptado
La ingeniería de front-end ha pasado por un proceso similar:
-
El auge de la arquitectura B / S, y luego están los puntos de front-end y back-end
-
Con el aumento de la complejidad del front-end, la reutilización de módulos y las especificaciones de práctica son cada vez más importantes.
-
Con el fin de gestionar y simplificar el proceso de desarrollo de front-end, surgieron y se desarrollaron rápidamente marcos de front-end, automatización y sistemas de construcción.
- Con base en las mejores prácticas de la industria, se establecen gradualmente marcos de trabajo listos para usar (como dva) y sistemas de herramientas.
El front-end se está volviendo más pesado y complejo, y el sistema de ingeniería del front-end de apoyo se desarrolla y mejora constantemente, que se puede dividir simplemente en tres líneas principales: desarrollo, construcción y lanzamiento:
-
Marco de interfaz de usuario: complemento (jQuery) -> modular (RequireJS) -> componente (React)
-
Herramienta de construcción: tarea (gruñido / trago) -> sistema (paquete web)
- CI / CD: Herramientas (Jenkins) -> Automatización (Web Hook)
Las tres líneas principales apuntalan el sistema de ingeniería de front-end y cubren sistemáticamente el proceso principal de desarrollo de front-end. Los métodos de ingeniería también son complementarios y se influyen mutuamente, lo que se refleja en:
-
La herramienta de compilación permite que el marco front-end y la biblioteca de clases funcionen juntos sin problemas
- Los frameworks front-end y las bibliotecas de clases también afectan las herramientas de compilación (como la carga de módulos, el preprocesamiento de CSS) e incluso CI / CD (como ***) hasta cierto punto
3. Sistema de ingeniería de front-end desde una perspectiva orientada a procesos
（摘自 Libro de herramientas modernas de front-end）
Un flujo de trabajo típico de front-end se divide en 5 pasos:
-
Desarrollo
-
prueba
-
Construir
-
desplegar
- monitor
Desde el andamio hasta el sistema de monitoreo, el sistema de ingeniería de front-end de apoyo se ha integrado en cada enlace del flujo de trabajo de front-end, lo que determina en gran medida la eficiencia de producción de front-end.
Las etapas de análisis y diseño antes del enlace de desarrollo de PS no se llevan a cabo aquí, porque los métodos tradicionales de ingeniería de software también son aplicables y los proyectos de front-end no son muy específicos en esta etapa.
La
tarea principal de la fase de desarrollo es crear un modelo para la fase de desarrollo del proyecto (marco front-end seleccionado colectivamente, biblioteca), y luego comenzar a modificar - la verificación del bucle principal, principalmente relacionada con estas instalaciones de ingeniería:
-
Scaffolding: cree una estructura de directorio para aplicaciones front-end y genere código repetitivo
-
Biblioteca pública: mantiene recursos públicos como componentes de IU reutilizables y módulos de herramientas.
-
Administrador de paquetes: introduzca bibliotecas / componentes de terceros y realice un seguimiento y administre estas dependencias
-
Editor: proporciona funciones como resaltado de sintaxis, indicaciones inteligentes y saltos de referencia para mejorar la experiencia de desarrollo.
-
Herramientas de construcción: proporcione funciones como verificación de sintaxis, compilación, empaquetado, DevServer, etc. para simplificar el flujo de trabajo
- Kit de depuración: proporciona funciones de depuración como vista previa, DevTools, Mock, análisis de rendimiento y diagnóstico, acelerando el ciclo principal de verificación de modificaciones.
Una vez que se completa el
desarrollo de la fase de prueba y se ingresa a la fase de prueba, la función general debe autocomprobarse por completo y luego entregarse a probadores profesionales para su verificación. Las instalaciones de ingeniería que deben usarse en el proceso son:
-
Marco de prueba unitaria: proporciona soporte de prueba para componentes y lógica
-
Herramienta de escaneo estático: inspección estática desde múltiples dimensiones, como la calidad del código, la calidad del producto de construcción, las mejores prácticas / protocolo de desarrollo, etc.
-
Herramientas de prueba automatizadas: brindan soporte de prueba para efectos de IU y procesos comerciales
- Herramientas de prueba de rendimiento: supervise y cuente datos de rendimiento relativamente precisos
La fase de construcción es
diferente a la fase de desarrollo. En la fase de construcción, se debe realizar una optimización más extrema y una vinculación del proceso, involucrando:
-
Script de empaquetado: sobre la base de la verificación gramatical, la compilación y el empaquetado, se realizan optimizaciones extremas como fusión, compresión, división de código, procesamiento de imágenes y ***
- Servicio de compilación: admite el empaquetado y la notificación en paralelo de múltiples tareas
Al final de la fase de implementación, la
aplicación front-end completamente probada se implementa en el entorno de producción y se requieren estas herramientas de ingeniería:
-
Plataforma de publicación: cargue recursos de front-end en CDN o servicios de representación ***, o integre en clientes móviles en forma de paquetes fuera de línea
- Plataforma de gestión de iteraciones: proporciona compatibilidad con CI / CD
Una vez que la
aplicación de front-end se pone en línea en la fase de monitoreo , es necesario seguir prestando atención a los efectos reales y las condiciones anormales en línea, y confiar en estas instalaciones de ingeniería:
-
Plataforma de puntos enterrados: estadísticas y análisis de datos comerciales, seguimiento de indicadores de rendimiento
- Plataforma de monitoreo: observe información anormal en línea, incluidos informes de errores, pantallas blancas, tráfico anormal, etc.
4. Conexión entre procesos
Además de las instalaciones de ingeniería en cada etapa del flujo de trabajo, otra parte de la ingeniería de front-end es la conexión entre procesos. El primero tiene como objetivo mejorar la eficiencia de la producción, mientras que el segundo tiene como objetivo resolver el problema de la experiencia
En general, la evolución de la ingeniería de front-end se refleja en dos aspectos:
-
Modo de colaboración: expresado principalmente como nuevas ideas y nuevas arquitecturas, como BFF / SFF
- Modelo de desarrollo: incorporado en una nueva capa de abstracción, un nuevo flujo de trabajo, como Sass, React, webpack e incluso Cloud IDE
Ya sea un cambio en la división de responsabilidades o un cambio en el contenido del trabajo específico, para los desarrolladores, significa más costos de aprendizaje y comprensión, y finalmente se manifiesta en la experiencia de desarrollo. Las instalaciones de ingeniería orientadas a la conexión entre procesos están diseñadas para aliviar el costo de actualización y adaptación causado por estos cambios, y para salir sin problemas del período de transición.
P.ej:
-
codemod: conecte los marcos frontales antiguos y nuevos para reducir los costos de actualización y adaptación
-
dva: conecte varios conceptos excelentes en el ecosistema React (redux, redux-saga, etc.) para reducir los costos de aprendizaje
- IDE: por un lado, incluye un conjunto completo de instalaciones de ingeniería para reducir el costo de comenzar y, por otro lado, conecta todas las etapas del flujo de trabajo para mejorar la experiencia de desarrollo.
Idealmente, la ingeniería de front-end no solo debería optimizar continuamente el modo de colaboración y mejorar la eficiencia del desarrollo, sino que también debería garantizar una experiencia práctica lista para usar, una experiencia de conexión única y una experiencia de actualización de conmutación sin interrupciones.
V. Resumen
Desde una perspectiva orientada a los procesos, la ingeniería front-end es una serie de instalaciones de ingeniería a lo largo del ciclo de vida de las aplicaciones front-end para garantizar la experiencia de desarrollo, la calidad y la velocidad de entrega de las aplicaciones front-end.
Específicamente, la ingeniería de front-end gira en torno a las tres líneas principales de desarrollo, construcción y lanzamiento, y utiliza herramientas y automatización para resolver los problemas encontrados en cada enlace. Por un lado, controla la complejidad del desarrollo de front-end y mejora la eficiencia de producción de front-end. Por otro lado, reduce los costos de migración y adaptación causados por actualizaciones de arquitectura y cambios de modo de colaboración, y mejora la experiencia de desarrollo.