Composición de páginas y vistas con microinterfaces

Puede crear vistas de una aplicación con una composición del lado del cliente, una composición del lado del borde y una composición del lado del servidor. Los patrones de composición tienen características diferentes en cuanto a las habilidades de equipo necesarias, la tolerancia a los errores, el rendimiento y el comportamiento de la memoria caché.

El siguiente diagrama muestra cómo se produce la composición en las capas del lado del cliente, del lado perimetral y del lado del servidor de una arquitectura de microinterfaz.

Las capas del lado del cliente, del lado perimetral y del lado del servidor se analizan en las siguientes secciones.

Composición del cliente

Cargue y añada de forma dinámica las microinterfaces como fragmentos del Document Object Model (DOM) en el cliente (navegador o vista web móvil). Los artefactos de la microinterfaz, como JavaScript los archivos CSS, se pueden cargar desde las redes de entrega de contenido (CDN) para reducir la latencia. La composición del lado del cliente requiere lo siguiente:

• Un equipo que posea y mantenga una aplicación shell o un marco de microinterfaz para poder descubrir, cargar y renderizar los componentes de la microinterfaz en tiempo de ejecución en el navegador

• Altos niveles de habilidad en tecnologías de interfaz, como HTML y CSS, y JavaScript un conocimiento profundo de los entornos de los navegadores

• Optimización de la cantidad de JavaScript carga de una página y disciplina para evitar conflictos globales entre los espacios de nombres

El siguiente diagrama muestra un ejemplo de AWS arquitectura para la composición del lado del cliente sin servidor.

La composición desde el lado del cliente se realiza en el entorno del navegador a través de una aplicación shell. El diagrama muestra los siguientes detalles:

1. Una vez cargada la aplicación shell, hace una solicitud inicial a Amazon para que descubra las microinterfaces CloudFront que se van a cargar a través de un punto final de manifiesto.

2. Los manifiestos contienen información sobre cada microinterfaz (por ejemplo, nombre, URL, versión y comportamiento alternativo). Los manifiestos los proporciona el servicio de detección de microinterfaces. En el diagrama, este servicio de detección está representado por Amazon API Gateway, una AWS Lambda función, y Amazon DynamoDB. La aplicación shell utiliza la información del manifiesto para solicitar a las microinterfaces individuales que redacten la página con un diseño determinado.

3. Cada paquete de microinterfaces se compone de archivos estáticos (como CSS JavaScript y HTML). Los archivos se alojan en un depósito de Amazon Simple Storage Service (Amazon S3) y se sirven allí. CloudFront

4. Los equipos pueden implementar nuevas versiones de sus microinterfaces y actualizar la información del manifiesto mediante procesos de implementación de los que son propietarios.

Composición desde los bordes

Utilice técnicas de transclusión, como Edge Side Includes (ESI) o Server Side Includes (SSI), compatibles con algunas CDN y proxies, frente a los servidores de origen, para componer una página antes de enviarla por cable a los clientes. ESI requiere lo siguiente:

• Una CDN con capacidad ESI o un despliegue de proxy frente a las microinterfaces del lado del servidor. Las implementaciones de proxy, como HAProxy, Varnish y NGINX, admiten SSI.

• Comprensión del uso y las limitaciones de las implementaciones de ESI y SSI.

Los equipos que inician nuevas aplicaciones no suelen elegir la composición lateral como patrón de composición. Sin embargo, este patrón podría proporcionar una vía para las aplicaciones antiguas que se basan en la transclusión.

Composición del servidor

Utilice los servidores de origen para componer las páginas antes de que se almacenen en caché en el borde. Esto se puede hacer con tecnologías tradicionales, como PHP, Jakarta Server Pages (JSP) o bibliotecas de plantillas, para componer las páginas incluyendo fragmentos de microinterfaces. También puede utilizar JavaScript marcos, como Next.js, que se ejecuten en el servidor para crear páginas en el servidor con renderización del lado del servidor (SSR).

Una vez renderizadas las páginas en el servidor, se pueden almacenar en caché en las CDN para reducir la latencia. Cuando se implementan nuevas versiones de microinterfaces, las páginas deben volver a renderizarse y la memoria caché debe actualizarse para ofrecer las versiones más recientes a los clientes.

La composición del lado del servidor requiere una comprensión profunda del entorno del servidor para establecer patrones de implementación, descubrir las microinterfaces del lado del servidor y administrar la memoria caché.

El siguiente diagrama muestra la composición del lado del servidor.

El diagrama incluye los siguientes componentes y procesos:

1. Amazon CloudFront proporciona un punto de entrada único a la aplicación. La distribución tiene dos orígenes: el primero para los archivos estáticos y el segundo para el compositor de la interfaz de usuario.

2. Los archivos estáticos se alojan en un bucket de Amazon S3. Los consumen el navegador y el compositor de la interfaz de usuario para las plantillas HTML.

3. El compositor de la interfaz de usuario se ejecuta en un clúster de contenedores en AWS Fargate. Con una solución contenerizada, puedes usar las capacidades de streaming y el renderizado multiproceso si es necesario.

4. Parameter Store, una capacidad de AWS Systems Manager, se utiliza como un sistema básico de descubrimiento de microinterfaces. Esta capacidad proporciona un almacén de valores clave que utiliza el compositor de la interfaz de usuario para recuperar los puntos finales de la microinterfaz y consumirlos.

5. La microinterfaz de notificaciones almacena el paquete optimizado en el depósito de S3. JavaScript Esto se renderiza en el cliente porque debe reaccionar ante las interacciones de los usuarios.

6. La microinterfaz de reseñas está compuesta por una función Lambda y las reseñas de los usuarios se almacenan en DynamoDB. La microinterfaz de reseñas se renderiza completamente en el servidor y genera un fragmento HTML.

7. La microinterfaz de detalles del producto es una microinterfaz de bajo código que utiliza. AWS Step Functions El Express Workflow se puede invocar de forma sincrónica y contiene la lógica para renderizar el fragmento HTML y una capa de almacenamiento en caché.

Para obtener más información sobre la composición del lado del servidor, consulte la entrada del blog Server-side side rendering micro-frontends: the architecture.