Arquitectura de referencia SPA

Objetivos, características y beneficios

La arquitectura de una Single Page Application (SPA) se ha convertido en una elección popular para el desarrollo de aplicaciones web modernas debido a sus numerosas ventajas sobre las aplicaciones tradicionales de múltiples páginas. Este enfoque mejora la experiencia del usuario al proporcionar una navegación fluida y tiempos de carga reducidos, y ofrece beneficios significativos en cuanto a mantenimiento, escalabilidad y eficiencia del desarrollo. En esta sección, exploraremos en detalle los objetivos fundamentales, las características distintivas y los beneficios clave de adoptar una arquitectura de referencia SPA.

Objetivos

• Mejorar la Experiencia del Usuario: Un objetivo principal de la arquitectura SPA es proporcionar una experiencia de usuario más fluida y rápida. Al minimizar los tiempos de carga percibidos mediante la actualización dinámica del contenido, se logra una interacción más intuitiva y eficiente para el usuario final.
• Aumentar la Productividad del Desarrollo: Facilitar un desarrollo más ágil y modular es otro objetivo crucial. La arquitectura SPA permite una mejor separación de responsabilidades entre el backend y el frontend, lo que simplifica el proceso de desarrollo y mejora la colaboración entre equipos.
• Optimizar el Rendimiento de la Aplicación: Reducir la carga en el servidor es fundamental. Al minimizar las solicitudes de página completa e implementar una gestión eficiente del estado de la aplicación en el cliente, se optimiza el rendimiento global de la aplicación
• Facilitar el Mantenimiento y la Escalabilidad: La arquitectura SPA debe ser fácil de mantener y escalar. Mediante la creación de una estructura modular, se mejora la reusabilidad del código, lo que facilita tanto el mantenimiento como la expansión de la aplicación.

Características  

• Carga Única de Página:Las SPAs se caracterizan por cargarse una sola vez al inicio y luego actualizarse dinámicamente sin recargar la página completa. Utilizan tecnologías como AJAX para obtener datos y actualizar la interfaz de usuario de manera eficiente, proporcionando una experiencia de usuario más rápida y fluida.
• Interfaz de Usuario Dinámica y Reactiva:La SPA actualiza la interfaz de usuario en tiempo real en respuesta a las interacciones del usuario. Esto se logra mediante el uso de frameworks como React, Angular o Vue.js, que permiten construir componentes reutilizables y reactivos, mejorando la interactividad y la respuesta del sistema.
• Manejo Centralizado del Estado: Un manejo centralizado del estado de la aplicación, a través de patrones como Redux o Vuex, mejora la consistencia y previsibilidad del comportamiento de la aplicación. Esto permite gestionar de manera eficiente los datos y el estado a lo largo de la aplicación.
• Routing en el Lado del Cliente: Implementar sistemas de enrutamiento en el cliente es esencial para manejar la navegación entre diferentes vistas o componentes sin recargar la página. Bibliotecas como React Router, Angular Router o Vue Router facilitan esta tarea, mejorando la experiencia de usuario.
• Optimización para Dispositivos Móviles: La SPA está diseñada para ser responsiva, adaptándose a diferentes tamaños de pantalla y dispositivos. Esto asegura una mejor accesibilidad y usabilidad en entornos móviles, mejorando la experiencia de usuario en estos dispositivos.

Beneficios

• Mejora de la Experiencia del Usuario: La reducción de tiempos de carga y la navegación fluida son beneficios clave de la SPA. Al cargar la aplicación una sola vez y actualizar dinámicamente, se minimizan los tiempos de espera del usuario. Además, la interactividad en tiempo real permite una respuesta inmediata a las acciones del usuario, como formularios interactivos y actualización de datos en tiempo real.
• Facilidad de Mantenimiento y Actualización: La modularidad del código facilita tanto el mantenimiento como la expansión de la aplicación. La separación clara entre lógica de negocio, lógica de presentación y datos permite un desarrollo más organizado y manejable, mejorando la eficiencia del equipo de desarrollo.
• Escalabilidad: La arquitectura SPA es fácilmente escalable tanto horizontal como verticalmente, permitiendo manejar un mayor número de usuarios y datos de manera eficiente. La estructura modular y el manejo centralizado del estado facilitan la implementación de nuevas características y funcionalidades.
• Reducción de la Carga del Servidor: Al reducir significativamente el número de solicitudes HTTP al servidor, la carga única de la aplicación y la actualización dinámica de contenido optimizan el uso de recursos del servidor. Esto permite destinar esos recursos a otras operaciones críticas, mejorando el rendimiento general del sistema.
• Mejoras en SEO y Accesibilidad: Técnicas como el pre-rendering o el server-side rendering (SSR) pueden mejorar significativamente el SEO y la accesibilidad de las SPAs. Además, las SPAs pueden convertirse en Progressive Web Apps (PWAs), mejorando la accesibilidad y la experiencia de usuario en diversas condiciones de red.

