Norma para el desarrollo de microfrontends

Información general

Icono normas
Tipo de recurso
Normas
Etiquetas
Arquitectura

Descripción

Código: NOR_MFE

Versión actual: v01r00

Norma para el desarrollo de microfrontends o microfrontales, fragmentos independientes de interfaz que se integran en una aplicación de mayor tamaño, como parte de una solución, de acuerdo a la arquitectura de referencia Microfrontend.

Incluye un anexo con información básica sobre los estándares a los que hacen referencia las directrices de esta norma.

Ámbito de aplicación de la norma

Esta norma es de aplicación tanto para nuevos desarrollos como mantenimientos que incluyan la creación de microfrontends.

Las directrices que contiene la norma son independientes de la pila tecnológica que se utilice. Los objetivos y características de la arquitectura no están vinculados a la tecnología de implementación. 

Por tanto, al implementar un microfrontend con una tecnología específica, hay que cumplir con:

  • Las normas y estándares referidos en esta página.
  • Otras normas particulares establecidas para dicha tecnología.

Puedes conocer en esta sección  cómo se marca la obligatoriedad de cumplimiento de las directrices que componen la norma.

Diseño

Principio de modularidad

La modularidad es un principio fundamental en la arquitectura de microfrontends, que garantiza que la aplicación esté dividida en componentes independientes y reutilizables. Esto facilita la escalabilidad, el mantenimiento y la colaboración entre equipos.

DIR_01 Modularidad

OBLIGATORIO Los microfrontales estarán estructurados de manera modular, con componentes independientes y bien delimitados, permitiendo que cada uno pueda escalar de forma autónoma sin impactar a otros microfrontales:

  • Estarán descompuestos en microfrontends funcionales independientes, cada uno responsable de una parte específica de la aplicación, como autenticación, módulos funcionales de gestión, administración, presentación telemática, etc. Esta independencia permite que los módulos sean desarrollados, desplegados y mantenidos por separado, asegurando que la aplicación pueda escalar y evolucionar sin generar dependencias críticas entre módulos.
  • Se diseñarán para que puedan ser desplegados y escalados individualmente según las necesidades de carga o uso. Esto mejora la capacidad de respuesta y la eficiencia del sistema en su conjunto, permitiendo que los microfrontales puedan crecer según los requisitos del tráfico o funcionalidad.
  • Es recomendable reutilizar componentes comunes siempre que sea posible, utilizando librerías compartidas o servicios centralizados. Esto ayuda a evitar la duplicación de código y mejora la cohesión entre los microfrontales, manteniendo la coherencia en el diseño de la aplicación.
  • Es recomendable permitir cierta flexibilidad tecnológica en la elección de herramientas y frameworks para cada microfrontend, siempre y cuando no se comprometa la interoperabilidad ni la modularidad del sistema y vayan alineadas con la arquitectura de referencia de microfrontends de la oficina de arquitectura. 
  • Es recomendable dividir las funcionalidades grandes en múltiples microfrontales más pequeños, asegurando que cada uno sea lo suficientemente pequeño para ser manejado de forma independiente, lo que favorece la escalabilidad y la mantenibilidad.
  • No se crearán microfrontales que tengan dependencias críticas con otros microfrontales que les impidan escalar de manera autónoma. Cualquier interacción entre microfrontales debe ser desacoplada y gestionada a través de eventos o APIs bien definidas.

 

Principio de Responsabilidad Única (SRP)

Cada microfrontend estará dedicado a cumplir con una sola función o responsabilidad. Además de reducir la complejidad y por ende, mejorar la mantenibilidad, también asegura que cada parte puede ser evolutiva de manera controlada sin impactar las otras. También limita los cambios y promueve la depuración y desarrollo.

DIR_02 Responsabilidad única

OBLIGATORIO Los microfrontales estarán estructurados de manera modular, con componentes independientes y bien delimitados, permitiendo que cada uno pueda escalar de forma autónoma sin impactar a otros:

  • Se enfocarán exclusivamente en una sola funcionalidad, asegurando que cualquier cambio o evolución solo afecte a esa área, lo que facilita el mantenimiento y reduce el riesgo de introducir errores al implementar nuevas características o correcciones.
  • Mantendrán el código cohesivo y fácil de entender, evitando la inclusión de funcionalidades no relacionadas. Esto también facilita la depuración y permite que los desarrolladores se enfoquen en áreas específicas de la aplicación.
  • Es recomendable realizar revisiones periódicas de las responsabilidades de cada microfrontend para evitar la acumulación de "deuda técnica", asegurando que cada microfrontend se limite a sus responsabilidades previstas.
  • Es recomendable documentar claramente la responsabilidad o propósito de cada microfrontend, para que los desarrolladores y otros equipos comprendan su rol dentro de la aplicación y cómo debe evolucionar. 

 

Consistencia de la Interfaz de Usuario

La consistencia en la interfaz de usuario es crucial para asegurar una experiencia de usuario coherente y predecible en todos los microfrontends. Esto incluye la utilización de un diseño visual uniforme, patrones de interacción comunes y la reutilización de componentes de UI.

DIR_03 Sistema de diseño

OBLIGATORIO Los microfrontends seguirán el sistema de diseño de la Junta de Andalucía publicado en el portal de desarrollo de servicios digitales para garantizar la consistencia de la interfaz de usuario en toda la aplicación: 

  • Utilizar el sistema de diseño compartido, que incluye guías de estilo, componentes visuales y patrones de interacción, asegurando una apariencia y comportamiento uniformes en toda la aplicación.
  • Respetar las guías de estilo definidas, como tipografía, colores, espaciado y otros elementos visuales, para mantener la uniformidad en la interfaz de usuario.
  • Los cambios en el sistema de diseño o en los componentes compartidos se han de propagar de manera coherente en todos los microfrontends, preservando la coherencia visual y funcional.
  • Es recomendable realizar auditorías periódicas de la interfaz de usuario para verificar que los microfrontends cumplan con las guías de estilo y para identificar desviaciones que necesiten ser corregidas.
  • Es recomendable documentar cualquier adaptación o personalización específica del sistema de diseño utilizada en el microfrontend, justificando y aprobando dichas variaciones a través de un proceso definido por la Oficina de Arquitectura o el equipo responsable.
 

