Introducción a los microfrontends

Un microfrontend es una aplicación web pequeña e independiente que proporciona una funcionalidad focalizada o un flujo de usuario único (por ejemplo, encontrar una cotización o presentar un siniestro). Los microfrontends están diseñados para exponerse e incrustarse en una aplicación shell, de modo que su interfaz de usuario y comportamiento se puedan reutilizar en experiencias más amplias.

Los microfrontends permiten a los equipos desarrollar, implementar y mantener partes específicas de una experiencia web de forma independiente. Entre los usos comunes se incluyen la compatibilidad con flujos de trabajo de desarrollo independientes, la provisión de un iniciador de aplicaciones pequeñas y la habilitación de microfrontends anidados en los que una aplicación incrustada sirve de shell para otras.

Objetivo

En este tutorial lo guiaremos a través de la configuración y el uso del componente MicroFrontend en modo compartido. Para obtener más información sobre el componente MicroFrontend en modo compartido, consulte la documentación sobre este tema.

En este tutorial, aprenderá a hacer lo siguiente:

1. Exponer una aplicación de Jutro como microfrontend.
2. Configurar una aplicación shell para que consuma microfrontends.
3. Incrustar el microfrontend en una aplicación shell mediante el componente MicroFrontend.

Requisitos

Antes de instalar y utilizar el componente MicroFrontend, asegúrese de cumplir con los siguientes requisitos:

1. Debe haber leído la página de información general sobre microfrontends y la página sobre descripción general de los microfrontends, a fin de comprender las tecnologías disponibles y los casos de uso para microfrontends en Jutro Digital Platform.
2. Debe tener una aplicación existente que desee convertir en microfrontend; Como alternativa, puede descargar la aplicación de ejemplo incluida.
3. Debe tener una aplicación shell existente en la que desee incrustar el microfrontend. Como alternativa, puede descargar y usar la plantilla independiente de inicio.

Tutorial

1. Descargar la aplicación de espacio aislado de Jutro (opcional)

Warning: ¡La aplicación de inicio es solo para aprender! No podrá iniciar una aplicación lista para producción con esta aplicación de inicio. Puede probar las características básicas de Jutro y practicar los flujos de trabajo, pero la aplicación de inicio tiene una funcionalidad limitada y es una versión fija de Jutro.

Si no tiene una aplicación existente para convertirla en un microfrontend, puede usar la aplicación de muestra proporcionada. Se trata de una aplicación de espacio aislado que se puede utilizar como microfrontend en este tutorial.

Descarga de la aplicación de espacio aislado de Jutro

2. Descargar la plantilla independiente de inicio (opcional)

Si no cuenta con una aplicación shell en la que incrustar el microfrontend, puede usar la plantilla independiente de inicio. Esta plantilla es una aplicación básica de Jutro que se puede usar como una aplicación shell en este tutorial.

1. Inicie sesión en Guidewire Home y vaya a Jutro Web Apps.
2. Seleccione Crear una nueva aplicación de Jutro.
3. En el campo Nombre de la aplicación, escriba un nombre para su aplicación.
4. Para el tipo de aplicación, seleccione Aplicación independiente.
5. En el menú desplegable Plantilla de aplicación, seleccione Independiente de inicio.
6. Seleccione el sistema principal en el que desea crear su aplicación.
7. Seleccione el planeta destino de InsuranceSuite.
8. Seleccione Crear aplicación.
9. Después de crear la aplicación, seleccione Código fuente en la parte superior de la página y descargue el código fuente de la aplicación en su máquina local.

3. Configurar el repositorio necesario en su configuración de npm

Hay tres instancias regionales del repositorio binario de Guidewire donde se almacenan los paquetes npm necesarios para las aplicaciones de Jutro:

• AMER: https://amer.binrepo.guidewire.net/
• EMEA: https://emea.binrepo.guidewire.net/
• APAC: https://apac.binrepo.guidewire.net/

Si está utilizando una aplicación de Jutro existente, de forma predeterminada ya apunta a la instancia que coincide con el entorno de Guidewire Home en el que se creó. Sin embargo, si utiliza la aplicación de muestra, debe establecer el repositorio en su configuración de npm para instalar los paquetes necesarios.

Durante los pasos de configuración de desarrollo local, debe obtener un token de acceso para la instancia seleccionada. En estos pasos, se utiliza la instancia de AMER para el ejemplo:

1. Inicie sesión en https://amer.binrepo.guidewire.net/ con sus credenciales SAML de inicio de sesión único (SSO).

2. Abra su terminal en su directorio de inicio y ejecute el siguiente comando, reemplazando el valor de {tenantId} por su ID de inquilino:

npm config set @jutro:registry=https://amer.binrepo.guidewire.net/artifactory/api/npm/jutro-{tenantId}-all-npm-virtual
npm login --scope=@jutro --registry=https://amer.binrepo.guidewire.net/artifactory/api/npm/jutro-{tenantId}-all-npm-virtual

Tip: Para obtener más información acerca de cómo configurar su entorno de desarrollo local, consulte Configuración de su entorno de desarrollo local.

4. Instalar el paquete de microfrontend en ambas aplicaciones

Tanto en su aplicación shell como en la aplicación que se va a convertir en un microfrontend, instale el paquete @jutro/micro-frontends. Esto le da acceso a las características del microfrontend.

Important: La aplicación shell necesita este paquete solo cuando utiliza el componente MicroFrontend. En algunas configuraciones de producción, es posible que deba usar un método de incrustación diferente y no necesitará este paquete en la aplicación shell, pero en este tutorial debe instalarlo en ambas aplicaciones.

