Arquitectura de microservicio para la separación de front-end y back-end, cómo escribir el front-end
El front-end separado ya no es un simple archivo HTML, ya es un sistema de aplicación independiente. Además de considerar la presentación de datos y la visualización de la página, también debe considerar aspectos como la arquitectura front-end, la interacción front-end y back-end y la seguridad de los datos utilizando ideas de ingeniería.
Interacción de interfaz RESTful
Después de separar el front-end y el back-end, se utilizarán más interfaces de estilo RESTful para interactuar con los datos del back-end.
REST es la abreviatura de "Representational State Transfer", un estilo arquitectónico para API que impulsa la evolución del estado de la aplicación transfiriendo el estado representacional entre el cliente y el servidor.
En un servicio web RESTful, cada recurso tiene una dirección. El recurso en sí es el objetivo de la llamada al método y la lista de métodos es la misma para todos los recursos. Estos métodos son estándar e incluyen HTTP GET, POST, PUT, DELETE y posiblemente HEADER y OPTIONS.
Las API RESTful están diseñadas de tal manera que el backend pasa datos al frontend a través de la interfaz, generalmente en un formato común como JSON. Para el front-end, siempre que el back-end devuelva datos RESTful, no importa si el back-end está escrito en Java, Python o PHP. Confíe en el back-end para lograr la independencia del front-end. -sistema final.
Construcción de proyectos
Nodejs no solo se puede utilizar como servidor front-end, sino que también es muy útil durante la fase de desarrollo.
El ecosistema front-end se construye alrededor de Nodejs. El uso de npm para gestionar las dependencias del proyecto facilita su mantenimiento y ejecución en un entorno Nodejs.
Las herramientas de empaquetado grunt, gulp, webpack y rollup se ejecutan en nodejs y se combinan con complementos como la compilación gramatical y la implementación de paquetes para importar la aplicación a una aplicación completa.
Si está utilizando el marco Angular, React o Vue, o está utilizando la sintaxis ES6 con la que los navegadores no son compatibles actualmente, entonces también necesita usar babel para compilar la sintaxis en ES5 que el navegador puede reconocer la sintaxis antes de empaquetar la aplicación.
SPA
SPA es la abreviatura de Single Page Web Application (SPA). Es una aplicación con una única página web que actualiza dinámicamente la página cuando la aplicación interactúa. .
Al igual que Angular, React o Vue están diseñados para SPA. Combinando bibliotecas de enrutamiento front-end (react-router, vue-router) y almacenamiento en caliente con estado (redux, vuex), etc., se pueden desarrollar productos comparables. La experiencia de usuario de la aplicación web de Native APP también se ha mejorado enormemente.
Por supuesto, SPA no es perfecto y no es adecuado para todas las aplicaciones web. Debe seleccionarse según el proyecto y el escenario.
Los SPA tienen las siguientes desventajas:
La carga inicial tarda más. El rendimiento se puede mejorar mediante la división del código y la carga diferida, reduciendo así el tiempo de carga inicial.
Este problema, poco amigable para los motores de búsqueda, ahora se puede resolver parcialmente mediante el renderizado previo o el renderizado en el servidor.
Los desarrolladores deben escribir el front-end y el back-end de la página, pero ahora algunas bibliotecas de enrutamiento han ayudado básicamente a resolver este problema.
Los requisitos para los desarrolladores son altos y, dado que SPA requiere conocimiento de todo el stack tecnológico, se debe considerar si existe personal adecuado para el mantenimiento posterior.