Principios

Basándonos en los principios generales definidos en la arquitectura global de contexto, la arquitectura de SPA adopta una serie de principios tecnológicos específicos que garantizan modularidad, independencia y una orientación hacia el frontend. Estos principios teóricos se alinean con las mejores prácticas para asegurar una experiencia de usuario fluida, eficiente y escalable. Al seguir estos principios, las SPAs mantienen un diseño adaptable, flexible y de fácil mantenimiento, permitiendo que la aplicación evolucione de manera ordenada sin comprometer la funcionalidad o el rendimiento

• Separación de Preocupaciones (Separation of Concerns)
• Componentización
• Orientado a Servicios (Service-Oriented)
• Desacoplamiento de Componentes
• Escalabilidad

(*) Puede consultarse el listado de Principios Tecnológicos Generales.

Separación de Preocupaciones (Separation of Concerns)

El principio de Separación de Preocupaciones es fundamental en la arquitectura de una SPA. Este principio establece que la aplicación debe dividirse en módulos o capas, cada uno responsable de un aspecto específico de la funcionalidad de la aplicación. Desde una perspectiva tecnológica, esto implica la separación de la lógica de presentación, lógica de negocio y la gestión de datos. Esta división mejora la mantenibilidad, escalabilidad y modularidad del código, permitiendo que los cambios en una parte de la aplicación no afecten negativamente a otras partes.

Componentización

La componentización es un principio clave en las SPAs, ya que promueve la creación de pequeños bloques o componentes independientes dentro de la aplicación. Cada componente es responsable de una funcionalidad específica y encapsula su lógica, estructura y estilo, lo que permite su reutilización y aislamiento. Desde una perspectiva tecnológica, este principio mejora la modularidad y la escalabilidad de la aplicación, permitiendo que los desarrolladores trabajen en componentes de forma aislada sin interferir con el resto del sistema.

Orientado a Servicios (Service-Oriented)

Las SPAs siguen una arquitectura orientada a servicios, lo que significa que los diferentes módulos y componentes interactúan principalmente a través de APIs (REST o GraphQL) para obtener y manipular datos. Este principio garantiza que el frontend esté claramente separado del backend, permitiendo una arquitectura modular y flexible que puede escalar y evolucionar de manera independiente. El principio de orientación a servicios asegura que las aplicaciones sean adaptables y fácilmente integrables con otras plataformas o servicios externos.

Desacoplamiento de Componentes

El desacoplamiento de componentes es un principio esencial que garantiza que los distintos módulos y componentes de una SPA sean independientes entre sí. Este principio asegura que cada componente pueda ser desarrollado, probado, desplegado y actualizado de forma independiente sin afectar el comportamiento de otros componentes. Tecnológicamente, esto permite que la aplicación sea modular, escalable y mantenible, ya que las diferentes partes pueden evolucionar sin comprometer la estabilidad general de la aplicación.

Escalabilidad 

El principio de escalabilidad asegura que las SPAs puedan crecer y manejar un aumento en la carga de usuarios o datos sin comprometer el rendimiento o la funcionalidad. Esto implica que la arquitectura de la SPA esté diseñada para escalar tanto horizontalmente (agregando más recursos) como verticalmente (aumentando la capacidad de los componentes). Tecnológicamente, este principio guía el diseño para que sea adaptable a nuevas demandas, manteniendo siempre un rendimiento óptimo.

Componentes

Para la correcta implantación de una arquitectura de SPA, es esencial contar con una serie de componentes bien definidos. Estos componentes trabajan juntos para proporcionar una experiencia de usuario fluida y eficiente, facilitando al mismo tiempo el desarrollo, el mantenimiento y la escalabilidad de la aplicación. A continuación, se describen los principales componentes y sus roles dentro de una SPA.

• Vista (View)
• Modelo (Model)
• Controlador (Controller)
• Servicios (Services)
• Enrutador (Router)
• APIS
• Event Management
• Recursos Estáticos
• Colector de Observabilidad
• Web Components (*Existentes dentro de la Agencia)

Vista (View)

La Vista es responsable de la presentación visual y la interacción con el usuario. Renderiza la interfaz de usuario utilizando tecnologías como HTML, CSS y JavaScript, y maneja eventos del usuario, como clics, entradas de datos y gestos. La Vista se actualiza dinámicamente en respuesta a cambios en el estado de la aplicación, proporcionando una experiencia de usuario más fluida y reactiva.

