Desarrollo de documentación para micro-frontends

[brayaned]

Se requiere realizar la documentación de la tecnologías y arquitectura utilizadas para micro-frontends en los lineamientos de las OATI. Agregar un nuevo modulo a los lineamientos ya establecidos de la oficina para documentar todo lo referente a la utilización de micro frontends en los sistemas actuales (SGA).

Sub Tareas

• [ ] Documentar tecnologías y arquitectura de micro frontends en los lineamientos
• [ ] Documentar actividad

Criterios de aceptación

• [ ] Ajustes repositorio de lineamientos.

Requerimientos

No aplica

Definition of Ready - DoR

• [x] Está refinada y estimada en puntos de historia por el equipo.
• [x] Incluye la descripción y criterios de aceptación, con el detalle funcional y especificaciones técnicas, de forma entendible por cualquier miembro del equipo.
• [x] No tiene bloqueos que impidan su ejecución.
• [x] Las dependencias están identificadas y resueltas.
• [x] Puede ser probada dentro del Sprint.

Definition of Done - DoD - Desarrollo

• [ ] Desarrollo en local.
• [ ] Push en Feature.
• [ ] Pruebas locales (funcionales).
• [ ] PR a Develop.
• [ ] Criterios de aceptación cumplidos.
• [ ] Documentación de issue realizada.
• [ ] Aprobada por SM/Líder técnico.

[josemasster]

Se realiza documentación en el repositorio de lineamientos

Introducción:

¿Qué es Single SPA?

Single SPA es un (Freamwork) para construir aplicaciones web compuestas por múltiple microfrontends. La idea principal es permitir que diferentes equipos desarrollen y mantengan partes independientes de una aplicación web llamadas microfrontends, de forma separad. Estos pueden ser desarrollados y desplegados en diferentes tecnologías de manera independientes

¿Cómo funciona?

Single Spa actúa como un coordinador que se encarga de cargar y montar los microfrontends en una única página web, proporcionando un mecanismo para la comunicación entre ellos. Los equipos pueden trabajar de manera más eficiente y flexible, ya que pueden desarrollar, probar y desplegar sus microfrontends de forma independiente, sin interferir con otros equipos o partes de la aplicación.

Ventajas:

• Desarrollo Independiente
• Escalabilidad
• Reutilización de Componentes
• Facilidad de Mantenimiento
• Experimentación y Entrega Continua

Al lograr tener una aplicación web más desagregada, permite y facilita muchos aspectos generales al momento del desarrollo

Desventajas:

• Complejidad adicional
• Overhead inicial
• Rendimiento
• Curva de aprendizaje

La complejidad adicional inherente a esta arquitectura puede requerir que los equipos inviertan tiempo en comprender los conceptos fundamentales, las mejores prácticas y la resolución de problemas específicos que puedan surgir durante el desarrollo y la implementación.

Freamworks compatibles:

• React
• Vue
• Angular
• Svelth

Arquitectura

Documentacion Oficial: https://single-spa.js.org/docs/microfrontends-concept

[josemasster]

Introducción al Core

El Core de los Microfrontends es el componente central la aplicación, encargándose de manejar la configuración general y proporcionar funcionalidades compartidas a todos los Microfrontends que componen la aplicación. Este Core desacopla la lógica común de la aplicación de los Microfrontends individuales, promoviendo así la reutilización del código y la consistencia en toda la aplicación.

Características:

• Gestión del estado de la aplicación general
• Configuración e inicialización
• Gestión del enrutamiento
• Manejo de autenticación y autorización
• Gestión de librerías compartidas
• Compartir recursos generales a otros mf

Como definir rutas de mf hijos

Configuración root

1. Debemos establecer en la aplicación root que el core sea el microcliente padre y pueda tener control sobre los otros microclientes esto lo hacemos en el microfrontend-layout.html :

<single-spa-router>

  #En este apartado se define la aplicacion core
  <application name="@course/core"></application>

  #Aqui se ve ejemplo de como definir la ruta base de  un microcliente parcel hijo 
  <route path="material">
    <application name="@course/mf2"></application>
  </route>

  <route path="tercero">
    <application name="@course/mf3"></application>
  </route>

