Microfrontends con Single-SPA

Clase 1: Fundamentos y Setup

Objetivos de Hoy

Comprender qué son los microfrontends y por qué son importantes
Conocer Single-SPA y su arquitectura
Aprender la estructura recomendada de proyectos
Realizar el setup inicial de un proyecto microfrontend

Parte 1

¿Qué son los Microfrontends?

Arquitectura Monolítica Frontend

┌─────────────────────────────────┐
│                                 │
│    UNA GRAN APLICACIÓN          │
│                                 │
│  ┌───────────────────────────┐  │
│  │  Navegación               │  │
│  ├───────────────────────────┤  │
│  │  Productos                │  │
│  ├───────────────────────────┤  │
│  │  Carrito                  │  │
│  ├───────────────────────────┤  │
│  │  Usuario / Autenticación  │  │
│  └───────────────────────────┘  │
│                                 │
│  Todo en un solo repositorio    │
│  Un solo build y deployment     │
└─────────────────────────────────┘

Problemas de la Arquitectura Monolítica

Escalabilidad limitada: Un cambio pequeño requiere rebuild completo
Acoplamiento: Equipos bloqueados esperando por otros
Tecnología rígida: Difícil migrar o probar nuevas herramientas
Testing complejo: Hay que probar toda la aplicación
Deployment arriesgado: Un error puede tumbar todo

Arquitectura de Microfrontends

┌──────────────────────────────────────────┐
│         ROOT CONFIG (Orquestador)        │
└──────────────────────────────────────────┘
           │          │          │
    ┌──────┘          │          └──────┐
    │                 │                 │
┌───▼────┐      ┌────▼─────┐     ┌────▼─────┐
│  MFE 1 │      │  MFE 2   │     │  MFE 3   │
│        │      │          │     │          │
│ React  │      │ Angular  │     │  Vue     │
└────────┘      └──────────┘     └──────────┘

Cada microfrontend es independiente, con su propio repositorio, build y deployment

Beneficios de Microfrontends

✅ Desarrollo independiente: Equipos autónomos

✅ Despliegue independiente: Deploy sin afectar otros MFEs

✅ Tecnología flexible: Usa React, Angular, Vue en la misma app

✅ Escalabilidad: Equipos y features crecen sin bloqueos

✅ Resiliencia: Un error en un MFE no tumba toda la app

🤔 Pregunta Interactiva

¿En qué escenarios usarías microfrontends?

Opciones:

A) Startup pequeña con 2 desarrolladores
B) Empresa grande con múltiples equipos
C) Aplicación simple de formulario
D) E-commerce complejo con múltiples dominios

Levanta la mano o escribe en el chat

💡 Respuesta

Correctas: B y D

Los microfrontends son ideales para:

Equipos grandes que necesitan autonomía
Aplicaciones complejas con dominios bien definidos
Organizaciones que quieren experimentar con nuevas tecnologías

No son recomendables para proyectos pequeños o equipos reducidos

Parte 2

Introducción a Single-SPA

¿Qué es Single-SPA?

Single-SPA es un framework JavaScript para crear microfrontends

Permite usar múltiples frameworks en la misma página
Sin necesidad de recargar la página
Cada microfrontend puede desplegarse independientemente
Gestiona el ciclo de vida de cada aplicación

Componentes Principales de Single-SPA

1️⃣ Root Config

Archivo HTML + JS que orquesta todo

2️⃣ Applications (Microfrontends)

Cada uno es una mini-SPA con ciclo de vida propio

3️⃣ Import Maps

Mapa de dependencias y microfrontends

4️⃣ SystemJS

Cargador de módulos que permite lazy loading

Arquitectura Single-SPA

// Root Config registra las aplicaciones
registerApplication({
  name: "@org/navbar",
  app: () => System.import("@org/navbar"),
  activeWhen: ["/"]
});

registerApplication({
  name: "@org/products",
  app: () => System.import("@org/products"),
  activeWhen: ["/products"]
});

Cada app se monta/desmonta según la ruta activa

