Insertar múltiples widgets en la misma página

Al utilizar la arquitectura de micro frontends de Modyo tenemos, entre otras muchas opciones, la posibilidad de utilizar múltiples widgets dentro de una misma página. También se puede utilizar para trabajar en conjunto ofreciendo soluciones para los escenarios más complejos.

Sin embargo, muchos frameworks no fueron pensados para trabajar bajo la arquitectura de microfrontends y es necesario hacer algunos cambios, hoy nos enfocaremos en el más básico: cómo evitar problemas de compatibilidad cuando ejecutas dos aplicaciones?

En este ejemplo usaremos Vue, pero los conceptos pueden aplicarse a cualquier otro framework o librería. El problema principal de herramientas como Vue, Angular, o React es que están diseñados para ejecutarse en un single page application o en una instancia única dentro de un documento HTML.

Partiendo de ese concepto en casi todos los casos encontrarás dentro del HTML de una aplicación de este tipo un elemento similar a este:

<div id="retail-credit-cards"></div>

El problema está en que al utilizar varios widgets con el mismo valor de ID tendremos problemas de compatibilidad porque este tipo de aplicaciones de javascript se inicializan utilizando justamente este atributo.

Ahora que sabes la causa, la solución es sencilla: tienes que utilizar diferentes valores para los IDs y hacer que cada widget sea único.

Puedes hacer este proceso de dos formas: modificando el HTML y JS de cada Widget para que tenga su propio ID o utilizar valores dinámicos y asignarlos automáticamente.

Generar valores dinámicos para los Widgets ID

Para crear un ID dinámico en una aplicación Vue de Modyo, primero localiza el archivo .env de tu widget ( si no tienes ese archivo, sigue el Tutorial de creación de widgets en Modyo Docs)

Agrega una nueva línea con este código:

VUE_APP_WIDGET_NAME=summary-vue-b

Esto va a crear una variable con el nombre de la nueva aplicación, recuerda evitar espacios, caracteres especiales, y números al inicio del nombre para mayor compatibilidad con HTML.

Luego busca el archivo src/main.js y reemplaza el valor de $mount por:

$mount(`#${process.env.VUE_APP_WIDGET_NAME}`);

El paso final es localizar /public/index.html y reemplazar el valor del ID actual por el de la variable con este código

<div id="<%=VUE_APP_WIDGET_NAME %>"></div>

Con estos pequeños cambios ya puedes compilar y enviar tus widgets para que trabajen en conjunto dentro de una misma página, solo tienes que asegurarte de asignarle un nombre único en el archivo .env.

Photo by XiaoXiao Sun on Unsplash