DIR_04 Reutilización de componentes

OBLIGATORIO Los componentes de la interfaz de usuario deben ser reutilizables y compartidos entre los microfrontends para mantener la consistencia y la coherencia visual en toda la aplicación:

  • Utilizar componentes de UI provenientes de una librería común proporcionada y gobernada por la Oficina de Arquitectura (OdA) o el equipo asignado responsable. Esto asegura que los elementos visuales y patrones de interacción sean consistentes en los diferentes microfrontends, evitando duplicar esfuerzos y manteniendo una experiencia de usuario uniforme.
  • Diseñar los componentes de manera que permitan su fácil integración en cualquier microfrontend, con opciones de personalización limitadas para garantizar que la coherencia visual se mantenga en toda la aplicación.
  • Es recomendable que cualquier nuevo componente necesario para un microfrontend específico sea evaluado para su inclusión en la librería de componentes compartidos de la OdA. Los equipos de desarrollo pueden proponer nuevos componentes a la OdA, quienes revisarán su viabilidad y coherencia con el sistema.

DIR_05 Coherencia en la experiencia de uso

OBLIGATORIO La interfaz de usuario será coherente en todas las plataformas y dispositivos, asegurando una experiencia uniforme para todos los usuarios:

  • Aplicar el diseño responsivo establecido en el sistema de diseño para garantizar que los microfrontends se adapten correctamente a diferentes tamaños de pantalla y dispositivos, manteniendo la coherencia en la experiencia del usuario.
  • Seguir patrones de navegación y disposición consistentes en todos los microfrontends, independientemente del dispositivo o plataforma, para evitar confusión y mejorar la usabilidad.
  • Es recomendable realizar pruebas de usabilidad en múltiples dispositivos y navegadores para verificar que la experiencia del usuario sea satisfactoria y consistente en todos los contextos de uso.
  • Es recomendable documentar las adaptaciones específicas para diferentes plataformas en el sistema de diseño, asegurando que los desarrolladores comprendan cómo implementar interfaces coherentes en diversas condiciones.

 

Gestión de Estado

La gestión de estado en los microfrontends garantiza que los datos se manejen de manera consistente y eficiente en toda la aplicación. Una gestión adecuada del estado asegura la sincronización correcta entre la interfaz de usuario y los datos subyacentes, mejorando la experiencia del usuario y facilitando el mantenimiento del sistema.

DIR_06 Gestión eficiente del estado

OBLIGATORIO El estado local de cada microfrontend se gestionará de manera independiente, y solo podrá compartirse con otros microfrontends mediante mecanismos autorizados: 

  • Encapsular dentro de cada microfrontend su estado. La comunicación entre microfrontales para compartir o sincronizar estado debe realizarse a través de eventos desacoplados (Pub/Sub), o mediante APIs REST/GraphQL para evitar dependencias directas entre ellos.
  • Utilizar patrones de gestión de estado aprobados, como Redux, Vuex, o Context API, para asegurar que el manejo del estado sea predecible y fácil de mantener.
  • Es recomendable documentar claramente cómo se gestiona el estado en cada microfrontend, incluyendo diagramas de flujo de datos y descripciones de la lógica de estado, para facilitar la comprensión y el mantenimiento.
  • Es recomendable revisar periódicamente las estrategias de gestión de estado para asegurarse de que se mantengan eficientes y escalables a medida que la aplicación crece.

DIR_07 Sincronización del estado

OBLIGATORIO Sincronizar el estado entre microfrontend mediante mecanismos desacoplados, garantizando que los datos se actualicen correctamente sin dependencias fuertes entre los módulos: 

  • Implementar mecanismos de sincronización a través de eventos desacoplados como Pub/Sub o mensajería reactiva, donde los microfrontend pueden publicar y suscribirse a eventos sin requerir conocimiento directo de otros módulos.
  • Manejar posibles conflictos de sincronización utilizando resoluciones de conflictos claras, como la priorización de la última actualización válida o mediante versiones controladas del estado.
  • Es recomendable evitar la sincronización de estados innecesarios o triviales entre microfrontend, limitándose únicamente a los datos que sean indispensables para la interacción entre ellos.

DIR_08 Manejo del estado

OBLIGATORIO La persistencia del estado se manejará para garantizar una experiencia de usuario fluida y la integridad de los datos: 

  • Diseñar mecanismos de persistencia del estado que permitan la recuperación del mismo después de recargas de página o cambios de contexto, utilizando almacenamiento local, IndexedDB, o mecanismos similares, según sea necesario.
  • Asegurar que la persistencia del estado no comprometa la seguridad o la privacidad del usuario, implementando medidas adecuadas de cifrado y gestión segura de datos.
  • Implementar un mecanismo de limpieza o expiración de datos persistidos para evitar la acumulación de datos obsoletos que puedan afectar el rendimiento de la aplicación.

DIR_09 Manejo del estado global

OBLIGATORIO La gestión del estado global, cuando sea necesaria, estará claramente definida y controlada: 

  • Utilizar soluciones centralizadas de gestión de estado global  solo cuando sea necesario para sincronizar datos críticos entre microfrontends, y debe estar claramente documentado y mantenido
  • Implementar estrategias claras para el manejo de cambios en el estado global, asegurando que todos los microfrontends que dependen de dicho estado reaccionen adecuadamente a las actualizaciones.
  • Es recomendable limitar el uso del estado global a los casos en los que sea estrictamente necesario, favoreciendo la gestión de estado local siempre que sea posible para mantener la modularidad y simplicidad del sistema.
  • Es recomendable auditar periódicamente el estado global para asegurarse de que sigue siendo necesario y que no se ha vuelto un cuello de botella o un punto único de fallo.

 

Optimización de Rendimiento

La optimización del rendimiento es esencial para garantizar que los microfrontends ofrezcan una experiencia de usuario rápida y fluida, minimizando los tiempos de carga y mejorando la eficiencia de las interacciones