Ciclo de Vida de un Microfrontend

// Cada microfrontend debe exportar estas funciones
export async function bootstrap(props) {
  // Inicializar la aplicación
}

export async function mount(props) {
  // Montar en el DOM
}

export async function unmount(props) {
  // Limpiar y desmontar
}

Import Maps

Definen dónde están los módulos:

<script type="systemjs-importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js",
    "@org/root-config": "//localhost:9000/org-root-config.js",
    "@org/navbar": "//localhost:8080/org-navbar.js",
    "@org/products": "//localhost:8081/org-products.js"
  }
}
</script>

SystemJS

¿Por qué SystemJS?

Los navegadores aún no soportan completamente import maps
SystemJS es un polyfill que permite:
- Cargar módulos dinámicamente
- Usar import maps hoy
- Soporte para navegadores antiguos

🎯 Quiz Rápido

¿Cuál es la función del Root Config?

A) Contiene la lógica de negocio
B) Orquesta y registra los microfrontends
C) Maneja el estado global
D) Renderiza componentes React

✅ Respuesta Correcta: B

El Root Config es el orquestador que:

Registra las aplicaciones (microfrontends)
Define cuándo cada una está activa
Gestiona las dependencias compartidas
Sirve el HTML principal

Parte 3

Estructura del Proyecto

Organización

microfrontends-project/
├── root-config/              # Orquestador principal
│   ├── src/
│   │   ├── index.ejs         # HTML template
│   │   └── root-config.js    # Registro de apps
│   └── package.json
│
├── navbar/                   # MFE 1: Navegación
│   ├── src/
│   └── package.json
│
├── products/                 # MFE 2: Productos
│   ├── src/
│   └── package.json
│
└── shared/                   # Utilidades compartidas
    ├── styles/
    └── components/

Convenciones de Nombres

Formato: `@organization/project-name`

Ejemplos:

@mycompany/root-config
@mycompany/navbar
@mycompany/products
@mycompany/checkout

Esto ayuda a:

Evitar conflictos de nombres
Organizar mejor en import maps
Identificar quién es el dueño

Root Config vs Microfrontends

Aspecto	Root Config	Microfrontend
Propósito	Orquestar	Funcionalidad específica
UI	Minimal (layout básico)	Features completos
Dependencias	Compartidas	Propias + compartidas
Deployment	Menos frecuente	Independiente y frecuente

Parte 4

Setup Inicial - Práctica

Prerrequisitos

Antes de comenzar, asegúrate de tener:

✅ Node.js (v16 o superior)

node --version

✅ npm

npm --version

✅ Editor de código (VS Code, Cursor, Windsurf, etc)

Paso 1: Instalar create-single-spa

npm install --global create-single-spa

# o con npx (sin instalación global)
npx create-single-spa

Esta herramienta nos ayuda a generar proyectos Single-SPA

Paso 2: Crear el Root Config

# Crear carpeta del proyecto
mkdir mi-proyecto-mf
cd mi-proyecto-mf

# Crear root config
npx create-single-spa

Responde las preguntas del asistente:

Directory: root-config
Type: single-spa root config
Package manager: npm (o yarn)
TypeScript: Yes
Layout Engine: Yes (recomendado)
Organization name: @miempresa

Estructura Generada

root-config/
├── src/
│   ├── index.ejs              # HTML principal
│   ├── miempresa-root-config.ts
│   └── microfrontend-layout.html
├── package.json
├── tsconfig.json
└── webpack.config.js

Análisis: index.ejs

<script type="systemjs-importmap">
{
  "imports": {
    "@miempresa/root-config": 
      "//localhost:9000/miempresa-root-config.js"
  }
}
</script>

<!-- Zona donde se renderizan los MFEs -->
<div id="single-spa-application:@miempresa/navbar"></div>
<div id="single-spa-application:@miempresa/products"></div>

Análisis: root-config.ts

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@miempresa/navbar",
  app: () => System.import("@miempresa/navbar"),
  activeWhen: ["/"],
});