Modelo (Model)

El Modelo representa los datos y la lógica de negocio de la aplicación. Gestiona el estado de la aplicación y realiza operaciones como validaciones, transformaciones y cálculos. El Modelo interactúa con servicios externos para obtener y enviar datos, asegurando que la Vista siempre tenga acceso a información actualizada y precisa.

Controlador (Controller)

El Controlador actúa como intermediario entre la Vista y el Modelo. Maneja la lógica de la aplicación, coordinando las interacciones entre la interfaz de usuario y los datos. El Controlador recibe eventos de la Vista, realiza las operaciones necesarias en el Modelo y actualiza la Vista en consecuencia. En muchos frameworks modernos, el rol del Controlador puede estar integrado en los componentes de la Vista.

Servicios (Services)

Los Servicios encapsulan la lógica de negocio compartida y las interacciones con sistemas externos, como APIs y bases de datos. Facilitan la reutilización del código y la separación de preocupaciones al centralizar operaciones comunes. Por ejemplo, un servicio puede manejar la autenticación del usuario, realizar solicitudes HTTP o gestionar el almacenamiento en caché de datos.

Enrutador (Router)

El Enrutador gestiona la navegación dentro de la SPA, permitiendo la transición entre diferentes vistas o componentes sin recargar la página. Utiliza bibliotecas como React Router, Angular Router o Vue Router para definir rutas y asociarlas con componentes específicos. El Enrutador mejora la experiencia de usuario al proporcionar una navegación más rápida y fluida.

API y Comunicación con el Backend

Este componente maneja la interacción con el backend para obtener y enviar datos. Utiliza APIs RESTful o GraphQL para comunicar la aplicación con servicios externos y bases de datos. La API asegura que los datos sean accesibles y actualizados en tiempo real, manteniendo la integridad de la información a lo largo de la aplicación.

Gestión de Eventos (Event Management)

La Gestión de Eventos coordina las respuestas a eventos del usuario y del sistema. Maneja eventos como clics, entradas de datos, cambios de estado y notificaciones del servidor. Un sistema de gestión de eventos eficaz permite manejar estos eventos de manera estructurada y eficiente, mejorando la interactividad y la respuesta de la aplicación.

Gestión de Recursos Estáticos

Se encarga de la carga y gestión eficiente de archivos estáticos como imágenes, CSS y JavaScript. Utiliza técnicas como la compresión, el cacheo y el lazy loading para mejorar el rendimiento de la aplicación. La gestión adecuada de recursos estáticos es crucial para reducir los tiempos de carga y mejorar la experiencia del usuario.

Colector de Observabilidad en Microfrontends

La observabilidad es el grado en el que comprendemos el estado interno o la condición de un sistema complejo basándonos solo en el conocimiento de sus salidas externas. Cuanto más observable sea un componente software, más rápida y precisa será su respuesta ante cualquier tipo de problema.

La observabilidad se basa en la generación, recolección y análisis de métricas, trazas y log:

• Métricas: Las métricas permiten gestionar la salud individual de un componente software.
• Trazas: Analizan el estado de una petición y nos permite comprobar si estas peticiones navegan correctamente a través de los diferentes componentes software.
• Logs: Mensajes que dan información variada sobre un componente software.

Un componente software debe cuidar la observabilidad en todo su ciclo de vida:

• En el desarrollo: Implantando componentes reutilizables y desarrollados expresamente para la ADA que le permitan generar trazas, métricas y log estandarizados y que se acojan a las normas y pautas definidas por la ADA.
• En el despliegue: Integrando el microservicio con los agentes centralizados que recogen las trazas, métricas y logs y los distribuye a las plataformas de monitorización.
• Durante el uso: Definiendo alertas y configurando cuadros de mandos que permitan a los responsables de calidad verificar el correcto funcionamiento de los componentes software en tiempo real.

Web Components

Los Web Components son bloques de construcción reutilizables que encapsulan una funcionalidad específica, como widgets de UI, y se integran fácilmente con otros componentes de la aplicación. Al estandarizar la creación de componentes, los Web Components permiten el desarrollo de elementos personalizados que pueden ser utilizados a través de diferentes proyectos y frameworks.

Patrones de arquitectura y diseño

Los SPA, como arquitectura de desarrollo de software, presentan un conjunto de patrones específicos que guían su diseño e implementación. Estos patrones ayudan a estructurar el código de manera que sea más modular, mantenible y escalable.       
A continuación, se describen algunos de los patrones de arquitectura y diseño más relevantes para las SPAs.

Patrón modelo-vista-controlador (MVC)