DIR_10 Tiempo de carga y uso de recursos

OBLIGATORIO Minimizar el tiempo de carga y mejorar la eficiencia de los recursos:

  • Utilizar técnicas de minimización y compresión de archivos (CSS, JavaScript, imágenes) para reducir el tamaño de los recursos enviados al cliente.
  • Implementar la carga diferida (lazy loading) para imágenes, scripts y otros recursos no críticos, asegurando que solo se carguen cuando sean necesarios. Esto reduce la sobrecarga inicial y mejora la percepción de rendimiento.
  • Es recomendable emplear particionamiento de código (code splitting) para dividir el JavaScript en fragmentos más pequeños, cargando únicamente lo necesario para la vista actual. Esto mejora la velocidad de carga inicial y optimiza la interactividad.
  • Es recomendable optimizar las consultas a la API para reducir la cantidad de datos transferidos y minimizar el tiempo de respuesta, utilizando técnicas como paginación, filtrado y compresión de respuestas.

DIR_11 Rendimiento lado cliente

OBLIGATORIO Implementar estrategias de optimización del rendimiento del lado del cliente para garantizar una experiencia de usuario ágil y eficiente, minimizando los tiempos de carga y mejorando la interacción en la aplicación:

  • Implementar almacenamiento en caché de recursos estáticos en el navegador del usuario, estableciendo políticas de caché adecuadas (como control de cache con headers Cache-Control y ETag) para maximizar la reutilización de recursos entre visitas. Esto minimiza la necesidad de recargar recursos inalterados y mejora la velocidad de navegación.
  • Utilizar técnicas de prerenderizado o renderizado en el servidor (Server-Side Rendering, SSR) cuando sea necesario, especialmente en aplicaciones con mucho contenido dinámico o que requieren un rendimiento óptimo en el tiempo de carga inicial.
  • Es recomendable integrar un Content Delivery Network (CDN) para distribuir recursos estáticos (CSS, JavaScript, imágenes) de manera eficiente y reducir la latencia de carga para usuarios en diferentes ubicaciones geográficas.
  • Es recomendable monitorear continuamente el rendimiento en el cliente utilizando herramientas de análisis de rendimiento para identificar y corregir cuellos de botella en el rendimiento.

DIR_12 Rendimiento de las interacciones con el servidor

OBLIGATORIO Optimizar el rendimiento en las interacciones con el servidor del microfrontend para mantener la eficiencia y la escalabilidad:

  • Implementar prácticas de optimización en las llamadas a la API, incluyendo la compresión de datos, la reducción de la carga útil y la utilización de respuestas en caché cuando sea posible. Esto reduce la latencia y mejora el rendimiento general de la aplicación.
  • Utilizar técnicas de priorización y paralelización de solicitudes para optimizar el tiempo de respuesta en escenarios de alta demanda. Esto asegura que las operaciones críticas se completen lo más rápido posible sin bloquear otras tareas.
  • Es recomendable implementar mecanismos de reintento y manejo de errores robustos para gestionar las fallas en la comunicación con el servidor, minimizando el impacto en la experiencia del usuario.

DIR_13 Mejora continua del rendimiento

OBLIGATORIO Optimizar y monitorizar su rendimiento de manera continua para garantizar eficiencia, escalabilidad y una experiencia de usuario fluida:

  • Integrar el sistema de observabilidad centralizado de la Junta de Andalucía mediante el protocolo OpenTelemetry, asegurando una monitorización constante del rendimiento y alertas en caso de degradación.
  • Es recomendable realizar pruebas de carga regulares para evaluar el comportamiento de los microfrontends bajo condiciones de alta demanda y garantizar su capacidad de escalar.
  • Es recomendable incluir el rendimiento como un criterio clave en revisiones de código y pruebas automatizadas para prevenir posibles degradaciones en nuevas implementaciones.
 

Accesibilidad

La accesibilidad es un aspecto fundamental del diseño y desarrollo de microfrontends, garantizando que todos los usuarios, incluidas las personas con discapacidades, puedan interactuar eficazmente con la aplicación. Cumplir con las normas de accesibilidad no solo es una responsabilidad social, sino que también mejora la usabilidad general y la satisfacción del usuario.

DIR_14 Accesibilidad

OBLIGATORIO Cumplir con las Directrices de Accesibilidad para el Contenido Web (WCAG) y con las políticas establecidas en el documento de Normativa de Accesibilidad de la Junta:

  • Asegurar que todas las funcionalidades y contenidos sean accesibles para todos los usuarios, incluidas las personas con discapacidades, siguiendo los lineamientos definidos en el documento de normas de accesibilidad.

 

Construcción

Selección de Tecnología

La selección de tecnologías adecuadas es fundamental para garantizar que los microfrontends sean eficientes, escalables y mantenibles. Las decisiones tecnológicas deben alinearse con los objetivos del proyecto, las capacidades del equipo y las directrices establecidas por la oficina de arquitectura y el documento de arquitectura de referencia para microfrontends

DIR_15 Tecnología

OBLIGATORIO La selección de tecnología debe alinearse con el stack tecnológico definido y aprobado por la Oficina de Arquitectura (OdA) en el documento de arquitectura de referencia de microfrontends:

  • Utilizar únicamente tecnologías especificadas en el stack tecnológico aprobado por la OdA, asegurando que cada elección permita una integración fluida y coherente entre los diferentes módulos de la arquitectura de microfrontends.
  • Emplear versiones de las tecnologías que estén respaldadas y actualizadas conforme a las directrices de la OdA, garantizando que cada módulo cumpla con los requisitos de estabilidad y seguridad en entornos de desarrollo y producción.
  • Es recomendable que los equipos de desarrollo verifiquen periódicamente que están utilizando la última versión autorizada de cada tecnología en el stack, asegurando que los microfrontends mantengan compatibilidad y rendimiento óptimos.
  • Es recomendable mantener coherencia tecnológica entre los microfrontends utilizando el conjunto limitado de tecnologías aprobadas, facilitando así la integración, el mantenimiento y la colaboración entre equipos. 

 

Calidad del código