// Iniciar Single-SPA
start({
  urlRerouteOnly: true,
});

Paso 3: Levantar el Root Config

cd root-config
npm install
npm start

Por defecto corre en: http://localhost:9000

¡Tu orquestador está listo! 🎉

Paso 4: Crear tu Primer Microfrontend

# Desde la carpeta raíz del proyecto
npx create-single-spa

Configuración:

Directory: navbar
Type: single-spa application / parcel
Framework: react
Package manager: npm
TypeScript: Yes
Organization name: @miempresa
Project name: navbar

Estructura del Microfrontend

navbar/
├── src/
│   ├── root.component.tsx     # Componente principal
│   ├── miempresa-navbar.tsx   # Punto de entrada
│   └── root.component.test.tsx
├── package.json
├── tsconfig.json
└── webpack.config.js

Código del Microfrontend

// miempresa-navbar.tsx
import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    return <div>Error en navbar!</div>;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

Conectar el MFE al Root Config

Editar root-config/src/index.ejs:

<script type="systemjs-importmap">
{
  "imports": {
    "@miempresa/root-config": "//localhost:9000/...",
    "@miempresa/navbar": "//localhost:8080/miempresa-navbar.js"
  }
}
</script>

Editar root-config/src/microfrontend-layout.html:

<nav>
  <application name="@miempresa/navbar"></application>
</nav>

Levantar el Microfrontend

cd navbar
npm install
npm start -- --port 8080

Ahora el navbar corre en: http://localhost:8080

¡Y se verá en el root config! 🚀

Parte 5

Configuración de Estilos

Tailwind CSS en Microfrontends

Existen dos estrategias principales:

1️⃣ Tailwind en cada MFE (aislado) 2️⃣ Tailwind compartido (centralizado)

Recomendación: Depende de tu caso de uso

Estrategia 1: Tailwind Aislado

Cada MFE tiene su propia configuración

cd navbar
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Ventajas:

Configuración independiente
Sin conflictos entre MFEs

Desventajas:

Duplicación de estilos
Bundle más grande

Estrategia 2: Tailwind Compartido

Crear un MFE de utilidades compartidas:

shared-ui/
├── src/
│   ├── tailwind.config.js
│   └── styles.css
└── package.json

Los demás MFEs lo importan:

import '@miempresa/shared-ui/styles.css';

Introducción a shadcn/ui

shadcn/ui es una colección de componentes React reutilizables

Usa Tailwind CSS
Componentes accesibles (basados en Radix UI)
Altamente personalizables
Se copian a tu proyecto (no es una dependencia)

Instalación de shadcn/ui

cd navbar
npx shadcn-ui@latest init

Responde las preguntas:

Style: Default
Base color: Slate
CSS variables: Yes

Esto crea:

components/ui/ carpeta para componentes
Configuración de Tailwind actualizada

Agregar Componentes

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card

Usar en tu código:

import { Button } from "@/components/ui/button";

function Navbar() {
  return (
    <nav>
      <Button variant="outline">Login</Button>
    </nav>
  );
}

Compartir shadcn/ui entre MFEs

Opción 1: Instalar en cada MFE (recomendado para empezar)

Opción 2: Crear un MFE de UI compartido

shared-ui/
├── src/
│   └── components/
│       └── ui/
│           ├── button.tsx
│           └── card.tsx

Tarea para la Próxima Clase

1️⃣ Crear un root-config completamente funcional

2️⃣ Crear al menos 2 microfrontends básicos:

Navbar con navegación
Página Home con contenido

3️⃣ Configurar Tailwind en ambos MFEs

4️⃣ Agregar un componente de shadcn/ui (Button o Card)

¡Gracias!

¿Preguntas?

Recursos Adicionales

📚 Documentación oficial: https://single-spa.js.org

📺 Tutoriales en YouTube: Single-SPA

💻 Repositorio de ejemplos: https://github.com/single-spa

🎨 shadcn/ui: https://ui.shadcn.com