Web Notes
1.0.0
Leer en línea >>
Casos de código · Materiales de referencia
El desarrollo web es fácil de comenzar, pero es difícil de conocer. Se divide en etapas como el primer vistazo a la puerta, ingresa a la habitación e integrando todo el proceso. Si está leyendo la serie de artículos del autor por primera vez, se recomienda ir a la ruta técnica de cierto oso para una comprensión integral. En esta serie, el autor se compromete a explorar cómo mejorar de manera efectiva la eficiencia de I + D del equipo y la entrega completa de manera oportuna y confiable durante todo el ciclo de vida de la iteración del producto; Al mismo tiempo, puede controlar la complejidad general del sistema y optimizar continuamente el rendimiento y la experiencia del sistema.
Mirando hacia atrás en los cambios brillantes en la tecnología web y la ecología en las últimas décadas, hemos experimentado cambios emocionantes y a menudo estamos perdidos en la confusión de elección. Con la innovación de las versiones del navegador y la mejora del rendimiento del hardware, el desarrollo del front-end web ha entrado en una era rápida y cambiante. Innumerables marcos de desarrollo front-end y sistemas técnicos compiten por la belleza, lo que ha dejado a los desarrolladores confundidos e incluso con pérdidas. Especialmente con la aparición de marcos de front-end web modernos (Angular, React, Vue.js), la mejora de las características del lenguaje como JavaScript, CSS, HTML, etc., y los conceptos teóricos propuestos, como la ingeniería, la formulación cruzada, micro front-end, gran front-end, y BFF, la pila de tecnología y la comunidad para el desarrollo de la red interna también están constantemente en constante enriquecimiento y mejorado. estado. En cuanto a los llamados ingenieros modernos front-end, generalmente necesitan utilizar muchos conocimientos profesionales para resolver problemas de ingeniería, incluida cómo modularizar el proyecto, cómo diseñar interacciones entre componentes, cómo mejorar la reutilización, cómo mejorar la eficiencia del embalaje, optimizar el rendimiento de la renderización del navegador, etc.; Ya no como antes, solo necesitan rutina HTML/CSS/JS para desarrollar páginas estáticas.
En general, cualquier ecosistema de programación pasará por tres etapas, en primer lugar, el período original. Dado que es necesario ampliar el lenguaje y las API básicas, esta etapa dará a luz a una gran cantidad de herramientas auxiliares. En la segunda etapa, a medida que las cosas que se hacen se vuelven más complejas, se necesitan más organizaciones y se introducirán una gran cantidad de patrones de diseño y patrones arquitectónicos. Esta etapa dará a luz a una gran cantidad de marcos. En la tercera etapa, con la mayor complejidad de la demanda y la expansión del equipo, ingresó a la etapa de ingeniería, y surgieron varios sistemas jerárquicos de MVC, MVP, MVVM, etc., desarrollo visual, pruebas automatizadas y sistemas de colaboración de equipo.
Curiosamente, cuando nos encontramos en diferentes puntos, la división de estas tres etapas también es inconsistente. Según la comprensión actual del autor, se divide en tres etapas diferentes: representación de plantillas, separación frontal y aplicación de una sola página, ingeniería y micro front-end, gran front-end y sin servidor.
Por supuesto, cada etapa pequeña irá acompañada por la aparición de nuevos marcos y nuevas herramientas:
El desarrollo del frente web se remonta a la mención pública de Tim Berners-Lee sobre la descripción HTML en 1991, y luego W3C lanzó el estándar HTML4 en 1999. Esta etapa fue principalmente B/S Architecture, y no hubo el llamado concepto de desarrollo front-end. En este momento, eran principalmente páginas estáticas basadas en la representación de plantillas. Lo principal es escribir algunas plantillas dinámicas a través de JSP, PHP y otras tecnologías, y luego analizar las plantillas en archivos HTML a través del servidor web. El navegador solo es responsable de representar estos archivos HTML. No hay división del trabajo de parto entre los extremos delanteros y traseros en esta etapa, y generalmente el ingeniero de back -end escribe la página delantera.
En los próximos años, con la introducción de estándares arquitectónicos como la tecnología Ajax y el descanso, los conceptos de separación frontal y un cliente rico se están volviendo cada vez más reconocidos. Necesitamos ampliar el lenguaje y las API básicas. En esta etapa, han surgido una serie de herramientas auxiliares frontales representadas por JQuery. Basado en Ajax, los extremos delanteros y traseros también han abierto el camino de la separación, y la arquitectura de separación delantera y trasera se ha vuelto popular gradualmente. El front-end es responsable de la interfaz y la interacción, y el back-end es responsable del procesamiento de la lógica comercial. Los extremos delanteros y traseros interactúan a través de la interfaz. Ya no necesitamos escribir HTML difícil de mantener en cada lenguaje de backend. La complejidad de las páginas web también ha cambiado del servidor web de backend al javascript del lado del navegador.
Desde 2009, el desarrollo de los teléfonos inteligentes se ha vuelto popular, y la ola de terminales móviles ha sido imparable. El concepto de diseño de la aplicación SPA de una sola página también se ha vuelto popular. La modularidad frontal relacionada, la componente, el desarrollo receptivo, el desarrollo híbrido y otras tecnologías son urgentes. Especialmente la aparición de Node.js en 2009, así como las especificaciones de CommonJs y el mecanismo de gestión de paquetes de NPM, dieron a luz a una serie de excelentes marcos como Angular 1 e Ionic, así como estándares de módulos como AMD, CMD, UMD, necesidades, SEAJS y herramientas como el gruñido y el Gulp. Los ingenieros front-end también se han convertido en un campo de desarrollo especial, con un sistema técnico y un modelo de arquitectura independiente del backend.
En el pasado, solo necesitábamos HTML y JS simples. Ahora teníamos que usar el Administrador de paquetes para descargar automáticamente los paquetes de terceros, usar el administrador del módulo para crear un solo archivo de script, usar el compilador de traducción para aplicar nuevas funciones de JavaScript y usar el corredor de tareas para ejecutar automáticamente cada paso de construcción.
En los últimos dos años, con el aumento en la complejidad de las aplicaciones web, la expansión del personal del equipo y la demanda del usuario de amistad de interacción de página y optimización del rendimiento, necesitamos un marco de desarrollo más excelente y flexible para ayudarnos a completar mejor el desarrollo front-end. Esta etapa ha surgido muchos marcos con preocupaciones relativamente concentradas y mejores conceptos de diseño. Por ejemplo, los marcos de componentes como React, Vue.js y Angular 2 nos permiten reemplazar la programación imperativa con operaciones DOM como el núcleo con programación declarativa, lo que acelera el desarrollo de los componentes y mejora la reutilización y composibilidad de los componentes. Redux, que sigue a la programación funcional, y MOBX, que toma prestado el concepto de programación receptiva, son muy buenos marcos auxiliares de gestión estatal, ayudando a los desarrolladores a separar la lógica empresarial de la representación de la vista, dividir la estructura del proyecto con mayor razón, implementar mejor el principio de responsabilidad única y mejorar la mantenibilidad del código. En las herramientas de construcción de proyectos, la gestión de la operación de tareas representada por las herramientas de embalaje gruñidos y gulp y proyectos representadas por Webpack, Rollup y JSPM están liderando el camino, ayudando a los desarrolladores a construir mejor procesos de construcción front-end y realizar preprocesamiento, carga asíncrona, polifilling, compresión y otras operaciones de una manera automatizada.
La madurez de la cadena de herramientas también ha provocado la demanda de ingeniería, con la tecnología y la tecnología líder en negocios que impulsan la tecnología. La ingeniería frontal es estandarizar y estandarizar el proceso de desarrollo front-end, la tecnología, las herramientas, la experiencia, etc. en función de las características comerciales específicas. Su propósito es permitir que el desarrollo frontal forme su propio sistema, maximice la eficiencia de desarrollo de los ingenieros front-end y reduzca los costos de coordinación y comunicación causados por la selección de tecnología, la puesta en marcha conjunta de front-end, etc.
La propia complejidad lógica de la aplicación, la carga de ingeniería y las mejoras de complejidad de combinación también traen ciertos desafíos al rendimiento del front-end. Por ejemplo, los marcos de componentes como React tendrán tiempo de pantalla blanco cuando la inicialización de la página, que no es amigable con SEO; El front-end ha comenzado a tratar de resolver este problema a través de la representación del servidor y reemplazar las plantillas de lenguajes de servidor como JSP y PHP basados en aplicaciones isomórficas implementadas por React, Vue, etc., o devolverlas al navegador en forma de un documento HTML completo.
Centrarse en la pila completa, después de años de desarrollo, Node.js ha poseído plenamente la capacidad de apoyar aplicaciones de nivel empresarial y tiene una gran cantidad de prácticas en muchas empresas nacionales y extranjeras como Lowe, Netflix y Alibaba. Además, Node.js tiene una afinidad del lenguaje natural, lo que facilita a los desarrolladores asumir las responsabilidades de la pila completa. Con el aumento de conceptos como la arquitectura de microservicio y el nativo de la nube y el servidor sin servidor, las interfaces de backend gradualmente se vuelven atómicas, y las interfaces de microservicio ya no se enfrentan directamente a la página, y las llamadas frontales se han complicado. Por lo tanto, el concepto BFF (Backend for Frontend) representado por GraphQL surgió. Se agregó una capa de BFF entre el microservicio y el front-end, y la interfaz fue agregada y recortada por BFF, y luego salió al extremo frontal.
Mientras resuelve los problemas de coordinación y agregación de la interfaz, BFF también tiene la presión concurrente original sobre el backend, lo que también aporta mucha presión de desarrollo y operación y mantenimiento a los ingenieros frontales. Sin servidor puede aliviar este problema. Podemos usar funciones para implementar la agregación y el cultivo de interfaces; La solicitud de front-end para BFF se convierte en un disparador para los desencadenantes FAAS HTTP. Esta función implementa la lógica comercial para la solicitud, como llamar a múltiples microservicios para obtener datos y luego devolver los resultados de procesamiento al front-end. De esta manera, la presión de operación y mantenimiento ha cambiado del servidor BFF anterior a los servicios FAAs, y el front-end ya no tiene que preocuparse por el servidor. Sin servidor también se puede aplicar a la representación del lado del servidor, dividir cada ruta anterior en funciones y luego implementar las funciones correspondientes en FAA. De esta manera, la ruta solicitada por el usuario corresponde a cada función individual. De esta manera, las operaciones de operación y mantenimiento se transfieren a la plataforma FAAS. Cuando el front-end presenta el lado del servidor, no es necesario que se preocupe por la implementación de operación y mantenimiento del programa del servidor. Además, los mini programas como WeChat y Alipay también proporcionan plataformas de desarrollo en la nube que se ajustan a conceptos sin servidor, lo que empodera la rápida iteración de los front-end comerciales.
Para obtener más información y guías, consulte Introducción.
Versión china | Versión en inglés
Si usted es un desarrollador muy experimentado y desea saber sobre la ingeniería y la arquitectura front-end, se recomienda leer el artículo front-end Evolution.
Si no tiene una comprensión completa de la sintaxis básica de JavaScript, se recomienda que primero busque "conceptos básicos de sintaxis de JavaScript modernos y práctica de ingeniería" para comprender la sintaxis básica de JavaScript y las aplicaciones prácticas.
Si desea comprender el desarrollo de Node.js Full Stack, puede consultar notas de nodos.
Después de comprender el conocimiento teórico, se recomienda ir a WX-FE para verificar todos los proyectos de código abierto relacionados con el front-end del autor.
Todos los artículos del autor están sujetos a Creative Commons Attribution-No-Commercial Use Prohibited Explication 4.0 International. La reimpresión es bienvenida y se respeta los derechos de autor. También puede ir a la página de inicio de NGTE Books para navegar por una lista de libros para múltiples categorías que incluyen un sistema de conocimiento, lenguaje de programación, ingeniería de software, modelo y arquitectura, web y gran front-end, práctica de desarrollo del lado del servidor y arquitectura de ingeniería, infraestructura distribuida, inteligencia artificial y aprendizaje profundo, operaciones de productos y emprendimiento, y otros::
