🌳 Decision Tree - ¿Qué estoy construyendo?

Objetivo: En 2 minutos, determinar exactamente qué tipo de proyecto necesitas crear.

🎯 Método de Decisión

Pregunta 1: ¿Dónde se ejecuta?

🏠 Dentro de aplicación ASP.NET

Características:

Se monta en página ASP.NET existente
Recibe datos del servidor via window.__params
Usuario no navega a URL separada

→ Es un MICROFRONTEND INTEGRADO

Ir a Pregunta 2

🚀 Aplicación independiente

Características:

Tiene su propia URL/dominio
Maneja autenticación propia
SPA completa con routing

→ Es un MICROFRONTEND INDEPENDIENTE

Generar proyecto

Pregunta 2: ¿Qué tipo de funcionalidad? (Solo Integrados)

🎯 Funcionalidad de negocio específica

Características:

Resuelve problema específico (checkout, listado, etc.)
Maneja estado complejo
Múltiples componentes/vistas

→ Es un MICROFRONTEND INTEGRADO

Generar proyecto

🧩 Componente reutilizable

Características:

Se usa en múltiples microfrontends
Funcionalidad genérica (modal, calendario, etc.)
Sin lógica de negocio específica

→ Es una LIBRERÍA

Ir a Pregunta 3

Pregunta 3: ¿Depende de Vue? (Solo Librerías)

🎨 SÍ - Componentes Vue

Características:

Componentes .vue
Composables
Usa Vue/Pinia/i18next

→ Es una LIBRERÍA VUE

Generar proyecto

🔧 NO - Solo JavaScript/TypeScript

Características:

Funciones puras
Validaciones, formatters, tipos
Sin dependencias de Vue

→ Es una LIBRERÍA UTILIDADES

Generar proyecto

📊 Matriz de Decisión Rápida

¿Se ejecuta en ASP.NET?	¿Usa window.__params?	¿Es reutilizable?	¿Depende de Vue?	RESULTADO
✅ SÍ	✅ SÍ	❌ NO	-	Microfrontend Integrado
❌ NO	❌ NO	❌ NO	-	Microfrontend Independiente
❌ N/A	❌ N/A	✅ SÍ	✅ SÍ	Librería Vue
❌ N/A	❌ N/A	✅ SÍ	❌ NO	Librería Utilidades

🎨 Casos de Uso por Tipo

Microfrontends Integrados

Checkout de vuelos - Proceso de pago en página ASP.NET
Lista de hoteles - Resultados de búsqueda con filtros
Dashboard usuario - Panel de control en portal existente

Microfrontends Independientes

Admin panel - Herramienta de administración completa
Portal reportes - Aplicación de BI independiente
Configurador productos - Herramienta interna de setup

Librerías Vue

Sistema de modals - Componente reutilizable con estado
Date picker - Selector de fechas con validaciones
Data table - Tabla con sorting, filtros, paginación

Librerías Utilidades

API client - Wrapper de fetch con tipos
Validadores - Funciones de validación de formularios
Date utils - Formateo y manipulación de fechas

🤔 Casos Complejos

”Mi componente a veces se usa solo, a veces en microfrontends”

Decisión: Librería Vue → importar donde se necesite

// En microfrontend o uso standalone
import { MiComponente } from "@pnpmworkspace/vue-components";

”Es muy simple, ¿realmente necesita ser microfrontend?”

Regla: Si recibe window.__params → Microfrontend Integrado (sin importar complejidad)

“Puede ser independiente O integrado según configuración”

Decisión: Microfrontend Independiente con configuración flexible:

// Acepta window.__params opcional
const config = window.__params?.config || defaultConfig;

“Necesito compartir lógica de negocio entre microfrontends”

Decisión:

¿Solo tipos/interfaces? → Librería Utilidades
¿Composables Vue? → Librería Vue
¿Lógica sin Vue? → Librería Utilidades

✅ Resultado: ¿Qué sigue?

Una vez que identificaste tu tipo de proyecto:

📋 Generar tu proyecto

Siguiente paso: Templates y Scaffolding

Usa el sistema automatizado para generar tu proyecto con la configuración correcta.

🚀 Tutorial práctico

Siguiente paso: Quick Start

Tutorial de 30 minutos para tener tu primer proyecto funcionando.

🎯 Principios de Decisión

Cuando tengas dudas:

¿Dónde se ejecuta? (ASP.NET vs independiente)
¿Se reutiliza? (específico vs compartido)
¿Depende de Vue? (componentes vs utilidades)

Regla de oro: En caso de duda, comienza con la opción más simple y evoluciona según necesidad.