Mantener la calidad del código es esencial para asegurar la mantenibilidad, escalabilidad y seguridad del software. Las normas de calidad del código ayudan a reducir errores, mejorar la legibilidad y facilitar la colaboración entre los desarrolladores.

DIR_16 Estándares de calidad

OBLIGATORIO El código de los microfrontends cumplirá los estándares de calidad definidos por la Oficina de Calidad de la ADA para garantizar su mantenibilidad y seguridad:

  • Seguir un conjunto de estándares de codificación bien definidos y aprobados por la organización, incluyendo el uso de linters, formateadores y otras herramientas para mantener la consistencia en el estilo y la estructura del código.
  • Es recomendable realizarse revisiones de código regulares por parte de otros desarrolladores o pares del equipo para identificar problemas, compartir conocimiento y mejorar la calidad general del código.
  • Es recomendable documentar el código de manera clara y concisa, incluyendo comentarios que expliquen la lógica y el propósito de secciones complejas, facilitando la comprensión y el mantenimiento del código a largo plazo.
  • Es recomendable adoptar prácticas de desarrollo orientadas a pruebas, como Test-Driven Development (TDD), para mejorar la calidad del código desde el inicio del desarrollo.

DIR_17 Análisis de la calidad

OBLIGATORIO El código será analizado continuamente para asegurar su calidad y seguridad: 

  • Utilizar herramientas de análisis estático de código que identifiquen vulnerabilidades, malas prácticas y posibles errores antes de que el código sea desplegado. Esto asegura que el código cumpla con los estándares de calidad y seguridad establecidos.
  • Integrar pruebas automatizadas que cubran un alto porcentaje del código, incluyendo pruebas unitarias, de integración y de regresión, asegurando que el código sea robusto y libre de errores conocidos.
  • Es recomendable realizar revisiones de calidad del código antes de cada despliegue importante, asegurando que no se introduzcan nuevas vulnerabilidades o errores en producción.

 

Políticas para la gestión de errores

La gestión adecuada de errores mantiene la estabilidad y la confiabilidad de los microfrontends. Las políticas de gestión de errores aseguran que los problemas se detecten, manejen y comuniquen de manera efectiva, minimizando el impacto en la experiencia del usuario y facilitando la resolución rápida de problemas.

DIR_18 Manejo de errores

OBLIGATORIO Implementar un manejo de errores consistente y predecible para mantener la estabilidad del sistema y la calidad de la experiencia del usuario:

  • Capturar y manejar los errores de manera consistente, utilizando bloques try-catch y mecanismos centralizados de manejo de errores tanto para errores síncronos como asíncronos.
  • Registrar todos los errores críticos en un sistema centralizado de logs, facilitando el monitoreo y el análisis en tiempo real. Los logs deben contener el stack trace, el contexto del error y cualquier información adicional significativa para diagnosticar el problema.
  • Es recomendable configurar un sistema de alertas que notifique al equipo de desarrollo de forma automática sobre los errores críticos del entorno de producción, posibilitando una pronta reacción.
  • Es recomendable aplicar una estrategia de manejo de errores que posibilite la recuperación automática siempre que sea posible, de esta manera se minimiza el impacto en la experiencia del usuario.

DIR_19 Mensajes de error

OBLIGATORIO Los microfrontends proporcionarán mensajes de error claros y útiles tanto para los desarrolladores como para los usuarios finales, garantizando una experiencia coherente y efectiva en caso de fallos:

  • Proporcionar mensajes de error comprensibles y detallados para los desarrolladores en los logs, incluyendo información suficiente para diagnosticar y resolver el problema rápidamente.
  • Mostrar mensajes de error amigables al usuario final que no expongan detalles técnicos innecesarios, pero que informen claramente sobre lo que salió mal y, si es posible, cómo proceder. Esto mejora la experiencia del usuario y reduce la frustración en caso de fallos.
  • Es recomendable proporcionar mecanismos de feedback al usuario final en caso de error, como botones para reintentar o enlaces a páginas de ayuda, facilitando la recuperación de la situación.
  • Es recomendable documentar los códigos de error utilizados en el sistema para que el equipo de soporte pueda proporcionar asistencia efectiva y rápida cuando sea necesario.

DIR_20 Errores de red

OBLIGATORIO Los microfrontends implementarán una gestión robusta de errores de red para garantizar la resiliencia en entornos con conectividad inestable, preservando la experiencia del usuario y la estabilidad del sistema:

  • Manejar adecuadamente las desconexiones y reconexiones, mostrando mensajes claros y apropiados al usuario, e intentando recuperar la operación automáticamente cuando la conectividad se restablezca.
  • Utilizar un servicio centralizado para la gestión de errores de red, que pueda monitorizar y reportar patrones de fallos, ayudando a identificar problemas sistémicos o intermitentes en la infraestructura.
  • Es recomendable probar los microfrontends en entornos simulados de conectividad limitada para asegurar que se comporten de manera predecible y segura bajo condiciones adversas.

DIR_21 Resiliencia

OBLIGATORIO Los microfrontends contarán con mecanismos robustos para la gestión de errores persistentes y la recuperación ante fallos, asegurando la resiliencia del sistema y minimizando el impacto en la experiencia del usuario:

  • Implementar un sistema de recuperación ante fallos que permita restaurar el estado previo de la aplicación tras un error crítico, siempre que sea posible. Esto incluye la capacidad de guardar el estado temporal y restaurarlo después de que el problema haya sido resuelto.
  • Se diseñará para capturar y reportar errores persistentes que no puedan ser resueltos inmediatamente, facilitando su análisis y corrección en futuras iteraciones del desarrollo.
  • Es recomendable que los microfrontends incluyan capacidades de auto-diagnóstico, donde se puedan identificar y aislar módulos o componentes problemáticos, minimizando el impacto en el resto del sistema.
  • Es recomendable planificar y probar escenarios de recuperación ante fallos durante el ciclo de desarrollo, asegurando que las estrategias de mitigación y recuperación funcionen como se espera.

 

Observabilidad

Monitorización