El patrón Modelo-Vista-Controlador (MVC) es un patrón arquitectónico que separa la aplicación en tres componentes principales: Modelo, Vista y Controlador. Su objetivo es dividir las responsabilidades de la lógica de negocio, la presentación y el control de flujo, lo que permite una clara separación de las funciones, facilitando el mantenimiento y la escalabilidad de la aplicación.

• Modelo: Maneja los datos y la lógica de negocio. Es responsable de acceder y modificar los datos en el almacenamiento.
• Vista: Representa la interfaz de usuario. Escucha los cambios en el Modelo y actualiza la presentación en consecuencia.
• Controlador: Actúa como intermediario entre la Vista y el Modelo, recibe las entradas del usuario y las convierte en comandos que actualizan el Modelo o la Vista.

%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%22%20style%3D%22shape%3Dimage%3BverticalLabelPosition%3Dbottom%3BlabelBackgroundColor%3Ddefault%3BverticalAlign%3Dtop%3Baspect%3Dfixed%3BimageAspect%3D0%3Bimage%3Ddata%3Aimage%2Fpng%2CiVBORw0KGgoAAAANSUhEUgAAAyIAAAGvCAMAAACQIpFDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABjUExURQAAACTDwyPCwiTDwyPDwyPDwyLDwyPDwyTExCPCwiC%2FvyPDwyPDwyLCwiC%2FvyPDwyLCwiPCwiPDwyTExCPExCXFxSPDwyLBwSC%2FvyPExCTExCPDwyC%2FvyTExCC%2FvyPDwyPExKEarVIAAAAhdFJOUwBAWICvv8%2F%2F12AQp%2FdoGMdwUOc43zDveAifh7cgjyhIl1e776AAAAAJcEhZcwAAFxEAABcRAcom8z8AAAXySURBVHhe7dzJVttIAEBRgXGHgDGTIUAnaf7%2FKxtINYMtXrJu37uhNMDK78hSqZg%2BdXC4WBwt%2F%2FoC%2F2vHy%2BVi8fXgZHzu%2F9DJ4elq%2FAHYD0dn6%2FHx%2F72zo%2FFLsFfOL%2F7oWnJ5PM6HvXN1MTL43PVynAt7aXM5Upi39hWLvXd%2BM3KYcbMZJ8Eeu%2F30QnLpKRY8%2BzaS2LIYh2Hvnd6NKt67HweBL%2Be7jTyMQ8CToxHGq8txAHjxMNIYbtypw0eHI44Xa097YcvqeuTxzIwh7Ni83bIfjF3AO28vbFkUAjOu%2FruMeJoFs8Ys%2B517dZi1%2BrXK6mxsAlt%2BTY5YIQKf2DwXsh4bwI7ntSNfxxjYsXhK5O8xBnYcT9Odt7Pgc99NikC58MgXyoPluFDurceFsvRAC8qxt3yh3E5XYwTMmcZPYJZEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBJJEIEkEkkQgSQSSRCBJBNJ0OwbAnOl4DIAZq2k5RsCMzXQ%2FRsCM5fQwRsCM0%2BlijIAZP6avYwTM%2BDZ9HyNgxsE0nY8hsONqmqbFGAM77p8S%2BTnGwI5%2FnhKZNmMD2HJ795yImRH4xOlzIdN6NTaBj25eEnEZgXlHvwqZ7q7GDuCd1c%2BRiJdQYM6PEcjTZcSiEdixWo9Anhy4Y4dtFyOPF2djJzA8jjiGx7EbeLF8mTV8c2eBLryzORlpvDrxHgq8un193vtm7a14GDZjWv2jO%2F%2FpAV6c73zLGkwhwpPHrTv1dy79b0b23urDfMi2k4VJRPbb%2Fbs59VnrH%2BNM2ENHM0%2Bydnw%2F9XWL%2FXR0PSL4rctH78ezZ25PDz%2B%2FS59zvXhcLl1O2AfL5f3icnzwt0zTvxQ230G1GUMJAAAAAElFTkSuQmCC%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2260%22%20y%3D%22585%22%20width%3D%22802%22%20height%3D%22431%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%223%22%20value%3D%22%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22100%22%20y%3D%22615%22%20width%3D%22730%22%20height%3D%22370%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%224%22%20style%3D%22rounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BstrokeWidth%3D3%3BexitX%3D0%3BexitY%3D0.5%3BexitDx%3D0%3BexitDy%3D0%3B%22%20edge%3D%221%22%20source%3D%225%22%20target%3D%227%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%225%22%20value%3D%22%26lt%3Bb%26gt%3B%26lt%3Bfont%20style%3D%26quot%3Bfont-size%3A%2018px%3B%26quot%3B%26gt%3BMODELO%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fb%26gt%3B%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3BstrokeWidth%3D3%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22390%22%20y%3D%22660%22%20width%3D%22170%22%20height%3D%2270%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%226%22%20style%3D%22rounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BstrokeWidth%3D3%3BstrokeColor%3Ddefault%3BstartArrow%3Dclassic%3BstartFill%3D1%3B%22%20edge%3D%221%22%20source%3D%227%22%20target%3D%229%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%227%22%20value%3D%22%26lt%3Bb%26gt%3B%26lt%3Bfont%20style%3D%26quot%3Bfont-size%3A%2018px%3B%26quot%3B%26gt%3BVISTA%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fb%26gt%3B%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3BstrokeWidth%3D3%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22850%22%20width%3D%22170%22%20height%3D%2270%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%228%22%20style%3D%22rounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BentryX%3D1%3BentryY%3D0.5%3BentryDx%3D0%3BentryDy%3D0%3BstrokeWidth%3D3%3B%22%20edge%3D%221%22%20source%3D%229%22%20target%3D%225%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%229%22%20value%3D%22%26lt%3Bb%26gt%3B%26lt%3Bfont%20style%3D%26quot%3Bfont-size%3A%2018px%3B%26quot%3B%26gt%3BCONTROLADOR%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fb%26gt%3B%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3BstrokeWidth%3D3%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22600%22%20y%3D%22840%22%20width%3D%22170%22%20height%3D%2270%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E

