Microfrontends con Podium

Aprende sobre la arquitectura de microfrontends y crea un ejemplo de aplicación con Podium.

microfrontends-podium

Un microfrontend es una arquitectura de desarrollo web que divide la interfaz de usuario de una aplicación en componentes más pequeños e independientes. Esta aproximación extiende el concepto de microservicios usado en el backend al frontend, permitiendo que diferentes equipos trabajen en partes específicas de la interfaz de forma autónoma.

En este tutorial queremos presentar Podium, una librería Open Source para crear microfrontends. Podium funciona con una estrategia de componer la página y sus componentes en el runtime, es decir, cuando hay una petición. Cuando un usuario visita la página, un servidor gestiona la petición y obtiene cada fragmento independiente a través de HTTP antes de retornar la página compuesta con todos los elementos al usuario.

Pongamos un ejemplo: Una página formada por un header, el contenido y el footer. En esta arquitectura de microfrontends, cada uno de estos componentes podrá estar hospedado en un servidor independiente. Y luego habrá otro servidor más que se encargará de juntar todos estos componentes y entregarlos de vuelta al usuario.

En Podium, los fragmentos o componentes del microfronted se conocen como Podlets, mientras que las Layouts es donde se componen los Podlets en la página final. Vamos a crear una aplicación con microfrontends:

Estructura de directorios para la aplicación

Para esta aplicación hemos hecho que instale los paquetes de Node (node_modules) en la raíz del proyecto, aunque sería válido que tener un package.json independientee en cada módulo. La estructura final quedará así.

microfrontend
└─ Layout
│ └─ index.mjs
└─ PodletA
│ └─ index.mjs
└─ package.json

Podemos crear el directorio principal e iniciar un proyecto npm:

Terminal
mkdir microfrontend
cd microfrontend
npm init -y

Ahora podemos instalar las dependencias. Usaremos express, y luego las librerías de Podium.

Terminal
npm install express @podium/podlet @podium/layout

Ahora creamos un componente o fragmento de la aplicación llamado PodletA. Sólo crearemos uno, pero la idea es que hubiera uno para cada componente en que queramos dividir la aplicación:

Terminal
mkdir PodletA
cd PodletA
touch index.mjs

Usamos .mjs para que Node trate el contenido como sintáxis ES6.

Este es el contenido del PodletA:

PodletA/index.mjs
import express from "express";
import Podlet from "@podium/podlet";
const app = express();
const podlet = new Podlet({
name: "PodletA",
version: "1.0.0",
pathname: "/",
development: true, // debería ser false en producción
});
app.use(podlet.middleware());
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend(`
<div>
Contenido HTML del PodletA
</div>
`);
});
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});
console.log("Server running at http://localhost:7100/");
app.listen(7100);

Layout

Ahora creamos la carpeta de Layout, que se encargará de recibir la petición del usuario y componer la página final que verá el usuario.

Terminal
mkdir Layout
cd Layout
touch index.mjs

El contenido del Layout:

index.mjs
import express from "express";
import Layout from "@podium/layout";
const app = express();
const layout = new Layout({
name: "layout",
pathname: "/",
});
// Los Podlets se tienen que registrar con el layout antes de poder ser requeridos
const podlet = layout.client.register({
name: "PodletA",
uri: "http://localhost:7100/manifest.json",
});
app.use(layout.middleware());
app.get(layout.pathname(), async (req, res) => {
const incoming = res.locals.podium;
incoming.view.title = "Página principal";
// Pasa el contexto de Podium al podlet
const response = await podlet.fetch(incoming);
// Registra los recursos JS y CSS del podlet con la plantilla HTML del layout
incoming.podlets = [response];
res.podiumSend(`
<div>Contenido del Layout</div>
${response}
`);
});
console.log("Server funcionando en http://localhost:7000/");
app.listen(7000);

Ejecutar la aplicación

Para ver el resultado en el navegador deberemos abrir dos terminales, una para ejecutar el servidor del PodletA y otra para el Layout. Desde la raíz del proyecto:

Terminal
node PodletA/index.mjs
Terminal
node Layout/index.mjs

Ahora desde el navegador podemos acceder a la aplicación principal que contiene el Layout con el PodletA en la dirección http://localhost:7000/. Si observamos el código fuente veremos el HTML que se ha generado:

<div>Contenido del Layout</div>
<div>Contenido HTML del PodletA</div>

También podemos acceder directamente al PodletA en la dirección http://localhost:7100/ y veremos el HTML:

<div>Contenido HTML del PodletA</div>

Resumen

Hemos creado una aplicación con arquitectura microfrontend usando Podium. El código HTML final se genera en el servidor, por lo que si quieres añadir CSS o JavaScript para hacer cada podlet interactivo, puedes ver como importar archivos del lado del cliente.

Esperamos que este artículo te haya servido!