La monitorización es esencial para asegurar que los microfrontends estén operando de manera eficiente y para detectar problemas antes de que afecten a los usuarios finales.

DIR_22 Monitoreo

OBLIGATORIO Los microfrontends implementarán un sistema de monitoreo robusto (Open Telemetry) que permita la observación continua de su estado, rendimiento y disponibilidad:

  • Integrar en un sistema centralizado que recopile métricas clave sobre el rendimiento de la aplicación, la tasa de errores y el uso de recursos. Estas métricas deben ser accesibles en tiempo real para los equipos de desarrollo y operaciones, facilitando la detección temprana de problemas y su resolución.
  • Configurar alertas basadas en umbrales críticos para métricas como el tiempo de respuesta, la tasa de errores y el uso de recursos, permitiendo la detección temprana de problemas.
  • Es recomendable monitorear métricas específicas de la experiencia del usuario, como el tiempo de carga de la página y el tiempo hasta la interactividad, para asegurar que los microfrontends estén ofrezciendo una experiencia fluida.
  • Es recomendable realizar revisiones periódicas de las métricas recopiladas para identificar patrones, tendencias o áreas de mejora en el rendimiento de los microfrontends. 

DIR_23 Disponibilidad y resiliencia

OBLIGATORIO El monitoreo de los microfrontends medirá su disponibilidad y resiliencia: 

  • Implementar comprobaciones de salud (health checks) en cada microfrontend para monitorear continuamente su estado y disponibilidad, permitiendo que los servicios externos verifiquen la salud del microfrontend antes de interactuar con él.
  • Utilizar dashboards centralizados que presenten el estado actual de los microfrontends en términos de disponibilidad, errores y rendimiento, facilitando la supervisión continua..
  • Es recomendable simular fallos de microfrontends en entornos de prueba para validar la eficacia del monitoreo y la resiliencia del sistema bajo condiciones adversa.
  • Es recomendable compartir la información relevante del monitoreo con todos los equipos involucrados, asegurando una respuesta coordinada y eficiente en caso de incidentes.

 

Logging

El logging es una herramienta crucial para entender el comportamiento de los microfrontends, facilitando la depuración de problemas y proporcionando un historial de eventos para su análisis.

DIR_24 Registro de eventos y errores

OBLIGATORIO Registrar eventos y errores de los microfrontendsde manera consistente y centralizada, para facilitar su análisis, diagnóstico y resolución de problemas:

  • Registrar eventos clave y errores en un sistema de logging centralizado que permita la correlación y el análisis posterior. Los logs deben incluir información detallada como el timestamp, el contexto del error, y el stack trace.
  • Implementar políticas de retención de logs que equilibren la necesidad de almacenamiento con la necesidad de mantener un historial adecuado para análisis forenses y auditorías.
  • Es recomendable utilizar un formato estructurado para los logs (por ejemplo, JSON) que facilite la búsqueda, el filtrado y el análisis automatizado de la información registrada.
  • Es recomendable integrar el logging con herramientas de análisis de logs que permitan la detección de patrones y la generación de alertas basadas en la ocurrencia de eventos específicos.

DIR_25 Logs compartidos

OBLIGATORIO Los logs serán accesibles y utilizables por los diferentes equipos involucrados en su mantenimiento y operación de los microfrontends: 

  • Almacenar los logs en una plataforma accesible y segura, donde los equipos de desarrollo, operaciones y seguridad puedan acceder para realizar análisis y depuración.
  • Implementar políticas de control de acceso que aseguren que solo las personas autorizadas puedan ver y manipular los logs, protegiendo la información sensible y cumpliendo con las regulaciones de privacidad. 
  • Usar herramientas de visualización de logs que faciliten la comprensión de los datos y la identificación rápida de problemas, como Open Telemetry  .
  • Es recomendable que los logs sean revisados regularmente para identificar posibles áreas de mejora en la arquitectura o en los procesos operativos.
 

Trazabilidad

La trazabilidad ayuda a entender el flujo de datos y la interacción entre los microfrontends, permitiendo rastrear solicitudes y detectar problemas en la comunicación entre componentes.

DIR_26 Trazabilidad

OBLIGATORIO Implementar mecanismos de trazabilidad de los microfrontends que permitan rastrear el flujo de datos y solicitudes a lo largo de todo el sistema:

  • Utilizar identificadores únicos de trazabilidad (trace IDs) que acompañen cada solicitud a lo largo de su ciclo de vida, desde su inicio hasta la respuesta final. Esto facilita el seguimiento detallado del recorrido de cada solicitud y permite la correlación de eventos.
  • Integrar con sistemas de trazabilidad distribuida que permitan visualizar el flujo de solicitudes a través de múltiples microfrontends, identificando cuellos de botella y fallos en la comunicación.
  • Es recomendable que los mecanismos de trazabilidad capturen información adicional, como tiempos de respuesta y las interacciones entre microfrontends, proporcionando una visión completa del rendimiento y la eficiencia del sistema.
  • Es recomendable revisar periódicamente los datos de trazabilidad para identificar patrones que puedan indicar problemas sistémicos o áreas de mejora en la arquitectura.

DIR_27 Traza compartida

OBLIGATORIO La trazabilidad de los microfrontends será accesible y útil para los diferentes equipos responsables de la operación y el mantenimiento:

  • Almacenar los datos de trazabilidad en un sistema accesible y que permita consultas ad-hoc por parte de los equipos de desarrollo, operaciones y seguridad.
  • Documentar los patrones de trazabilidad y cómo deben ser interpretados para ayudar a los equipos a entender el flujo de datos y las interacciones en el sistema.
  • Es recomendable integrar la trazabilidad con las herramientas de monitoreo y logging, proporcionando una vista unificada de la operación del sistema y facilitando la identificación y resolución de problemas.
  • Es recomendable capacitar a los equipos en el uso de las herramientas de trazabilidad y en la interpretación de los datos, asegurando que puedan responder rápidamente a cualquier incidente o problema.

 

Seguridad

DIR_28 Sesiones