• El Controlador actualiza la Vista y el Modelo según las acciones del usuario.
• El Modelo notifica a la Vista cuando hay cambios en los datos.
• La Vista captura eventos del usuario y los envía al Controlador.

Principios que aplican:

• Separación de Preocupaciones (Separation of Concerns)
• Componentización
• Desacoplamiento de Componentes
• Escalabilidad

Referencias:

• Microsoft Docs - ASP.NET MVC
• Jakarta MVC: Model-View-Controller Specification

Patrón modelo-vista-view model (MVVM)

El patrón Modelo-Vista-ViewModel (MVVM) es una variante del patrón MVC que introduce un componente adicional llamado ViewModel. Su objetivo es separar de manera clara la lógica de presentación de la lógica de negocio, permitiendo una mejor organización del código y facilitando la prueba unitaria.:

• Modelo: Maneja los datos y la lógica de negocio.
• Vista: Representa la interfaz de usuario.
• ViewModel: Se encarga de la lógica de presentación. Es una abstracción de la Vista que convierte los datos del Modelo en información que la Vista puede presentar.

• El ViewModel sirve como intermediario entre el Modelo y la Vista, proporcionando los datos del Modelo a la Vista y gestionando las interacciones de la interfaz de usuario.
• El Modelo notifica al ViewModel sobre cambios en los datos.
• La Vista está enlazada al ViewModel, facilitando el enlace de datos bidireccional, lo que asegura la sincronización entre los datos y la interfaz.

Principios que aplican:

• Separación de Preocupaciones (Separation of Concerns)
• Componentización
• Desacoplamiento de Componentes
• Escalabilidad

Referencias:

• Microsoft Learn - MVVM Pattern
• Martin Fowler - MVVM Pattern

Patrón component-based

El Patrón Component-Based se centra en la construcción de la interfaz de usuario mediante componentes reutilizables e independientes. Cada componente encapsula su propia lógica, estructura y presentación. Este enfoque modulariza la interfaz de usuario, permitiendo que los componentes individuales se desarrollen y prueben por separado, mejorando la mantenibilidad y escalabilidad de la aplicación. 

Componentes: Unidades reutilizables de la interfaz de usuario que pueden combinarse para formar interfaces más complejas. Cada componente es autónomo y maneja su propio estado y lógica.

• Los componentes hijos encapsulan su propia lógica y pueden ser combinados dentro de un componente padre.
• El componente padre es responsable de gestionar y coordinar los componentes más pequeños.

Principios que aplican:

• Separación de Preocupaciones (Separation of Concerns)
• Componentización
• Desacoplamiento de Componentes
• Escalabilidad

Referencias:

• Component-Based Web Development 

Patrón flux

Flux es un patrón de arquitectura de aplicaciones diseñado para crear interfaces de usuario que gestionan el flujo de datos de manera unidireccional. Este patrón establece una clara separación de responsabilidades y facilita el mantenimiento y escalabilidad de las aplicaciones al desacoplar la lógica de negocio del comportamiento de la interfaz de usuario.:

• Dispatcher: Mecanismo centralizado para enviar acciones.
• Stores: Contienen el estado y la lógica de la aplicación.
• Views: Componentes que escuchan los cambios en los Stores.

• Actions: Representan las intenciones del usuario o del sistema.

  