</single-spa-router>

Configuración core:

1. Para lograr que el core sea el encargado de manejar las rutas generales de la aplicación tendremos que importar el módulo empty-route.component.ts, este se genera de manera automática al momento de crear la aplicación  en la variable routes quedando de la siguiente manera:

const routes: Routes = [
  {path:'**',component:EmptyRouteComponent},
];

2. Se utiliza la propiedad de angular routerLink para poder redireccionar hacia el mf que queremos montar en esa ruta

  <button routerLink="/material/iconos" routerLinkActive="active">
        <mat-icon>icons</mat-icon>
      </button>

      <button routerLink="/material/table" routerLinkActive="active">
        <mat-icon>table</mat-icon>
      </button>

Configuracion aplicacion hija:

Para la aplicacion hija se debe estableser una ruta base, la cual es donde se va invocar este microcliente de la siguiente manera:

1. Se requiere importar los siguientes modulos:

import { APP_BASE_HREF } from '@angular/common';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, provideRouter } from '@angular/router';
import { getSingleSpaExtraProviders } from 'single-spa-angular';

2. Ingresamos al app-routing.ts y agregamos el siguiente código:

imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ 
    provideRouter(routes),
    { provide: APP_BASE_HREF, useValue: '/material/' },
    getSingleSpaExtraProviders(),
    provideHttpClient(withFetch()) ]
})

Este permite establecer la ruta base de nuestra aplicación.

3. Por último registramos las rutas hijas donde se va a visualizar los componentes.

const routes: Routes = [
  {
    path:"iconos", 
    component: IconComponent
  },
  {
    path:"table", 
    component: TableComponent
  },
];

Arquitectura:

[josemasster]

Microfontend:

Aplicación Parcel:

 Parcel se utiliza para empaquetar cada microfrontend de la aplicación, lo que significa que cada microfrontend y sus dependencias se pueden empaquetar en un único archivo JavaScript.

Creación de Aplicación Parcel Angular:

Comando para la creación de aplicaciones con single spa

npx create-single-spa

Seleccionan las siguientes opciones:

? Directory for new project .

? Select type to generate

 single-spa application / parcel

? Which framework do you want to use? 

angular

? Project name (can use letters, numbers, dash or underscore)

 microcliente01

? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? CSS

The package single-spa-angular@9.0.1 will be installed and executed.
Would you like to proceed? Yes

? Does your application use Angular routing? Yes

? What port should your project run on? 4201

Instalación de dependencias:

npm install

Configuración de Aplicación Parcel Angular:

Configuración de variable de entorno:

Creación:

ng g environments 

Valores a agregar:

environment.development.ts

export const environment = {
    production:true
};

environment.ts

export const environment = {
    production:false
};

configuracion selector de componente:

Cambiamos el nombre del selector del app.component.ts:

en este ejemplo se cambia el nombre por mf1

@Component({
  selector: 'mf1',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Indicamos a single que conponente va a tomar para comprimir

main.single-spa.ts

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<mf1 />',
  Router,
  NavigationStart,
  NgZone,
});

En caso de usar una aplicación core utilizar empty-route para el manejo de las rutas

const routes: Routes = [
  {path:'**',component:EmptyRouteComponent}
];

Varificar microcliente:

Para poder saber si esta funcionando correctamente hasta este punto debemos recurrir a la sigueiente ruta:

http://localhost:4201/main.js

En esta ruta nos mostrara el comprimido de la aplicacion lista por ser consumida por el root.

[josemasster]

Aplicación Root:

La aplicación root (o raíz) es una aplicación de alto nivel que actúa como el contenedor principal de todas las otras aplicaciones o microfrontends dentro de la página web. Su funcionalidad principal es coordinar la carga, montaje y desmontaje de los microfrontends individuales, así como gestionar la comunicación entre ellos.

• Carga de Aplicaciones
• Montaje y Desmontaje
• Gestión de Rutas
• Comunicación entre Microfrontends
• Configuración Global

Creación de Aplicación Root:

Comando para la creación de aplicaciones con Single SPA:

npx create-single-spa

y sleccionaran las siguientes opciones:

# Se especifica el directorio en el que se desea crear la aplicacion root
? Directory for new project . 

#Se selecciona el tipo de aplicacion a crear en este caso una aplicacion root
? Select type to generate  

 single-spa root config

# Se selecciona el tipo de gestor de paquete de librerias
? Which package manager do you want to
use? 

npm

#Si deseamos usar typescript 
? Will this project use Typescript? 

Yes

#aqui seleccionamos si deseamos que nos cree el archivo layaout 
? Would you like to use single-spa
Layout Engine

 Yes

 # y al final asignamos el nombre de la organizacion que esta desarrollando el proyecto 
? Organization name (can use letters, numbers, dash or underscore) 

course

Después de terminar con la creación de la aplicación, la estructura del proyecto quedaría de la siguiente manera:

Configuracion de Aplicacion root:

Configurar puerto:

En start actualizamos el puerto, en este caso se coloca el puerto 8080 Archivo packacge.json:

 "scripts": {
    "start": "webpack serve --port"8080"--env isLocal",
    "lint": "eslint src --ext js,ts,tsx",
    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
    "format": "prettier --write .",
    "check-format": "prettier --check .",
    "prepare": "husky install",
    "build": "concurrently npm:build:*",
    "build:webpack": "webpack --mode=production",
    "build:types": "tsc"
  },

Angular:

Para poder habilitar el soporte micro aplicaciones de angular toca habilitar el cdn de zone que se encuentra comentado por defecto, este se encuentra en el archivo:

index.ejs

#Se ubicca en la linea 61
  <script src="https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.minjs"><script>

Registrar un microforntend:

index.ejs

Para este proceso ya debemos tener una aplicación pracel previamente creada y configurada, en este apartado se agrega el link en el cual queda levantado el microcliente

  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@course/root-config": "//localhost:9000/course-root-config.js",
        "@course/mf1": "http://localhost:4201/main.js"
      }
    }
  </script>
  <% } %>

microfrontend-layout.html

Se registrar la aplicacion y la ruta en el que va afuncionar en este ejemplo en la ruta base:

<single-spa-router>
  <main>
    <route default>
      <application name="@course/mf1"></application>
    </route>
  </main>
</single-spa-router>

[josemasster]

Metodos de Compartir datos entre Microclientes:

• LocalStorage, Cookies
• Enlace

• API

LocalStorage o Cookies

El localStorage proporciona una manera sencilla de almacenar datos en el navegador. Los Microfrontends pueden leer y escribir datos en el localStorage compartido para compartir información entre ellos. Aquí tienes un ejemplo de cómo utilizarlo:

//Micrcliente de que se desa guardar el dato
// Escribir datos en localStorage
localStorage.setItem('miDato', 'valor');

// Leer datos desde localStorage
//cualquie microcliente
const miDato = localStorage.getItem('miDato');

Enlace

Una forma simple de compartir datos entre Microfrontends es pasándolos a través de un enlace. Los datos pueden ser codificados en la URL y luego decodificados por el Microfrontend receptor. Aquí tienes un ejemplo:

//Microcliente en el que se desea traer data
export class TableComponent {
   constructor(private http: HttpClient) {
    const json = this.getData().subscribe(res =>{
      console.log(res)
    })}

  getData() {
    //Ruta del recurso que se quiere acceder de el otro microcliente
    return this.http.get('http://localhost:4201/assets/data.json');
  }}

Esto se puede aplicar para hojas de estilo, html, json ...

API

Una forma más avanzada de compartir datos entre Microfrontends es a través de una API. Los Microfrontends pueden hacer solicitudes HTTP a una API compartida para recuperar o enviar datos. Aquí tienes un ejemplo básico:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>('https://api.com/data');
  }
};

[josemasster]

Se realiza ejercicio de microclientes para capacitación, en el cual se utiliza single spa, cracion de aplicaicion root, core, microcliente y formas de compartir data entre microclientes

Por ultimo se realizo pr al repositorio de lineamientos

[norbeydanilo]

Relacionar PR para cierre de issue @brayaned @josemasster