OBLIGATORIO La gestión de sesiones basadas en cookies seguirán las prácticas de seguridad establecidas en la norma para el desarrollo seguro, incluyendo la configuración de las cookies con las banderas HttpOnly y Secure para protegerlas contra accesos indebidos y garantizar que solo se transmitan a través de conexiones HTTPS.

Además, se debe aplicar la política SameSite para mitigar ataques CSRF, configurándola como Lax o Strict. El ciclo de vida de la sesión será gestionado de manera segura, asegurando la validación constante del identificador de sesión por parte del servidor (ASVS V3.4).

DIR_29 Protección de directorios

OBLIGATORIO La deshabilitación de la exploración de directorios en servidores Node.js se implementará utilizando un middleware adecuado, como el proporcionado en Express.js, para garantizar que las solicitudes de directorios sean rechazadas con un error 403 Forbidden. Esto es esencial para prevenir el acceso no autorizado a archivos y directorios sensibles. Esta práctica está alineada con los requisitos de seguridad establecidos en la norma para el desarrollo seguro (ASVS V4.1, V4.3). 

DIR_30 Evitar ataques CSRF

OBLIGATORIO Implementar mecanismos anti-CSRF para prevenir ataques de falsificación de solicitudes entre sitios. Se generará un token único anti-CSRF en el servidor, el cual se asociará con la sesión del usuario y se enviará con cada solicitud que pueda modificar el estado del servidor. El servidor validará este token con cada petición para garantizar su legitimidad. Esta norma está alineada con la norma para el desarrollo seguro para mitigar ataques CSRF (ASVS V4.2).

Se exceptúan de esta medida aquellos escenarios en los que no se requiera control de accesos ni autenticación de usuarios, y en los que el impacto de un ataque CSRF sea insignificante. Esta norma está alineada con la norma para el desarrollo seguro para mitigar ataques CSRF (ASVS V4.2). 

DIR_31 Validación de los datos de entrada

OBLIGATORIO Se validarán las entradas para garantizar que los datos proporcionados por los usuarios cumplan con los criterios de formato, tipo y longitud. La validación rigurosa previene ataques como la inyección de código y manipulación de datos, protegiendo así la integridad de la aplicación. Esta norma sigue las directrices la norma para el desarrollo seguro (ASVS V5.1). 

DIR_32 Validación de parámetros de entrada

OBLIGATORIO Se validarán los parámetros de entrada para garantizar que los datos proporcionados cumplan con reglas predefinidas, incluyendo la restricción a caracteres permitidos. Esta validación se realizará en el servidor para evitar su omisión. La sanitización de datos también es obligatoria para eliminar caracteres peligrosos que puedan ser usados en ataques como inyección de SQL o XSS, según las directrices de la norma para el desarrollo seguro (ASVS V5.1). 

DIR_33 Control de tipado

OBLIGATORIO Establecer límites de longitud en las entradas y utilizar tipos de datos fuertemente tipados para garantizar la seguridad y estabilidad de la aplicación. Definir una longitud máxima previene ataques como desbordamiento de búfer, y usar tipos de datos adecuados asegura una manipulación segura y consistente. Se validará que los datos recibidos corresponden al tipo esperado y se manejarán adecuadamente los errores de conversión conforme a la norma para el desarrollo seguro (ASVS V5.1).

DIR_34 Sanitización de datos de entrada

OBLIGATORIO Se depurarán los datos de entrada para garantizar que no contengan contenido malicioso. La eliminación o escape de caracteres especiales y la validación de la estructura de los datos evita ataques como la inyección de código. Esta medida es obligatoria para proteger la integridad del sistema, de acuerdo con la norma para el desarrollo seguro (ASVS V5.2). 

DIR_35 Sanitización de entradas de código

OBLIGATORIO Se depurarán entradas de código para eliminar cualquier código potencialmente peligroso, como scripts o etiquetas HTML, que los usuarios intenten introducir. Esto previene ataques de inyección de código y protege la integridad de la aplicación, siguiendo las directrices de la norma para el desarrollo seguro (ASVS V5.2). 

DIR_36 Codificación de salidas

OBLIGATORIO Codificar las salidas para asegurar que los datos devueltos al usuario estén correctamente escapados y formateados, evitando ataques de inyección de código como el cross-site scripting (XSS). Esta medida implica el uso de técnicas como la codificación HTML. Es obligatorio implementar la codificación de salidas para proteger la integridad del sistema conforme a las directrices de la norma para el desarrollo seguro (ASVS V5.3). 

DIR_37 Prevención de ataques XSS

OBLIGATORIO Prevenir ataques XSS para la seguridad de las aplicaciones web. Si los datos maliciosos se almacenan en la base de datos, es obligatorio usar técnicas de codificación segura como Encode.forHtml() antes de presentar los datos al usuario. También se recomienda utilizar encabezados de seguridad HTTP como Content-Security-Policy (CSP) para limitar la ejecución de scripts no confiables. Estas medidas seguirán las directrices de la norma para el desarrollo seguro (ASVS V5.3). 

DIR_38 Cifrado

OBLIGATORIO Se utilizarán algoritmos criptográficos robustos, como AES y RSA, para garantizar la protección efectiva de los datos almacenados. Estos algoritmos ofrecen un alto nivel de seguridad y resistencia frente a ataques criptoanalíticos. Es obligatorio seguir estas prácticas para asegurar la confidencialidad de los datos, según las directrices de la norma para el desarrollo seguro (ASVS V6.2).

DIR_39 Aleatoriedad segura

OBLIGATORIO Generar valores aleatorios de alta entropía para garantizar la seguridad de las claves criptográficas. Estos valores, utilizados como semillas, deben ser seguros y difíciles de predecir, reforzando así la robustez del sistema criptográfico. Esta práctica es obligatoria conforme a las directrices de la norma para el desarrollo seguro (ASVS V6.3). 

DIR_40 Manejo de errores

OBLIGATORIO Establecer mecanismos de manejo seguro de errores y excepciones para evitar la exposición de detalles técnicos que puedan ser explotados por atacantes. Se debe registrar los errores internamente y proporcionar mensajes de error genéricos a los usuarios, sin revelar información sensible. Estos controles se implementarán siguiendo las directrices de la norma para el desarrollo seguro. 

