Prefacio
Al separar los extremos delanteros y traseros, el primer problema al que presto atención es que la prestación es trabajar en el nivel de vista.
En el modelo de desarrollo tradicional, el navegador y el servidor son desarrollados por dos equipos, tanto en los extremos delanteros como traseros, pero la plantilla está en el área vago entre los dos. Por lo tanto, siempre hay lógicas cada vez más complejas en la plantilla, que en última instancia son difíciles de mantener.
Y elegimos NodeJs como la capa media de los extremos delanteros y traseros. Intente usar NodeJS para borrar el trabajo en el nivel de vista.
Esto hace que la división del trabajo entre los extremos delanteros y traseros sea más claro, hace que el proyecto se mantenga mejor y logre una mejor experiencia de usuario.
Este artículo
El trabajo de representación es una gran proporción del trabajo diario de los desarrolladores front-end, y también es la parte más fácil de confundirse con el desarrollo de back-end.
Mirando hacia atrás en los últimos años de desarrollo de tecnología front-end, el trabajo a nivel de vista ha sufrido muchos cambios, como:
Formulario Enviar renovación de página completa => AJAX LOCAL REFRESH
Continuación del lado del servidor + MVC => Renderización del lado del cliente + MVC
Cambio de página tradicional Jump => Aplicación de una sola página
Se puede observar que en los últimos años, todos han tendido a mover esto desde el extremo del servidor hasta el extremo del navegador.
El lado del servidor se centra en el servicio y proporciona interfaces de datos.
Beneficios de la representación del navegador
Todos conocemos los beneficios de la representación del lado del navegador, como
1. Deshágase del acoplamiento y confusión entre la lógica de negocios y la lógica de presentación en el motor de plantilla Java.
2. Para aplicaciones múltiples terminales, es más fácil interactuar. Combinar plantillas diferentes en el lado del navegador para presentar diferentes aplicaciones.
3. La representación de la página no solo es HTML, sino que la representación en el delantero puede proporcionar fácilmente funciones en forma componente (HTML + JS + CSS), de modo que los componentes frontales no necesitan confiar en la estructura HTML generada por el servidor.
4. Deshágase de la dependencia de los procesos de desarrollo y distribución de back-end.
5. Ajuste de articulación conveniente.
Las desventajas causadas por la representación del navegador
Pero mientras disfrutamos de los beneficios, también enfrentamos las desventajas de la representación del lado del navegador, como:
1. La plantilla se separa en diferentes bibliotecas. Algunas plantillas se colocan en el lado del servidor (Java), mientras que otras se colocan en el lado del navegador (JS). Los idiomas de plantilla delantera y de fondo no están conectados.
2. Debe esperar a que todas las plantillas y componentes se carguen en el navegador antes de que pueda comenzar, y no puede leerlo de inmediato.
3. Habrá una pantalla blanca esperando la representación por primera vez, que no es propicio para la experiencia del usuario
4. Al desarrollar una aplicación de una sola página, la ruta frontal no coincide con la ruta del lado del servidor, lo cual es muy problemático de manejar.
5. Todos los contenidos importantes se ensamblan en la parte delantera, que no conduce a SEO
Reflexionar sobre la definición de los extremos delanteros y traseros
De hecho, cuando llevamos el trabajo de representación desde el lado del servidor (Java) hasta el lado del navegador (JS), nuestro propósito es solo dividir claramente las responsabilidades delantera y trasera, y no es necesario representar el navegador.
Es solo porque en el modelo de desarrollo tradicional, se libera el servidor y se alcanza el navegador, por lo que el contenido de trabajo en el front-end solo puede limitarse al lado del navegador.
Por lo tanto, muchas personas han determinado que el lado del backend = servidor frontend = navegador, al igual que la imagen a continuación.
En el proyecto Midway Midway actualmente en curso por Taobao UED, al construir una capa intermedia de NodeJ en el medio del navegador Java, intentamos diferenciar la línea de división delantera y trasera nuevamente para responsabilidades laborales, en lugar de entornos de hardware (servidor y navegador).
Por lo tanto, tenemos la oportunidad de compartir plantillas y rutas, que también es el estado más ideal en la división de trabajo front-end y back-end.
Taobao Midway Midway
En el proyecto Midway, movimos la línea que demarca los extremos delanteros y traseros desde el navegador hasta el lado del servidor.
Con una capa NodeJS que es fácilmente controlada por el front-end y común al navegador, la separación frontal se puede completar más claramente.
También es posible permitir que el desarrollo frontal decida la solución más apropiada para diferentes situaciones. En lugar de que todo se maneje en el lado del navegador.
Responsabilidades divisorias
Midway no es un proyecto que el front-end intenta obtener el trabajo de fondo. El propósito es cortar claramente el área vaga de la plantilla y obtener una división más clara de responsabilidades.
Backend (Java), centrándose en
1. Capa de servicio
2. Formato de datos y estabilidad de datos
3. Lógica de negocios
Front-end, concéntrate en
1.UI Capa
2. Lógica de control, lógica de representación
3. Interacción, experiencia del usuario
Y ya no se adhiere a las diferencias entre el servidor o el lado del navegador.
Compartir plantillas
En el modelo de desarrollo tradicional, el navegador y el servidor son desarrollados por dos equipos, tanto en los extremos delanteros como traseros, pero la plantilla está en el área vago entre los dos. Por lo tanto, siempre hay lógicas cada vez más complejas en la plantilla, que en última instancia son difíciles de mantener.
Con NodeJs, los estudiantes de backend pueden centrarse en el desarrollo de la lógica de negocios y los datos en la capa Java. Los estudiantes front-end se centran en el desarrollo de la lógica de control y la representación. Y puede elegir estas plantillas usted mismo para renderizar en el lado del servidor (NodeJS) o el lado del navegador.
Uso de la misma plantilla Idioma Xtemplate y el mismo motor de representación JavaScript
Renderiza el mismo resultado en diferentes entornos de representación (lado del servidor, navegador PC, navegador móvil, vista web, etc.).
Enrutamiento compartido
También debido a la capa NodeJS, puede controlar el enrutamiento con más cuidado.
Si necesita hacer un enrutamiento del lado del navegador en el front-end, puede configurar el enrutamiento del lado del servidor al mismo tiempo para que pueda cambiar las páginas en el lado del navegador o las páginas en el lado del servidor, y puede obtener un efecto de renderización consistente.
Al mismo tiempo, el problema de SEO también se manejó.
La práctica del intercambio de plantillas
Por lo general, cuando representamos una plantilla en el navegador, el proceso no es más que
Ingrese el motor de plantilla en el navegador (XtmPleate, Juicer, Handlerbar, etc.)
Archivos de plantilla de carga en el lado del navegador, el método puede ser
Imprima en la página usando <script type = "js/tpl"> ... </script>
Use la herramienta de carga del módulo para cargar los archivos de plantilla (besos, necesidades, etc.)
otro
Obtenga datos y use el motor de plantilla para generar HTML
Inserte HTML en la ubicación especificada.
El proceso anterior se puede ver que si desea lograr el intercambio transversal de plantillas, el enfoque está en realidad en la selección de módulos consistente.
Hay muchos estándares de módulos populares en el mercado, como KMD, AMD y CommonJS. Mientras el archivo de plantilla NodeJS se pueda obtener para que el final de los nodejs a través de especificaciones consistentes del módulo, se puede hacer un intercambio de plantillas básico.
La serie de artículos posteriores discutirá más a fondo el proxy y el intercambio del modelo.
Discusión de casos
Debido a la capa intermedia de Midway Island, hay mejores respuestas a algunas preguntas pasadas, como
Caso 1 Aplicaciones interactivas complejas (como carrito de compras, página de pedidos)
Estado: Todo HTML se representa en el front -end, y el servidor solo proporciona interfaces.
Problema: al ingresar a la página, habrá una breve pantalla blanca.
respuesta:
Ingrese la página por primera vez, represente la página completa en el lado de NodeJS y descargue plantillas relacionadas en segundo plano.
Interacciones posteriores, actualización parcial completa en el lado del navegador
El uso de la misma plantilla produce el mismo resultado
Aplicación de una sola página del caso 2
Estado: use el marco MVC del lado del cliente para cambiar las páginas en el navegador.
Problema: la representación y el reemplazo de la página se completan en el lado del navegador. Cuando ingresa la URL directamente en o actualiza el F5, no se puede presentar directamente el mismo contenido.
respuesta:
Comparta la misma configuración de ruta en el lado del navegador y el lado de NodeJS
Cuando cambie las páginas en el lado del navegador, cambie la ruta y represente el contenido de la página en el lado del navegador.
Al ingresar directamente la misma URL, use la representación de contenido de la página de la página + en el lado de NodeJS
Ya sea que cambie las páginas en el navegador o ingrese directamente la misma URL, el contenido que ve es el mismo.
Además de aumentar la experiencia y reducir la complejidad lógica. También resolvió el problema de SEO
Caso tres Página de navegación pura
Estado: la página proporciona solo información, menos o ninguna interacción
Problema: HTML se genera en el lado del servidor, CSS y JS se colocan en otra ubicación, y tienen dependencias entre sí.
respuesta:
A través de nodejs, gestión unificada de HTML + CSS + JS
Si necesita expandirse en aplicaciones complejas o aplicaciones de una sola página en el futuro, también puede transferirlas fácilmente.
CASO Página de terminal de cuatro cross
Estado: la misma aplicación debe presentar diferentes interfaces e interacciones en diferentes puntos finales
Problema: la administración de HTML no es fácil, y a menudo se generará HTML diferentes en el lado del servidor, y se realizarán diferentes procesos en el lado del navegador.
respuesta:
Las páginas transversales son problemas y son manejadas por el front-end.
A través de la capa NodeJS y el servicio de backend, las mejores soluciones se pueden diseñar para este tipo de aplicaciones complejas.
Resumir
La aparición de tecnologías como AJAX, MVC del lado del cliente, SPA, la unión de datos de dos vías en el pasado fueron intentos de resolver los cuellos de botella encontrados en el desarrollo frontal en ese momento.
La aparición de la capa intermedia NodeJS también es un intento de resolver una limitación de que el front-end se limita actualmente al navegador.
Este artículo se centra en compartir plantillas front-end y de back-end, y espera llamar la atención. Discutamos con usted cómo mejorar nuestro flujo de trabajo y cooperar con el back-end para hacer un mejor trabajo en el front-end bajo la arquitectura de la capa media de NodeJS.