• En este patrón, las acciones representan las intenciones del usuario o del sistema y se envían al Dispatcher, un mecanismo centralizado.
• El Dispatcher distribuye las acciones a los Stores, que contienen el estado y la lógica de la aplicación.
• Los Stores notifican a las Views sobre cambios en el estado, y las Views, a su vez, envían acciones en respuesta a eventos del usuario.
• Este flujo de datos unidireccional facilita la depuración y asegura que los datos fluyan de manera predecible.

Principios que aplican:

• Separación de Preocupaciones (Separation of Concerns)
• Desacoplamiento de Componentes
• Escalabilidad
• Manejo del Estado (State Management)

Referencias:

• Facebook Flux - Documentation 
• Redux - Official Documentation 

Patrón contenedor y componente de presentación

El Patrón Contenedor y Componente de Presentación es un enfoque común en el desarrollo de interfaces de usuario modernas, especialmente en bibliotecas como React. Este patrón divide los componentes en dos tipos principales:

• Componentes de Contenedor: Se encargan de la lógica de negocio, manejo de estado y operaciones de datos. Actúan como intermediarios entre la store (almacén de estado) y la interfaz de usuario, proporcionando datos a los componentes de presentación.

• Componentes de Presentación: Se enfocan únicamente en la visualización, recibiendo datos a través de props y mostrando la interfaz de usuario. No manejan estado ni lógica de negocio directamente, lo que los hace más simples y reutilizables.

  

• El Componente Contenedor gestiona la lógica y maneja el estado de la aplicación.
• Los Componentes de Presentación se encargan únicamente de mostrar los datos proporcionados por el contenedor.
• Los componentes de presentación envían eventos al contenedor para manejar las interacciones del usuario.

Principios que aplican:

• Separación de Preocupaciones (Separation of Concerns)
• Componentización
• Desacoplamiento de Componentes
• Escalabilidad

Referencias:

• Container/Presentation Pattern

Patrón singleton

El Patrón Singleton es un patrón de diseño que garantiza que una clase tenga solo una instancia y proporcione un punto de acceso global a esa instancia. Esto es útil cuando un único objeto es necesario para coordinar acciones o gestionar recursos compartidos a lo largo de un sistema, como servicios o estados globales.

• Instanciación Única: El patrón Singleton asegura que solo se crea una instancia de la clase a lo largo de la vida de la aplicación.

• Acceso Global: La instancia creada es accesible de forma global, permitiendo que diferentes componentes o partes de la aplicación accedan a ella sin crear nuevas instancias.

  

• El Singleton contiene un método estático getInstance() que asegura que solo se cree una instancia de la clase.
• Componentes A, B y N acceden a la instancia del Singleton mediante este método, garantizando que siempre accedan a la misma instancia compartida.

Principios que aplican:

• Control de Estado Global
• Desacoplamiento de Componentes
• Reutilización de Recursos

Referencias:

• Singleton Pattern

Patrón observador (Observer)

El Patrón Observador (Observer) establece una relación de suscripción entre objetos, donde los observadores se suscriben a un sujeto y reciben notificaciones cuando el estado del sujeto cambia. Este patrón es útil en situaciones donde se necesita reflejar cambios en el estado de un modelo directamente en la vista sin que ambos estén fuertemente acoplados, como en las interfaces de usuario de las SPAs.

• Sujeto: Objeto que mantiene su estado y notifica a los observadores cuando su estado cambia.

• Observadores: Objetos que se suscriben al sujeto y responden a las notificaciones de cambio en su estado.

  

• El Sujeto mantiene el estado de la aplicación y notifica a los Observadores cuando hay un cambio en el estado.
• Los Observadores responden a los cambios en el sujeto, actualizando su estado o comportamiento de acuerdo con la nueva información.

Principios que aplican:

• Desacoplamiento de Componentes
• Separación de Preocupaciones (Separation of Concerns)
• Escalabilidad

Referencias:

• Observer Pattern
• Microsoft - Observer Design Pattern 

Pila tecnológica

View

HTML, CSS, Angular: Angular potencia la capa de vista en una SPA proporcionando un marco dinámico para renderizar HTML y CSS con control de interactividad y presentación.

• Descripción: Angular mejora HTML con una sintaxis de plantilla avanzada que incluye características como la vinculación de datos, directivas personalizadas y tuberías para la transformación de datos, haciendo que sea una herramienta poderosa para crear aplicaciones de una sola página interactivas y dinámicas. CSS se utiliza para el estilo, y el mecanismo de detección de cambios de Angular garantiza que el DOM se actualice de manera óptima a medida que cambian los datos, manteniendo un alto rendimiento y una experiencia de usuario sin problemas.
• Última versión lanzada:16.0.3

State Management 

