Aprende sobre la arquitectura de microfrontends y crea un ejemplo de aplicación con 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:
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:
mkdir microfrontendcd microfrontendnpm init -y
Ahora podemos instalar las dependencias. Usaremos express, y luego las librerías de Podium.
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:
mkdir PodletAcd PodletAtouch index.mjs
Usamos .mjs
para que Node trate el contenido como sintáxis ES6.
Este es el contenido del PodletA
:
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);
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.
mkdir Layoutcd Layouttouch index.mjs
El contenido del Layout:
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 requeridosconst 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);
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:
node PodletA/index.mjs
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>
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!