Vue (1) ------ Historial de desarrollo de front-end

Vue (1) ------ Historial de desarrollo de front-end

1. Información general

• Vue (pronunciado /vjuː/, similar a view) es un marco de JavaScript progresivo para crear interfaces de usuario , lanzado en febrero de 2014.

• A diferencia de otros frameworks grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba.
  La biblioteca principal de Vue solo se centra en la capa de vista, lo que facilita la integración con bibliotecas de terceros (como: vue-router: jump, vue-resource: comunicación, vuex: gestión) o proyectos existentes.

• Sitio web oficial: https://cn.vuejs.org/v2/guide/

2. Sistema de conocimiento front-end

• Todavía queda un largo camino por recorrer para convertirse en un verdadero "ingeniero de pila completa de Java de Internet", y el front-end es un curso obligatorio que no se puede evitar. El objetivo principal de esta etapa del curso es llevar a los programadores en experiencia de Java a comprender, comprender y dominar el front-end, y dar un paso adelante para convertirse en un "ingeniero de pila completa de Internet Java".

2.1 Tres elementos del front-end

• HTML (Estructura): Lenguaje de marcado de hipertexto, que determina la estructura y el contenido de las páginas web.
• CSS (Presentación): Hojas de estilo en cascada (Cascading Style Sheets), establece el estilo de presentación de las páginas web.
• JavaScript (comportamiento): es un lenguaje de scripting débilmente tipado, su código fuente no necesita ser compilado, pero el navegador lo interpreta y ejecuta para controlar el comportamiento de las páginas web.

2.2 Capa de estructura (HTML)

2.3 Capa de presentación (CSS)

La hoja de estilos en cascada CSS es un lenguaje de marcado, no un lenguaje de programación, por lo que no puede personalizar variables, no puede citar, etc. En otras palabras, no tiene soporte de sintaxis, sus principales defectos son los siguientes:

• La sintaxis no es lo suficientemente potente, por ejemplo, no se puede anidar, lo que hace que sea necesario escribir muchos selectores repetidos en el desarrollo modular;
• Sin variables y un mecanismo de reutilización de estilo razonable, los valores de atributos relacionados lógicamente deben generarse repetidamente en forma de literales, lo que dificulta su mantenimiento;
• Esto resultó en un aumento irrazonable de la carga de trabajo en el trabajo. Para resolver este problema, los desarrolladores front-end utilizarán una herramienta llamada [preprocesador CSS] para proporcionar un mecanismo de reutilización de la capa de estilo que falta en CSS, reducir el código redundante y mejorar la capacidad de mantenimiento del código de estilo. Mejora enormemente la eficiencia del desarrollo de estilos front-end.

¿Qué es el preprocesador CSS?

• El preprocesador CSS define un nuevo lenguaje. La idea básica es usar un lenguaje de programación especializado para agregar algunas características de programación a CSS y usar CSS como objetivo para generar archivos. Luego, los desarrolladores solo necesitan usar este lenguaje para codificar CSS. Traducido a términos fáciles de entender, significa " usar un lenguaje de programación especial para diseñar el estilo de la página web y luego convertirlo en un archivo CSS normal a través de un compilador para usarlo en el proyecto ".

¿Cuáles son los preprocesadores CSS de uso común?

• SASS: Basado en Ruby, procesado a través del servidor y tiene potentes funciones. Alta eficiencia de análisis. necesidad

  Para aprender el lenguaje Ruby, es más difícil comenzar que MENOS.

• MENOS: Basado en NodeJS, procesado a través del cliente, fácil de usar. La función es más simple que SASS y la eficiencia de análisis también es menor que SASS, pero es suficiente en el desarrollo real, por lo que si nuestro personal de backend lo necesita, se recomienda usar MENOS.

2.4 Capa de comportamiento (JavaScript)

• JavaScript es un lenguaje de script débilmente tipado. No es necesario compilar su código fuente antes de enviarlo al cliente para su ejecución, sino que los códigos de caracteres en formato de texto se envían al navegador, que es interpretado y ejecutado por el navegador.