Para instalar el paquete, ejecute el siguiente comando:

npm i --save @jutro/micro-frontends@<your-jutro-version>

Note: Requisitos de versión

La versión del paquete de microfrontend debe coincidir con los otros paquetes de Jutro Digital Platform, como @jutro/components.

5. Exponer la aplicación como un microfrontend

Después de instalar el paquete @jutro/micro-frontends, siga estos pasos para convertir la aplicación independiente o la aplicación de muestra en un microfrontend que luego puede incrustar en la aplicación shell:

1. En la aplicación, asegúrese de que los archivos src/indexAsync.ts y src/startApp.ts estén presentes y créelos si no lo están.
2. Agregue lo siguiente a src/indexAsync.ts:

src/indexAsync.ts

import('./startApp').then(({ startApp }) => startApp());

3. En src/startApp.ts, modifique la import de la función start por @jutro/micro-frontends:

src/startApp.ts

// Replace the start function from '@jutro/app' with the one from '@jutro/micro-frontends'
import { start } from '@jutro/micro-frontends';
import messages from './app/App.messages';
...

Debe llamar a la función de microfrontend start dentro de la función startApp:

export const startApp = (mfeData: string) => {
  start(Jutro, {
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData,
  });
};

4. Establezca una variable única JUTRO_APP_ID en el archivo .env. Esto se utiliza como nombre de ámbito:

JUTRO_APP_ID=myjutroapp

Note: Cuando configure la variable JUTRO_APP_ID, las clases para los componentes personalizados tienen como prefijo este ID. Este ID solo es válido para un componente MicroFrontend en modo compartido. Si se utiliza cualquier otro método de integración, esta variable se ignora.

5. Cree un archivo en la raíz, en el mismo nivel que su package.json. Asígnele el nombre overrides.config.js y configure la exposición de microfrontend en ese archivo:

overrides.config.js

module.exports = {
  webpack: {
    moduleFederation: {
      exposes: 'myjutroapp',
    },
  },
};

6. (Opcional). En el archivo App.config.tsx de la aplicación, dentro de la instrucción export agregue la siguiente propiedad:

src/app/App.config.tsx

export default {
  ...
  showSubHeader: false,
}

Note: Esto oculta el subtítulo en el microfrontend, lo que puede ayudar a evitar confusiones entre la aplicación shell y el microfrontend. Sin embargo, este es un paso opcional.

En la siguiente imagen, se muestra un ejemplo de la propiedad showSubHeader establecida en true y la apariencia resultante dentro de la aplicación shell, con el encabezado de la aplicación shell y el del microfrontend visibles:

7. Inicie la aplicación ejecutando el siguiente comando en su terminal:

npm i
PORT=3001 npm start

6. Configurar la aplicación shell para que consuma microfrontends

Para mostrar el microfrontend en su aplicación shell, configure una nueva página y agréguele el componente MicroFrontend. Siga estos pasos para configurar la aplicación shell:

1. En el directorio src/pages, cree una nueva carpeta denominada MyMicroFrontend.
2. Dentro de ese directorio, cree un nuevo archivo llamado MyMicroFrontend.tsx.
3. En el archivo src/app/App.config.tsx, agregue una nueva ruta para la página que acaba de crear:

src/app/App.config.tsx

import {Settings} from '../pages/Settings/Settings';
import {MyMicroFrontend} from '../pages/MyMicroFrontend/MyMicroFrontend';
...
export default {
  ...
  routes: [
    {
      title: messages.pagesSettingsTitle,
      path: '/settings',
      exact: true,
      component: Settings,
    },
    {
      title: 'MyMicroFrontend',
      path: '/mymicrofrontend',
      component: MyMicroFrontend,
    },
  ]
}

Note: No utilice la propiedad exact para la ruta del microfrontend, ya que esto puede causar problemas con la carga del microfrontend.

7. Incrustar la aplicación en su aplicación shell

En su archivo MyMicroFrontend.tsx, incruste el microfrontend utilizando el componente MicroFrontend. Especifique el ID y la URL de la aplicación usando la propiedad src:

MyMicroFrontend.tsx

import React from 'react';
import { MicroFrontend } from '@jutro/micro-frontends';

export const MyMicroFrontend: React.FC = () => (
  <MicroFrontend src="myjutroapp@http://localhost:3001" />
);

8. Iniciar sus aplicaciones y verificar que el microfrontend funcione

Inicie la aplicación shell ejecutando el siguiente comando en su terminal:

npm i
PORT=3000 npm start

Si todo está configurado correctamente, debería ver un elemento adicional en el menú de navegación de la aplicación shell para la página del microfrontend. Cuando selecciona ese elemento, el microfrontend se carga y es visible dentro de la aplicación shell.

Prácticas recomendadas

• Cuando trabaje con microfrontends para entornos de producción, asegúrese de comprender las diferencias entre las tecnologías disponibles para incrustar microfrontends y elija la que mejor se adapte a su caso de uso. Para obtener más información, consulte la descripción general de las tecnologías de incrustación de microfrontend.
• Asegúrese de que todos sus microfrontends utilicen valores de ID de aplicación distintos para evitar conflictos en el ámbito global.

• La versión del paquete de microfrontend debe coincidir con los otros paquetes de Jutro Digital Platform, como @jutro/components.

Consulte también

Para obtener más información sobre el uso del componente MicroFrontend con modo compartido, consulte las siguientes páginas:

• Incrustación del componente MicroFrontend mediante el modo compartido
• Guía de referencia de la API de microfrontend
• Aspectos que deben tenerse en cuenta sobre el uso de microfrontends