Si necesitas facilitar el desarrollo y mantenimiento en equipos grandes, permitiendo la actualización y despliegue individual de cada módulo sin afectar al resto de la aplicación, implementa una arquitectura de microfrontends, para construir aplicaciones web complejas y escalables, compuestas por módulos independientes.
Específicamente se recomienda para el frontal de aplicaciones web:
- Con escalabilidad compleja que requieran dividirse en partes manejables.
- Desarrolladas por equipos grandes y distribuidos que necesiten trabajar de forma independiente.
- Con necesidad de actualización y despliegue frecuentes para reducir riesgos y tiempos.
- Que requieran integrar diferentes frameworks y librerías en una misma aplicación.
- Que necesiten reutilizar funcionalidad entre distintas partes de la aplicación.
Cómo adaptarla a tu caso concreto
Preparación del entorno local de desarrollo
Se recomienda para la fase de desarrollo en local utilizar las siguientes herramientas:
Para desarrollar y ejecutar el proyecto es necesario instalar las siguientes herramientas:
- Node.js (v16 o superior): Disponible en https://nodejs.org
Angular CLI (v17.3.10): Puede descargarse e instalarse usando el siguiente comando:
npm install -g @angular/cli@17.3.10- Git: Disponible en https://git-scm.com/
- Navegador compatible: Usar el navegador de preferencia para pruebas y depuración.
- Editor de Código: Usar el editor de código de preferencia, se recomienda usar Visual Studio Code disponible en https://code.visualstudio.com/.
Si no existe un espacio de trabajo para el proyecto es necesario solicitar su creación en el Repositorio Corporativo. Dentro del espacio de trabajo del proyecto, crearás el repositorio que alojará tu código basado en la solución web Microfront.
Comprueba que todo funciona:
- Inicia el proyecto:
- Ejecuta el arquetipo correspondiente al activo ada-fwk-webapps
- Elegir la opción Micro Frontend (MFE)
- Si elige Micro Frontend, preguntar más detalles (Shell App y MFE App si desea generar la base completa es decir shell + un microfront) y (Solo MFE App si ya tiene la Shell y desea crear un microfront adicional).
- Configura el entorno:
- Verifica las versiones de Node.js/Angular (ver la documentación del arquetipo de ada-fwk-webapps).
- Instala dependencias de npm.
- Verifica la instalación:
- Levanta el servidor con el comando npm.
- Comprueba que funciona en http://localhost:4200.
Adaptación
Para implementar microfrontends robustos, escalables y mantenibles, se sugiere usar Angular 17 con Standalone Components para la estructura de cada microfrontend, NGRX para la gestión de estado individual, y Native Federation para la integración de los mismos. La Arquitectura Hexagonal facilita la organización del código dentro de cada microfrontend. Se prioriza la calidad con pruebas unitarias usando Karma y Jasmine. Se integran Web Components (Vue.js) para componentes comunes, manteniendo la consistencia visual y aprovechando recursos.
A continuación listamos los pasos necesarios (las referencias a secciones son a las contenidas en el README del proyecto que encontrarás en el repositorio):
- Entiende la arquitectura:
- Sección "Capas de la Arquitectura Hexagonal".
- Entender la invocación y uso de los Microfrontends
- Revisa sección "Configuración e Integración de Microfrontends".
- Aplica estilos:
- Utiliza Bootstrap Junta Andalucía (repositorio).
- Gestiona el estado:
- Sección " Gestión del Estado con NGRX".
- Integra componentes externos:
- Usa Web Components desde Storybook/Lint.
- Desarrolla la aplicación:
- Crea componentes/servicios con Standalone Components.
- Implementa la lógica de negocio.
- Realiza pruebas:
- Pruebas unitarias con las herramientas Karma/Jasmine.
Despliegue
Si tienes un nuevo desarrollo y quieres que despliegue en la plataforma Pre-Cloud, solicítalo a través de "Incorporación al proceso de transición DevSecOps".
Durante el Proceso de Transición recibirás información sobre los entornos disponibles.
En cualquier otro caso, ponte en contacto con el servicio de explotación correspondiente para que te informen de los procedimientos de alta de sistemas y entornos.