Desarrollo JS nativo nativo

• El desarrollo JS nativo significa que seguimos el método de desarrollo estándar [ECMAScript], denominado ES, cuya característica es que todos los navegadores lo admiten. Hasta ahora, el estándar ES ha sido lanzado en las siguientes versiones: (La diferencia es que gradualmente se agregan nuevas características)
  • ES3
  • ES4 (interno, no lanzado oficialmente)
  • ES5 (soporte completo para navegador)
  • ES6 (versión principal actual de uso común: empaquetada a través del paquete web para admitir ES5)
  • ES7
  • ES8
  • ES9 (etapa de borrador)

TypeScript estándar de Microsoft

• TypeScript es un lenguaje de programación gratuito y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript y esencialmente agrega escritura estática opcional y programación orientada a objetos basada en clases al lenguaje. Dirigido por Anders Helsberg (padre de C#, Delphi, TypeScript; fundador de .NET).

• La característica de este lenguaje es que, además de las características de ES, también incorpora muchas características nuevas que no están dentro del alcance del estándar, por lo que muchos navegadores no pueden admitir directamente la sintaxis de TypeScript y deben compilarse (compilarse en JS). antes de que pueda ser ejecutado correctamente por el navegador.

Marco de JavaScript

• JQuery: una biblioteca JavaScript muy conocida. Su ventaja es que simplifica las operaciones DOM. Su desventaja es que las operaciones DOM son demasiado frecuentes, lo que afecta el rendimiento del front-end; a los ojos del front-end, solo se usa para ser compatible con IE6, 7 y 8;
• Angular: El framework front-end adquirido por Google fue desarrollado por un grupo de programadores de Java, se caracteriza por trasladar el modelo MVC back-end al front-end y agregar el concepto de desarrollo modular, coopera con Microsoft y adopta TypeScript. desarrollo de sintaxis; es amigable para los programadores back-end. , no muy amigable para los programadores front-end; la mayor desventaja es que la iteración de la versión no es razonable (como 1.a generación -> 2.a generación, excepto por el nombre, es básicamente dos cosas;)
• React: Producido por Facebook, un marco front-end JS de alto rendimiento; su característica es que propone un nuevo concepto [DOM virtual] para reducir las operaciones DOM reales y simular operaciones DOM en la memoria, mejorando efectivamente la eficiencia de renderizado front-end; su La desventaja es que es complicado de usar, porque necesitas aprender un lenguaje [JSX] adicional;
• Vue : Un marco de JavaScript progresivo. Progresivo significa implementar gradualmente nuevas características, como desarrollo modular, enrutamiento, administración de estado y otras características nuevas. Su característica es que combina las ventajas de Angular (modularidad) y React (DOM virtual);
• Axios : marco de comunicación front-end; debido a que los límites de Vue son muy claros, es para procesar el DOM, por lo que no tiene capacidades de comunicación. En este momento, es necesario utilizar un marco de comunicación adicional para interactuar con el servidor; por supuesto, también puede optar directamente por utilizar la función de comunicación AJAX proporcionada por jQuery;

marco de interfaz de usuario

• Ant-Design: producido por Alibaba, un marco de interfaz de usuario basado en React
• ElementUI, iview, ice: producido por Ele.me, un marco de interfaz de usuario basado en Vue
• BootStrap: un conjunto de herramientas de código abierto para el desarrollo front-end lanzado por Teitter
• AmazeUI: también llamado "Meizi UI", un marco de interfaz de usuario de pantalla cruzada HTML5

Herramientas de construcción de JavaScript

• Babel: herramienta de compilación JS, utilizada principalmente para nuevas funciones de ES que no son compatibles con los navegadores, como la compilación de TypeScript.
• WebPack: empaquetador de módulos, su función principal es empaquetado, compresión, fusión y carga secuencial.

Nota: Los puntos de conocimiento anteriores han resuelto todas las habilidades necesarias para el desarrollo de aplicaciones web.

2.5, tres extremos idénticos

Aplicación híbrida

El objetivo principal es unificar un conjunto de códigos en tres extremos (PC, Android: .apk, iOS: .ipa) y poder llamar al hardware subyacente del dispositivo (como sensores, GPS, cámaras, etc.). Hay dos métodos de embalaje principales:

• Empaquetado en la nube: HBuild -> HBuildX, producido por DCloud; API Cloud

• Embalaje local: Cordova (anteriormente PhoneGap)

subprograma WeChat

Para obtener más información, consulte el sitio web oficial de WeChat. Aquí hay una introducción a un marco que facilita el desarrollo de la interfaz de usuario del subprograma WeChat: WeUI

2.6 Tecnología de fondo

El personal de front-end también necesita dominar ciertas tecnologías de back-end para facilitar el desarrollo, pero nosotros, el personal de back-end de Java, sabemos que el sistema de conocimiento de back-end es extremadamente grande y complejo, por lo que para facilitar el front-end personal para desarrollar aplicaciones back-end, han surgido tecnologías como Node JS.

El autor de Node JS ha afirmado abandonar Node JS (diciendo que la arquitectura no está bien hecha y que los módulos de nodo pesados ​​pueden hacer que el autor se sienta infeliz) y comenzar a desarrollar Deno con una nueva arquitectura.

Dado que es una tecnología backend, definitivamente requiere marcos y herramientas de gestión de proyectos. El marco Node JS y las herramientas de gestión de proyectos son los siguientes:

• Expreso: marco Node JS
• Koa: versión simplificada Express
• NPM: herramienta integral de gestión de proyectos, similar a Maven
• YARN: Una alternativa a NPM, similar a la relación entre Maven y Gradle

2.7 Marcos front-end convencionales

Vue.js

Vista

iview es una potente biblioteca de interfaz de usuario basada en Vue, que tiene muchos componentes básicos prácticos que son más ricos que los de element ui y sirve principalmente para productos de interfaz de PC de nivel medio y posterior. El modelo de desarrollo de componentes de Vue que utiliza un solo archivo se desarrolla en base a npm + webpack + babel, admite API amigable, rica en funciones y de alta calidad ES 2015, y utiliza el espacio de manera libre y flexible.

• Dirección del sitio web oficial: https://iviewui.com/

• Github: https://github.com/iview/iview

• iview-admin: https://www.worldlink.com.cn/en/osdir/iview-admin.html

Nota: Pertenece al marco front-end convencional y se puede considerar al seleccionar. Su característica principal es que admite más terminales móviles.

Elemento de interfaz de usuario

Element es una biblioteca de componentes de Vue UI mantenida por el código abierto del front-end de Ele.me. Tiene componentes completos y básicamente cubre todos los componentes necesarios en el backend. La documentación lo explica en detalle y es rica en ejemplos. Se utiliza principalmente para desarrollar páginas del lado de la PC y es una biblioteca de componentes de interfaz de usuario de Vue de relativamente alta calidad.

• Dirección del sitio web oficial: https://element.eleme.cn/
• Github: https://github.com/ElemeFE/element
• vue-element-admin: https://panjiachen.github.io/vue-element-admin-site/zh/

Nota: Pertenece al marco front-end principal y se puede considerar al seleccionar. Su característica principal es que tiene más soporte para escritorio.

HIELO

Feibing es la solución de aplicación intermedia y backend del equipo de Alibaba basada en React/Angular/Vue. Dentro de Alibaba, ya es utilizada por más de 270 proyectos de casi todas las BU. Feibing incluye un enlace completo desde el final del diseño hasta el final del desarrollo, lo que ayuda a los usuarios a crear rápidamente sus propias aplicaciones mid-end y back-end.

• Dirección del sitio web oficial: https://ice.work/

• Github: https://github.com/alibaba/ice

Nota: Los componentes principales todavía se basan en React. A partir de la actualización del blog del 17 de febrero de 2019, el soporte para Vue aún no está completo y aún se encuentra en la etapa de esperar y ver.

VantUI

Vant UI es una biblioteca de componentes de Vue implementada por el equipo de front-end de Youzan de acuerdo con las especificaciones unificadas de Youzan y proporciona un conjunto completo de componentes básicos de UI y componentes comerciales. A través de Vant, puede crear rápidamente una página con un estilo unificado y mejorar la eficiencia del desarrollo.

• Dirección del sitio web oficial: https://youzan.github.io/vant-weapp/#/intro
• Github: https://github.com/youzan/vant

En UI

at-ui es una biblioteca de componentes de interfaz de usuario basada en Vue 2.x, que se utiliza principalmente para el desarrollo rápido de productos de sitios web para PC. Proporciona un conjunto de flujo de trabajo de desarrollo front-end npm + webpack + babel, el estilo CSS es independiente y se puede mantener un estilo de interfaz de usuario unificado incluso si se utilizan diferentes marcos.

• Dirección del sitio web oficial: https://at-ui.github.io/at-ui/#/zh
• Github: https://github.com/aliqin/atui

cubo ul

cube-ui es una exquisita biblioteca de componentes móviles basada en Vue js desarrollada por el equipo de Didi. Admite la introducción y poscompilación bajo demanda, es liviano y flexible, tiene una gran escalabilidad y puede implementar fácilmente el desarrollo secundario basado en componentes existentes.

• Dirección del sitio web oficial: http://www.cubeent.co.kr/

• Github: https://github.com/square/cube

desarrollo híbrido

Flutter
Flutter es el marco de interfaz de usuario móvil de Google, que puede crear aplicaciones nativas de alta calidad en Android e iOS en muy poco tiempo. Flutter funciona con código existente, lo utilizan desarrolladores y organizaciones de todo el mundo y Flutter es gratuito y de código abierto.

• Dirección del sitio web oficial: https://flutterchina.club/

• Github: https://github.com/flutter/flutter

Nota: Producido por Google, su característica principal es crear rápidamente aplicaciones de aplicaciones nativas. Si está creando aplicaciones híbridas, este marco es imprescindible.

lonic
Lonic es tanto un marco CSS como una biblioteca de interfaz de usuario de Javascript. Lonic es actualmente el marco de desarrollo de aplicaciones móviles HTML 5 más prometedor. Cree aplicaciones a través de SASS, que proporciona muchos componentes de interfaz de usuario para ayudar a los desarrolladores a desarrollar aplicaciones potentes. Utiliza el marco JavaScript MV VM y Angular JS/Vue para mejorar la aplicación. Proporciona enlace bidireccional de datos, lo que hace que su uso sea una opción común para los desarrolladores web y móviles.

• Dirección del sitio web oficial: https://ionicframework.com/

• Documento del sitio web oficial: http://www.ionic.wang/js_doc-index.html

• Github: https://github.com/tonib/kaichronicles

subprograma WeChat

mpvue
mpvue es un marco front-end desarrollado por Meituan que utiliza Vue.js para desarrollar miniprogramas y actualmente admite miniprogramas WeChat, miniprogramas inteligentes Baidu, miniprogramas Toutiao y miniprogramas Alipay. El marco se basa en Vue.js. El tiempo de ejecución modificado del marco de ejecución y la implementación del compilador de código le permiten ejecutarse en un entorno de miniprograma, introduciendo así la experiencia de desarrollo de Vue.js en el desarrollo de miniprogramas.

• Dirección del sitio web oficial: http://mpvue.com/
• Centro de Git: https://github.com/Meituan-Dianping/mpvue

Nota: Se recomienda tener experiencia completa en desarrollo de Vue y admitir el desarrollo de miniprogramas multiplataforma.

WeUI
WeUI es un conjunto de bibliotecas de estilos básicas que son consistentes con la experiencia visual nativa de WeChat y está diseñado por el equipo de diseño oficial de WeChat para las páginas web y miniprogramas de WeChat, lo que hace que la percepción de uso de los usuarios sea más unificada. Contiene varios elementos como botón, celda, cuadro de diálogo, brindis, artículo, icono, etc.

• Dirección del sitio web oficial: https://weui.io/
• Github: https://github.com/Tencent/weui

3. Comprender la historia de la evolución de la separación frontal y posterior.

¿Por qué es necesario separar el frente y la espalda?

3.1 Era MVC orientada al back-end

Para reducir la complejidad del desarrollo, el back-end es el punto de partida. Por ejemplo, el uso de Struts, Spring MVC y otros marcos es la era MVC del back-end; tome el proceso Spring MVC como ejemplo
:

• Iniciar una solicitud al controlador frontal ( Dispatcher Servlet)
• El controlador de front-end solicita HandlerMappinguna búsqueda Handler, que se puede xmlbuscar según la configuración y las anotaciones.
• El asignador del procesador HandlerMappingregresa al controlador frontalHandler
• El controlador front-end llama al adaptador del procesador para ejecutarHandler
• adaptador de procesador para ejecutarHandler
• HandlerRegrese al adaptador una vez completada la ejecución.ModelAndView
• El adaptador del procesador regresa al controlador front-end ModelAndViewy ModelAndViewes un objeto subyacente del marco SpringMvc, que incluye ModelyView
• El controlador de front-end solicita al analizador de vistas que realice un análisis de la vista y la analice en una vista real (JSP) según el nombre de la vista lógica.
• Ver el solucionador regresa al controlador de front-endView
• El controlador frontal realiza la representación de la vista, que completa los campos con datos del modelo (en objetos ModelAndView)request
• El controlador frontal responde con los resultados al usuario.

ventaja

• MVC es un muy buen modelo de colaboración que puede reducir eficazmente el acoplamiento de código y permitir a los desarrolladores comprender dónde se debe escribir el código arquitectónicamente. Para hacer que la Vista sea más pura, también puede utilizar motores de plantillas como Thyme leaf y Free Marker para evitar que se escriba código Java en la plantilla y aclarar la división del trabajo entre el front-end y el back-end.

defecto

• El desarrollo front-end depende en gran medida del entorno de desarrollo y tiene una baja eficiencia de desarrollo. Bajo esta arquitectura, existen dos modos de colaboración front-end y back-end:

  • La primera es escribir la DEMO en el front-end y, después de escribirla, dejar que el back-end aplique la plantilla. La ventaja es que la DEMO se puede desarrollar localmente y es muy eficiente. La desventaja es que la plantilla aún debe instalarse en el backend, lo que puede ser incorrecto. Una vez instalada la plantilla, aún debe ser confirmada por el frontend y el costo de la comunicación y el ajuste de ida y vuelta es relativamente alto;
  • Otro modelo de colaboración es que el front-end es responsable de todo el desarrollo en el lado del navegador y del desarrollo de la plantilla de capa de visualización en el lado del servidor. La ventaja es que el código relacionado con la interfaz de usuario se puede escribir en el front-end y no es necesario prestar demasiada atención al back-end. La desventaja es que el desarrollo del front-end está fuertemente vinculado al entorno del back-end. y el medio ambiente se ha convertido en un factor importante que afecta la eficiencia del desarrollo front-end.

• Las responsabilidades de front-end y back-end están entrelazadas: el motor de plantillas es poderoso y aún puede implementar diversas lógicas comerciales a través de las variables de contexto obtenidas. De esta manera, mientras el front-end sea débil, el back-end a menudo necesitará escribir una gran cantidad de código comercial en la capa de plantilla. También hay una gran área gris en el Controlador. Funciones como el enrutamiento de páginas deberían ser los que más preocupan al front-end, pero son implementados por el backend. El controlador en sí y el modelo a menudo están enredados, y el código comercial que hace que las personas aprieten los dientes a menudo aparece en la capa del controlador. No todos estos problemas pueden atribuirse a la calidad de los programadores; de lo contrario, JSP será suficiente.

• Limitaciones del front-end: si la optimización del rendimiento se realiza solo en el front-end, el espacio es muy limitado, por lo que a menudo necesitamos cooperación de back-end, pero debido a las limitaciones del marco de back-end, es difícil para que utilicemos soluciones técnicas como [Comet] y [Big Pipe] para optimizar el rendimiento.

Nota: Durante este período (antes de 2005), incluidos los primeros JSP y PHP, se le puede llamar la era Web 1.0. Quiero decir algo aquí: si es un principiante de Java, deje de tomar en serio algunas tecnologías antiguas, como JSP, porque los tiempos están cambiando, la tecnología está cambiando y todo está cambiando (citando a Zuckerberg (Un dicho muy conocido: el Lo único constante es el cambio en sí); los estudiantes universitarios contemporáneos todavía están aprendiendo algunas cosas viejas en clase y consideran este conocimiento como el punto clave. De hecho, este no es el caso. Sólo se puede decir que la información seca en su cognición es para el mercado Es solo que está desactualizado hace mucho tiempo

3.2 La era SPA basada en AJAX

El tiempo se remonta a 2005 AJAX(JavaScript y XML asincrónicos, JavaScript y XML asincrónicos, tecnología antigua y nuevos usos) se propuso oficialmente y CDN comenzó a usarse como almacenamiento de recursos estático, por lo que apareció el regreso del rey de JavaScript (antes de esto, JS era utilizado en páginas web (Aplicación de página única) SPA (Aplicación de página única) con anuncios de yeso de piel de perro.

ventaja

• En este modo, la división del trabajo entre el front-end y el back-end es muy clara, y el punto clave de colaboración entre el front-end y el back-end es la interfaz AJAX. **Se ve maravilloso, pero mirando hacia atrás, no es muy diferente de la era JSP. La complejidad ha pasado de JSP en el lado del servidor a JavaScript en el navegador, y el lado del navegador se ha vuelto muy complicado. Al igual que Spring MVC, la arquitectura en capas del lado del navegador comenzó a aparecer en esta era:

defecto

• Acuerdo sobre las interfaces de front-end y back-end: si la interfaz de back-end es un desastre y el modelo de negocio de back-end no es lo suficientemente estable, entonces el desarrollo de front-end será muy doloroso; muchos equipos han hecho intentos similares a través de reglas de interfaz, plataformas de interfaz, etc. Con las reglas de la interfaz precipitadas junto con el backend, también se puede usar para simular datos, de modo que el front y el backend puedan lograr un desarrollo paralelo eficiente después de acordar la interfaz.
• Control de complejidad del desarrollo front-end: las aplicaciones SPA son en su mayoría funcionales e interactivas, y es normal que el código JavaScript supere las 100.000 líneas. La organización de una gran cantidad de código JS, la vinculación a la capa de Vista, etc. no son tareas fáciles.

3.3 Era MVC orientada al front-end

El patrón MVC aquí es el siguiente:

• MVC (principalmente comunicación síncrona): modelo, vista, controlador
• MVP (principalmente comunicación asincrónica): modelo, vista, presentador
• MVVM (principalmente comunicación asincrónica): modelo, vista, modelo de vista. Para reducir la complejidad del desarrollo front-end, han surgido una gran cantidad de marcos front-end, como: , , , etc. El principio general Angular JSde Reactestos Vue.jsframeworks Ember JSes colocarlos primero en capas por tipo, como Plantillas, Controladores, Modelos, y luego dividirlos dentro de la capa, como se muestra a continuación:

ventaja

• Las responsabilidades del front-end y del back-end son muy claras : el front-end funciona en el lado del navegador y el back-end funciona en el lado del servidor. Una clara división del trabajo permite el desarrollo paralelo, la simulación de datos de prueba no es difícil y la interfaz se puede desarrollar localmente. El backend puede centrarse en procesar la lógica empresarial y generar RESTful y otras interfaces.
• La complejidad del desarrollo de front-end es controlable : el código de front-end es pesado, pero las capas razonables permiten que el código de front-end realice sus tareas. Esto es bastante interesante, tan simple como la selección de características de la plantilla, hay muchos detalles a los que prestar atención. Cuanto más poderoso mejor, cuáles son las restricciones, qué libertades quedan, cómo debe organizarse el código, todo este diseño, haría falta un libro para explicarlo.
• La implementación es relativamente independiente : la experiencia del producto se puede mejorar rápidamente

defecto

• El código no se puede reutilizar. Por ejemplo, el backend aún necesita realizar varias verificaciones de los datos y la lógica de verificación no puede reutilizar el código del lado del navegador. Si se puede reutilizar, la verificación de datos de back-end puede ser relativamente simple.
• Totalmente asincrónico, malo para el SEO. A menudo es necesario implementar una solución de degradación para el renderizado sincrónico en el lado del servidor.
• El rendimiento no es óptimo, especialmente en un entorno de Internet móvil.
• SPA no puede satisfacer todas las necesidades y todavía existe una gran cantidad de aplicaciones de varias páginas. El diseño de URL requiere la cooperación del backend y el frontend no puede controlarlo completamente.

3.4 La era full-stack traída por Node JS

El modelo MVC orientado al front-end resuelve muchos problemas, pero como se mencionó anteriormente, todavía existen muchas deficiencias. Con el auge de Node JS, JavaScript ha comenzado a tener la capacidad de ejecutarse en el lado del servidor. Esto significa que podría haber un nuevo modelo de I+D

En este modelo de I+D, las responsabilidades del front-end y del back-end son muy claras. Para la interfaz, las dos capas de la interfaz de usuario realizan sus respectivas funciones:

• La capa Front-end Ul maneja la lógica de presentación de la capa del navegador. Representar estilos a través de CSS, agregar funciones interactivas a través de JavaScript y la generación de HTML también se pueden colocar en esta capa, según el escenario de la aplicación.

• La capa Back-end Ul maneja enrutamiento, plantillas, adquisición de datos, cookies, etc. A través del enrutamiento, el front-end finalmente puede controlar el diseño de URL de forma independiente, de modo que ya sea una aplicación de una sola página o de varias páginas, el front-end puede controlarlo libremente. El backend finalmente puede deshacerse de su fuerte enfoque en la presentación y, en cambio, puede centrarse en el desarrollo de la capa de lógica empresarial.

A través de Node, la capa WebServer también es código JavaScript, lo que significa que algunos códigos se pueden reutilizar por delante y por detrás, las escenas que requieren SEO se pueden representar sincrónicamente en el lado del servidor y los problemas de rendimiento causados ​​por demasiadas solicitudes asincrónicas también se pueden aliviar a través de el lado del servidor. Las deficiencias del modelo anterior pueden solucionarse casi perfectamente con este modelo.

En comparación con el modelo JSP, el modelo full-stack parece una regresión y, de hecho, es un retorno al modelo de desarrollo original, pero es un retorno en espiral.

El modelo full-stack basado en Node JS todavía enfrenta muchos desafíos:

• El front-end debe comprender mejor la programación del lado del servidor. Por ejemplo, dominio de conocimientos de redes como TCP/IP.

• Comunicación eficiente entre la capa Node JS y la capa Java. En el modo Node JS, todo está en el lado del servidor. La comunicación RESTful HTTP puede no ser eficiente. La comunicación a través de SOAP y otros métodos es más eficiente. Todo necesita ser verificado.

• Una comprensión competente del departamento y los niveles de operación y mantenimiento requiere más puntos de conocimiento y experiencia práctica.

• Cómo hacer la transición de una gran cantidad de cuestiones históricas. Este es probablemente el mayor obstáculo.

3.5 Resumen

En resumen, no existe un modelo o tecnología buena o mala, sólo si es adecuada o no, la idea de desarrollo de la separación de adelante hacia atrás se basa principalmente en SoC (el principio de separación de preocupaciones). Todos los modelos permiten que las responsabilidades de front-end y back-end sean más claras y la división del trabajo sea más razonable y eficiente.