DIR_41 Carga de archivos

OBLIGATORIO Establecer mecanismos de manejo seguro de la carga de archivos para prevenir vulnerabilidades que comprometan la seguridad de la aplicación. Es obligatorio implementar medidas de seguridad robustas, como la validación del tipo, tamaño de archivo, el uso de directorios seguros y la restricción de tipos de archivos permitidos. Estas prácticas siguen las directrices de la norma para el desarrollo seguro (ASVS V12.1). 

DIR_42 Archivos maliciosos

OBLIGATORIO Para prevenir ataques relacionados con la carga de archivos maliciosos, se implementarán medidas de seguridad rigurosas, como la validación y filtrado de los archivos cargados. Esto incluye la verificación del tipo, tamaño y extensión de los archivos, asegurando que solo se acepten archivos seguros y legítimos. Estas medidas deben seguirse según las directrices de la norma para el desarrollo seguro (ASVS V12.1).

Pruebas

DIR_43 Pruebas unitarias

OBLIGATORIO Cada microfrontend contará con pruebas unitarias exhaustivas que cubran las funcionalidades críticas, asegurando que cada unidad de código funcione correctamente de manera aislada. Se utilizarán frameworks de pruebas unitarias compatibles con la mayoría de los stacks tecnológicos utilizados en microfrontends.

DIR_44 Pruebas de integración

OBLIGATORIO Los microfrontends implementarán pruebas de integración para garantizar que los módulos interactúen correctamente entre sí y con otros sistemas, verificando que la integración no introduzca errores o problemas de compatibilidad. Se recomienda utilizar frameworks como Jest, Mocha o Chai, con soporte para pruebas de integración, que permiten probar la interacción entre módulos de manera eficiente.

DIR_43 Pruebas end-to-end

OBLIGATORIO Los microfrontends se someterán a pruebas End-to-End (E2E) que simulen el flujo completo de usuario desde la interfaz hasta el backend, asegurando que el sistema funcione como se espera en un entorno de producción real. Se recomienda utilizar framework de pruebas E2E funcionales que permite automatizarse en entornos de microfrontales.

Se garantizará una cobertura adecuada de las pruebas E2E, abarcando todos los escenarios críticos, incluyendo flujos comunes y casos extremos, para validar la robustez del sistema.

DIR_44 Automatización de pruebas

OBLIGATORIO Las pruebas unitarias, de integración y end-to-end se automatizarán en los procesos de Integración Continua (CI) para garantizar la detección temprana de errores y fallos en el desarrollo:

  • Automatización de Pruebas Unitarias y de Integración: se dispondrán pruebas unitarias y de integración automatizadas que se ejecuten como parte del pipeline de CI/CD, permitiendo la detección temprana de errores y garantizando la calidad continua del código.
  • Automatización de Pruebas End-to-End: Las pruebas End-to-End se automatizarán en la medida de lo posible, integrándose en el pipeline de CI/CD para validar automáticamente la funcionalidad completa del sistema en cada despliegue.
  • Mantenimiento de Scripts de Pruebas Automatizadas: Los scripts de pruebas automatizadas se mantendrán y actualizarán regularmente para reflejar cambios en la funcionalidad de la SPA, asegurando que las pruebas sigan siendo relevantes y efectivas.

Anexo: estándares

Componentización e interoperabilidad

Los estándares de componentes web son fundamentales para garantizar que los microfrontends sean modulares y reutilizables. Este enfoque incluye características como la encapsulación de estilos y funcionalidades, personalización de elementos mediante atributos y propiedades, y aislamiento de dependencias.

Los componentes web permiten definir elementos personalizados que se integran de manera nativa en el DOM, proporcionando interoperabilidad entre microfrontends desarrollados con distintas tecnologías. Esto asegura que cada microfrontend pueda operar de forma autónoma, respetando la independencia y la separación de responsabilidades.

Este estándar define cómo estructurar y comunicar los microfrontends mediante interfaces comunes y patrones interoperables. Incluye especificaciones para el uso de Custom Elements, Shadow DOM y HTML Templates.

Referencias:

 

Diseño de APIs RESTful

El diseño RESTful establece principios para la interacción entre microfrontends y servicios back-end mediante HTTP, asegurando consistencia, eficiencia y facilidad de uso.

RESTful define cómo estructurar los endpoints de una API utilizando verbos HTTP (GET, POST, PUT, DELETE) y jerarquías de recursos claras. También especifica el uso de códigos de estado y formatos estándar como JSON o XML para la transferencia de datos.

Los microfrontends deben consumir APIs RESTful para obtener o enviar datos, aplicando principios de separación de responsabilidades y asegurando que las operaciones sean idempotentes cuando sea necesario. Esto facilita la integración y reduce errores en la comunicación entre módulos.

Referencias:

 

Custom Events

Los Custom Events son un estándar oficial definido por el W3C que permite la creación de eventos personalizados para la comunicación dentro del modelo de eventos del DOM. Este enfoque proporciona una manera eficiente y desacoplada de que los microfrontends interactúen sin depender directamente unos de otros. Los Custom Events se emiten en un nodo específico del DOM y se propagan siguiendo el modelo de burbujeo y captura, facilitando la integración entre módulos.

Custom events se utiliza en los siguientes casos de uso:

  • Los microfrontends pueden emitir eventos personalizados (dispatchEvent) para notificar cambios o acciones específicas.
  • Otros microfrontends, o el contenedor (Shell), pueden suscribirse a estos eventos mediante addEventListener para reaccionar cuando sea necesario.
  • Los eventos deben tener nombres descriptivos y llevar datos estructurados en su objeto detail para mayor claridad.

Referencias:

 

Web Messaging

El estándar Web Messaging del W3C permite la comunicación entre diferentes contextos de ejecución en el navegador, como iframes, ventanas o incluso aplicaciones cargadas dinámicamente. Este enfoque es especialmente útil cuando los microfrontends se ejecutan en contextos aislados o separados, pero necesitan compartir información. Los mensajes se envían de forma asincrónica utilizando el método postMessage, asegurando una comunicación segura y controlada.