NgRx: NgRx es un conjunto de herramientas para gestionar el estado en aplicaciones Angular usando patrones reactivos.

• Descripción: Inspirado en Redux, NgRx proporciona bibliotecas para gestionar estados globales y locales utilizando patrones reactivos, permitiendo una gestión del estado de la aplicación eficaz y predecible en aplicaciones Angular..
• Última versión lanzada: 13.0.1

Web Components

Lit: Clase base para la creación de Web Components.

• Descripción: Lit es una biblioteca ligera para construir componentes web rápidos y ligeros. Utiliza la API de Custom Elements y el motor de plantillas de lit-html para ofrecer una sintaxis simple y declarativa para crear componentes reutilizables.
• Última versión lanzada: 2.5.0

Router

Angular Router: Angular Router es la biblioteca oficial de Angular para gestionar la navegación en aplicaciones SPA.

• Descripción: El router permite la navegación de una vista a otra manteniendo el estado de la aplicación, y soporta rutas anidadas, parámetros de ruta, y cargas diferidas, lo que facilita la creación de aplicaciones web complejas.
• Última versión lanzada: Integrado con Angular 18.

Controller

Componentes de Angular: Los componentes son los bloques de construcción de las aplicaciones Angular.

• Descripción: Cada componente controla una parte de la pantalla denominada vista. Angular gestiona todos los componentes y su ciclo de vida a través de su framework, lo que permite la creación de interfaces de usuario dinámicas y modulares.
• Última versión lanzada: Sincronizado con Angular 18

Services

Servicios de Angular: Los servicios de Angular son objetos singleton que encapsulan lógica de negocio y servicios de datos.

• Descripción: Los servicios en Angular proporcionan un método para mantener los componentes ligeros y enfocados al delegar la lógica compleja y las operaciones de datos a servicios dedicados, promoviendo la reutilización y separación de responsabilidades.
• Última versión lanzada: Parte de Angular 18

API and Backend Communication

HTTPClient de Angular: HTTPClient es el mecanismo de Angular para comunicarse con el backend.

• Descripción: Proporciona una potente forma de realizar solicitudes HTTP, soportando objetos de solicitud y respuesta tipados, interceptores y observables, lo que facilita la comunicación eficiente con el servidor.
• Última versión lanzada: Integrado dentro de Angular 18

Colector de observabilidad 

OpenTelemetry: Es una herramienta de observabilidad de código abierto diseñada para instrumentar, generar, recolectar y exportar datos de telemetría (métricas, logs y trazas) de aplicaciones.

• Descripción: OpenTelemetry se compone de un conjunto de APIs, SDKs y herramientas que soportan diferentes lenguajes de programación y plataformas. Ofrece flexibilidad y extensibilidad para integrarse con diversas plataformas de observabilidad y sistemas de monitoreo. Es un proyecto de la Cloud Native Computing Foundation (CNCF) y es considerado un estándar de facto para la observabilidad moderna.
• Última versión lanzada: 1.22

Static Resources Management

Nginx: Nginx es un servidor web de alto rendimiento.

• Descripción: Nginx se utiliza no solo como servidor web, sino también como proxy inverso, proxy de correo y balanceador de carga, lo que lo convierte en una opción versátil para la entrega de aplicaciones web.
• Última versión lanzada: 1.24.0

Pipeline de CI/CD (CI/CD Pipeline)

Jenkins: Servidor de automatización de código abierto, asegurando que cada cambio en el código pase por pruebas rigurosas antes de llegar a producción.

• Descripción: Jenkins es una herramienta de automatización de código abierto para la integración continua y la entrega continua (CI/CD). Permite la construcción, prueba y despliegue automático de aplicaciones, asegurando que los cambios en el código se integren y desplieguen de manera eficiente y sin errores.
• Última versión lanzada: 2.401.2

Escenarios de aplicación

Las SPA han revolucionado la forma en que se desarrollan las aplicaciones web, permitiendo una experiencia de usuario más fluida e interactiva al minimizar las recargas de página y mejorar el rendimiento general. En diversos sectores, las SPAs se utilizan para optimizar procesos, mejorar la accesibilidad y ofrecer funcionalidades avanzadas. Este capítulo explora varios escenarios de aplicación de SPAs, destacando su implementación en contextos empresariales y del sector público. A través de descripciones detalladas, patrones de diseño y esquemas visuales, se ilustran las ventajas y características únicas que las SPAs aportan a diferentes tipos de aplicaciones.

Portal de Servicios Públicos

Escenario

Los portales de servicios públicos utilizan SPAs para ofrecer acceso unificado a diversos servicios gubernamentales en línea.

Descripción

• Estos portales integran servicios como pago de impuestos, solicitudes de licencias y acceso a registros personales en una única interfaz. La SPA facilita una navegación fluida sin recargar la página, mejorando la experiencia del usuario. Se utiliza OAuth o SAML para garantizar autenticación segura y protección de datos del usuario.
• Las APIs RESTful conectan el frontend con bases de datos gubernamentales, permitiendo actualizaciones de información en tiempo real. El patrón de Event Bus asegura una comunicación eficiente entre módulos, mejorando la coordinación de servicios.

Patrones

• Modelo-Vista-Controlador (MVC): Separa la lógica de negocio de la presentación, simplificando el mantenimiento del código.
• Singleton: Administra las sesiones del usuario y las configuraciones globales del portal.
• Event Bus / Pub-Sub: Facilita la comunicación entre módulos de servicios independientes

Sistema de Gestión de Recursos Humanos

Escenario

Los sistemas de gestión de recursos humanos (HRM) utilizan SPAs para centralizar la administración de personal, nóminas y beneficios en una interfaz integrada.

Descripción

• Estas aplicaciones permiten a los departamentos de recursos humanos gestionar los registros de empleados, realizar evaluaciones de desempeño y procesar la nómina. Utilizan Angular para manejar formularios interactivos y flujos de trabajo automatizados. La integración con APIs RESTful proporciona acceso a datos de empleados y permite actualizaciones en tiempo real. La autenticación se maneja mediante OAuth para garantizar la seguridad de los datos personales de los empleados.

Patrones

• Modelo-Vista-Presentador (MVP): Separa la lógica de presentación y negocio, facilitando el manejo de interacciones complejas.
• Component-Based Architecture: Permite la creación de componentes reutilizables para manejar diferentes funciones como gestión de registros y procesamiento de nóminas.
• Singleton: Administra configuraciones y sesiones de usuario de forma centralizada.

Plataforma de Información Geográfica para el Sector Público

Escenario

Los sistemas de información geográfica (SIG) del sector público utilizan SPAs para proporcionar visualización y análisis de datos espaciales.

Descripción

• Estas plataformas permiten a los usuarios interactuar con mapas en tiempo real, consultar capas de datos geoespaciales y realizar análisis espaciales. Utilizan bibliotecas como Leaflet o OpenLayers para renderizar mapas dinámicos y WebSockets para obtener actualizaciones en tiempo real de datos geoespaciales, como información meteorológica o de tráfico. El uso de GraphQL facilita el acceso eficiente a grandes volúmenes de datos geoespaciales.

Patrones

• Component-Based Architecture: Facilita la creación de componentes modulares y reutilizables para manejar diferentes capas y análisis de mapas.
• Observer / Observable: Actualiza automáticamente las vistas del mapa en respuesta a cambios en los datos geoespaciales.
• Flux: Gestiona el estado de la aplicación, permitiendo a los usuarios seleccionar y manipular capas de datos geográficos.

Plataforma de Atención al Ciudadano

Escenario

Las plataformas de atención al ciudadano del sector público utilizan SPAs para proporcionar un acceso centralizado a los servicios y asistencia gubernamentales.

Descripción

• Estas plataformas permiten a los ciudadanos acceder a servicios como solicitudes de documentos, seguimiento de casos y consultas de información. Utilizan Angular para facilitar la navegación entre diferentes servicios sin recargar la página. La integración con APIs RESTful permite la interacción con bases de datos gubernamentales y proporciona actualizaciones en tiempo real de las solicitudes. El uso de SAML para la autenticación asegura que los datos de los ciudadanos estén protegidos..

Patrones

• Modelo-Vista-Controlador (MVC): Separa la lógica de negocio de la presentación para simplificar el desarrollo y mantenimiento.
• Singleton: Administra la configuración y sesiones de usuario de manera centralizada.
• Event Bus / Pub-Sub: Coordina la comunicación entre módulos de servicios independientes

Referencias

Referencias técnicas:

• Webpack Module Federation
• Module Federation 2.0 Announcement
• GitHub Repository
• Angular Official Website
• React Official Website
• Vue.js Official Website
• Lit Official Website
• Lit GitHub Repository
• Nx Official Website
• Nx GitHub Repository
• NgRx Official Website
• NgRx GitHub Repository 
• RxJS Official Websote
• RxJS GitHub Repository 
• Redux Official Documentation1
• Service Workers
• Prometheus Official Website
• Prometheus Documentation
• Grafana Official Website
• Grafana Documentation
• Jenkins Official Website
• Jenkins Documentation
• NGINX Official Website
• NGINX Documentation
• OpenTelemetry
• Sentry
• Leaflet
• OpenLayers
• Auth0
• OAuth 2.0
• SAML