¿Cuáles son las soluciones comunes de implementación de integración front-end? ¿Cuáles son sus ventajas y desventajas?
La industria front-end ha experimentado un período de desarrollo tan largo y tiene elementos técnicos muy ricos. Estos son los elementos técnicos que los equipos web generales deben utilizar:
Especificaciones de desarrollo: incluyendo desarrollo e implementación de especificaciones de directorio, especificaciones de codificación, etc. No subestime el poder de las especificaciones, que pueden mejorar en gran medida la eficiencia del desarrollo. Las especificaciones verdaderamente excelentes no harán que los usuarios se sientan limitados, pero pueden ayudarlos a localizar problemas rápidamente y mejorar la eficiencia.
Desarrollo modular: Para js y css, el código se organiza en unidades funcionales o de negocio. En el lado js, resuelve problemas como el alcance independiente, la gestión de dependencias, la exposición de API, la carga y ejecución bajo demanda y la fusión segura. En el lado css, resuelve problemas como la gestión de dependencias y la gestión de estilos internos de componentes. Es una base importante para mejorar la eficiencia del desarrollo front-end. Los marcos modulares populares ahora incluyen requirejs, seajs, etc.
Desarrollo de componentes: sobre la base de la modularización, los fragmentos de código js, css y html de los widgets de página se combinan para el desarrollo y mantenimiento en unidades de widgets de página (componente). Los componentes independientes se pueden reutilizar dentro del sistema. Por ejemplo, encabezado, pie de página, barra de búsqueda, menú, cuadro de diálogo, etc., e incluso algunos componentes complejos como el editor. Por lo general, la empresa llevará a cabo la encapsulación necesaria para la parte js en componentes para resolver algunos problemas comunes de representación e interacción de componentes.
Almacén de componentes: con la componenteización, esperamos colocar algunos componentes muy comunes en un lugar público para que el equipo los comparta para facilitar la reutilización en nuevos proyectos. En este momento necesitamos introducir bibliotecas de componentes populares. ahora incluye glorieta, componente, etc. Una vez que el equipo alcance un cierto tamaño, la necesidad de bibliotecas de componentes será muy fuerte.
Optimización del rendimiento: aquí la optimización del rendimiento se refiere a los puntos de optimización del rendimiento que se pueden garantizar mediante medios de ingeniería. Dado que el contenido es relativamente rico, no lo ampliaré aquí. Los estudiantes interesados pueden leer mis dos artículos [1] [2]. La optimización del rendimiento es un proceso por el que deben pasar los proyectos front-end cuando se desarrollan hasta una determinada etapa. El punto que quiero enfatizar en esta parte es que la optimización del rendimiento debe ser un problema de ingeniería y la optimización del rendimiento que no se puede garantizar por medios de ingeniería no es confiable. Al optimizar, solo se considera la primera carga de una página. Las estadísticas macro generales no se consideran. La optimización y la mejora tampoco son unilaterales.
Implementación del proyecto: la implementación sigue la división actual de los estándares laborales de la industria. Aunque no es el alcance del trabajo front-end, tiene un impacto directo en la optimización del rendimiento, incluidos problemas como el almacenamiento en caché de recursos estáticos y CDN. y publicaciones sin cobertura. La implementación razonable de recursos estáticos puede brindar un mayor espacio de optimización para el rendimiento del front-end.
Proceso de desarrollo: el proceso de desarrollo completo incluye desarrollo y depuración local, revisión y confirmación de efectos visuales, depuración conjunta de front-end y back-end, pruebas y lanzamiento. Mejorar el proceso de desarrollo puede reducir significativamente el costo de tiempo del desarrollo. En los últimos años, he visto muchos sistemas independientes (sistema cms, sistema de envío de recursos estáticos) separar el proceso de desarrollo, lo que ha obstaculizado seriamente la eficiencia del desarrollo front-end. .
Herramientas de desarrollo: las herramientas mencionadas aquí no se refieren a IDE, sino a herramientas de ingeniería, incluidas herramientas de construcción y optimización, desarrollo-depuración-implementación y otras herramientas de proceso, así como adquisición, envío y otros de bibliotecas de componentes. herramientas relacionadas, e incluso operaciones, documentación, lanzamiento de configuración y otras herramientas de la plataforma. El desarrollo de front-end requiere soporte de herramientas. La causa principal de este problema proviene de las características del lenguaje del campo de front-end (escribiré un artículo separado en el futuro para presentar los defectos del lenguaje del campo de front-end). Los lenguajes utilizados en el desarrollo front-end (js, css, html) y las estrategias de carga y posicionamiento de los recursos de ingeniería front-end determinan que la ingeniería front-end debe contar con soporte de herramientas. Dado que estas herramientas suelen ser sistemas independientes, si quieres conectarlas en serie, tienes paquetes como yeoman.
Los siete elementos técnicos mencionados anteriormente tienen directa o indirectamente un cierto impacto en el diseño de las herramientas de desarrollo front-end. Por lo tanto, si se pueden conectar otros elementos técnicos en serie para hacer que el desarrollo front-end forme un sistema de desarrollo optimizado coherente y sostenible. El diseño de las herramientas es crucial.