Web messaging se utiliza en los siguientes casos de uso:

  • Un microfrontend puede enviar un mensaje al contenedor o a otro microfrontend utilizando postMessage.
  • El contenedor o receptor debe escuchar estos mensajes mediante un evento message y validar su contenido y origen antes de procesarlos.
  • Los mensajes deben seguir un formato estructurado y predecible, con identificadores para cada tipo de mensaje.

Referencias:

 

Seguridad

Content Security Policy (CSP)

La Política de Seguridad de Contenidos (CSP) es un estándar para proteger aplicaciones web contra amenazas como inyecciones de código o ataques de scripts entre sitios (XSS).

CSP permite definir reglas sobre qué recursos pueden ser cargados o ejecutados por el navegador, limitando el acceso a fuentes externas no confiables. Esto ayuda a mitigar ataques dirigidos a microfrontends, especialmente cuando son desarrollados y gestionados por equipos separados.

Es necesario definir políticas estrictas para cada microfrontend, especificando orígenes permitidos para scripts, hojas de estilo, imágenes y otros recursos. Esto garantiza un entorno seguro sin afectar el rendimiento.

Referencias:

 

HTTPS/SSL

HTTPS es un protocolo que garantiza la comunicación segura entre el cliente y el servidor mediante el uso de certificados digitales. SSL (y su sucesor, TLS) asegura que los datos transmitidos estén cifrados y protegidos contra modificaciones o interceptaciones. En el contexto de microfrontends, HTTPS/SSL es esencial para garantizar la seguridad de las comunicaciones tanto entre el navegador y el servidor (Shell o microfrontends) como entre los microfrontends y las APIs que consumen.

El protocolo HTTPS se utiliza en los siguientes casos de uso:

  • Cifrado de Comunicaciones: Todos los microfrontends deben ser servidos mediante HTTPS para garantizar la privacidad y la integridad de los datos transmitidos.
  • Autenticación del Servidor: Los servidores que alojan los microfrontends deben presentar certificados válidos para autenticar su identidad frente al cliente.
  • Certificados de Cliente (Opcional): En casos de alta seguridad, puede implementarse un mecanismo de autenticación mutua donde tanto cliente como servidor presenten certificados.
  • Interacción entre Microfrontends: Si los microfrontends se comunican entre dominios, todos los endpoints deben utilizar HTTPS para garantizar un canal seguro.

Referencias:

 

OAuth2

OAuth2 es un protocolo de autorización que permite a aplicaciones de terceros acceder a recursos protegidos en nombre de un usuario sin revelar sus credenciales. En el contexto de microfrontends, OAuth2 puede garantizar que cada microfrontend obtenga acceso controlado y seguro a los servicios o APIs que necesita.

OAuth2 se utiliza en los siguientes casos de uso:

  • Autorización Delegada: Cada microfrontend debe obtener un access token del servidor de autorización antes de acceder a APIs protegidas.
  • Control de Acceso: Los microfrontends deben incluir el access token en sus solicitudes a los servicios, garantizando que solo tienen acceso a los recursos autorizados.
  • Renovación de Tokens: Los tokens deben renovarse periódicamente para minimizar riesgos en caso de que sean comprometidos.
  • Revocación de Acceso: El sistema debe permitir a los usuarios revocar el acceso de los microfrontends a sus datos en cualquier momento.

Referencias:

JSON Web Token (JWT)

JSON Web Token (JWT) es un estándar abierto que permite transmitir información de forma compacta y segura entre microfrontends y servicios. El token consta de tres partes: encabezado, payload (información) y firma digital, lo que asegura que los datos no han sido alterados.

JWT se utiliza en los siguientes casos de uso:

  • Autenticación: Los microfrontends pueden incluir un JWT en el encabezado de sus solicitudes para autenticar al usuario ante las APIs o servicios que consumen.
  • Validación de Integridad: Los JWT deben verificarse utilizando una clave secreta o un par de claves pública/privada para garantizar que no hayan sido alterados.
  • Scope y Roles: El payload del JWT puede incluir permisos específicos para cada microfrontend, limitando el acceso a los recursos según el contexto.
  • Expiración: Los tokens deben tener un tiempo de expiración corto para minimizar el riesgo en caso de compromisos.

Referencias:

 

Diseño y accesibilidad

Web Content Accessibility Guidelines (WCAG)

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son un conjunto de estándares para garantizar que las aplicaciones sean accesibles para personas con discapacidades.

WCAG define principios como la perceptibilidad, operabilidad, comprensibilidad y robustez de las interfaces de usuario. Estas pautas aseguran que los microfrontends sean inclusivos y utilizables por todos los usuarios, independientemente de sus capacidades.

Los microfrontends deben cumplir con niveles de accesibilidad definidos (A, AA o AAA), aplicando buenas prácticas como el soporte para lectores de pantalla, la navegación mediante teclado y el contraste adecuado de colores.

Referencias:

 

Gestión de Estado Diseño Responsivo

La gestión de estado entre microfrontends debe seguir principios de desacoplamiento, asegurando que cada módulo administre su propio estado y solo comparta información estrictamente necesaria.

El desacoplamiento del estado reduce la dependencia entre microfrontends, permitiendo que funcionen de manera autónoma. Esto minimiza el riesgo de conflictos y mejora la escalabilidad del sistema.

Se recomienda estructurar el estado en ámbitos locales, con sincronización controlada mediante eventos o servicios compartidos cuando sea necesario. Esto asegura consistencia sin comprometer la modularidad.

 

Diseño responsivo

El diseño responsivo es un estándar que asegura que las interfaces de usuario se adapten a diferentes tamaños y resoluciones de pantalla.

RWD establece principios para crear interfaces que ajusten su diseño y funcionalidad en función del dispositivo utilizado, garantizando una experiencia consistente y optimizada.

Los microfrontends deben diseñarse utilizando unidades flexibles, consultas de medios y técnicas de diseño fluido para garantizar que puedan ser utilizados en cualquier dispositivo, desde teléfonos móviles hasta pantallas grandes.

Referencias: