Plan: Definición de Stack de Frontend — Integración Soterex

Date: 2026-07-25 Status: ✅ Decidido (2026-07-25) — Opción 2 (Vue), como SPA sin SSR. Ver doc/architecture/ADR-001-frontend-stack.md para la decisión final y su justificación considerando AWS (backend) + Firebase (frontend). Autores: Product Owner (síntesis), con research del agente researcher y brainstorming del agente brainstormer, evaluado contra los criterios del agente architect

---

0. Por qué este documento existe

El cliente preguntó explícitamente: ¿está bien seguir con Vue, o conviene algo distinto? En vez de responder desde una preferencia, se activó el proceso completo: research de tendencias 2026 en frontend/fintech, brainstorming de alternativas, y evaluación contra los criterios de architect (equipo, escala, mantenibilidad) y frontend-dev (stack por defecto: Next.js + TypeScript + Tailwind). Se llegó a 3 opciones concretas, no a una sola recomendación cerrada, porque la decisión final depende de un dato que el cliente conoce y nosotros no: qué tan cómodo está el equipo hoy con Vue vs. React vs. algo nuevo.

1. Research — estado del frontend para dashboards fintech en 2026

Resumen de lo relevado (julio 2026):

• React/Next.js sigue siendo el default más elegido para dashboards y paneles admin en 2026: el ecosistema de plantillas y librerías (shadcn/ui, TanStack Table/Query/Router, Refine, React Admin) es el más grande y maduro — su modelo de componentes se ajusta bien a los patrones de UI de dashboards (cards, tablas, formularios) y ofrece librerías de UI listas para producción como MUI, Ant Design y shadcn/ui [1]. Plantillas específicas de fintech como Vault o Fortress (Next.js 16 + React 19 + shadcn/ui) están hechas justo para paneles de inversión/back-office financiero.
• Vue/Nuxt tuvo un salto real en 2026, no es una opción "vieja": el ecosistema maduró significativamente con Nuxt 4 llegando a versión estable, y el cambio más grande del año es que Nuxt UI v4 liberó sus 125+ componentes de forma completamente gratuita bajo licencia MIT [2], algo que antes estaba pago. Además surgieron frameworks admin en Vue con generador visual de CRUD, terminal web y constructor de páginas drag-and-drop [3] (tipo Soybean Admin / Vben-style), pensados exactamente para paneles con roles y menús dinámicos — que es nuestro caso con la matriz de permisos editable.
• Angular sigue siendo fuerte en fintech "enterprise" de larga vida, pero por un motivo distinto: trae su propio sistema de inyección de dependencias, router, módulo de formularios y setup de testing, así que un equipo grande gasta menos tiempo eligiendo entre librerías competidoras — esa consistencia importa más en aplicaciones grandes y longevas con muchos colaboradores rotando en el código [4]. No es nuestro perfil (equipo chico, MVP1 primero).
• Lo "innovador" en 2026 es Svelte 5 + SvelteKit 2, no un experimento: ya tiene plantillas admin con RBAC real. Uno de los templates más completos incluye un panel SaaS full-stack con control de acceso basado en roles de cuatro niveles, soporte multi-organización, autenticación con flujos de invitación, gestión de usuarios con CRUD completo, y auditoría con seguimiento de IP [5] — coincide punto por punto con nuestro modelo de roles multipaís/PDV y logs de auditoría. La contrapartida: es la opción correcta para equipos que priorizan un bundle chico y una experiencia de desarrollo simple, y están dispuestos a resignar pool de contratación y ecosistema a cambio de eso [4].
• Sobre alternativas a Next.js en general: React Router v7 es el camino de menor fricción para equipos React que quieren dejar Next.js; SvelteKit gana en simplicidad y flexibilidad de deploy; Nuxt 4 sirve bien a equipos Vue; TanStack Start vale la pena seguirlo de cerca pero todavía no es la opción segura por defecto [6].

Fuentes: [1] adminlte.io/blog/react-admin-dashboard-templates · [2] adminlte.io/blog/nuxt-admin-dashboard-templates · [3] adminlte.io/blog/vue-admin-dashboard-templates · [4] pharosproduction.com/insights/engineering/frontend-framework-comparison-2026 · [5] adminlte.io/blog/svelte-admin-dashboard-templates (SvelterApp) · [6] blog.openreplay.com/next-js-alternatives

2. Brainstorming — qué importa realmente para este proyecto

Antes de comparar frameworks en el vacío, el brainstormer marcó qué es lo que este proyecto necesita de verdad, según el Análisis Funcional:

1. Matriz de permisos editable (L/E/B) + asignación de roles multipaís/PDV → necesita un admin framework con menús y navegación dinámicos según permisos, no solo un sidebar fijo.
2. Muchas pantallas tipo ABM/CRUD (Usuarios, Países, Estaciones, Configuración, Roles) → se beneficia de un framework/plantilla con generador de CRUD, no de armar cada ABM a mano.
3. Multi-país, potencialmente con conectividad variable en algunos PDVs → el tamaño del bundle y la performance en redes lentas importa más que en un SaaS típico de oficina.
4. Equipo real que va a mantener esto en producción durante años, no un prototipo → el tamaño del pool de contratación y la madurez del ecosistema pesan tanto como la tecnología.
5. Ya existe una hipótesis previa de Vue en el equipo → vale la pena confirmar si eso viene de una preferencia real del equipo de desarrollo (en cuyo caso es una señal fuerte) o de una suposición sin base (en cuyo caso no debería anclar la decisión).

3. Las 3 opciones

Opción 1 — React / Next.js (el "seguro", más elegido en 2026)

Stack	Next.js 16 (App Router) + React 19 + TypeScript 5 + Tailwind CSS v4 + shadcn/ui
Estado / datos	TanStack Query (server state) + Zustand (client state) + TanStack Table (grillas)
Plantilla recomendada	ShadCN Admin (TypeScript + shadcn/ui + TanStack Router) para arrancar rápido, o Admindek Next.js Edition si se quiere algo más armado (57+ páginas, TanStack Table v8)
Navegación	Sidebar colapsable + rutas anidadas del App Router; permisos se resuelven ocultando/mostrando ítems del sidebar según la matriz L/E/B (se implementa con un simple can(modulo, accion) en el layout)
A favor	Mayor pool de contratación en LatAm, mayor cantidad de plantillas fintech ya armadas, coincide con el default que ya tenía definido el agente frontend-dev
En contra	Menos "generador de CRUD" out-of-the-box que las opciones Vue chinas — cada ABM se arma a mano (aunque más rápido con shadcn/ui)
Riesgo	Bajo

Opción 2 — Vue / Nuxt (confirma que la idea original sí es una opción válida y sólida en 2026)

Stack	Nuxt 4 (estable) + Vue 3 + TypeScript + Nuxt UI v4 (125+ componentes, ahora 100% gratis/MIT) + Pinia
Plantilla recomendada	Soybean Admin (Naive UI + UnoCSS, con generación de menús dinámicos por permisos — encaja directo con la matriz L/E/B editable) o Haze Dashboard (Nuxt 4 + Nuxt UI v4 + Tailwind v4) si se prioriza estética más pulida
Navegación	Menú lateral generado dinámicamente a partir de la matriz de permisos del usuario (país + rol + PDV) — este patrón ya viene resuelto en frameworks admin Vue de origen chino, que están pensados exactamente para RBAC dinámico multi-tenant
A favor	Curva de aprendizaje más suave para equipos que ya conocen Vue, Nuxt UI v4 recién se volvió gratis (ahorra licencias), fuerte en exactamente el patrón de "permisos → menú dinámico" que necesitamos
En contra	Ecosistema más chico que React (menos plantillas fintech específicas, pool de contratación algo menor en algunos mercados)
Riesgo	Bajo — esta opción queda validada como decisión correcta, no es una tecnología en retroceso

Opción 3 — Svelte / SvelteKit (la innovadora, con más upside pero menos ecosistema)

Stack	Svelte 5 (runes) + SvelteKit 2 + TypeScript + shadcn-svelte (bits-ui v2) + Tailwind CSS v4
Plantilla recomendada	SvelterApp — panel SaaS full-stack con RBAC de 4 niveles, soporte multi-organización, gestión de usuarios con CRUD, y auditoría con tracking de IP: prácticamente calcado a nuestro modelo de roles multipaís/PDV + logs de auditoría
Navegación	Igual que las otras — sidebar dinámico por rol — pero con bundles sensiblemente más chicos, lo que se nota en conexiones lentas (relevante si algún PDV opera con internet limitado)
A favor	Mejor performance/bundle de las tres opciones, plantilla ya alineada 1:1 con nuestros requisitos de RBAC + auditoría, sin dependencia de un vendor como Vercel
En contra	Ecosistema y pool de contratación más chicos — es la opción correcta para equipos que priorizan bundle chico y simplicidad y están dispuestos a resignar pool de contratación y ecosistema a cambio de eso [4]. Menos plantillas fintech específicas que React o Vue.
Riesgo	Medio — no por inmadurez técnica, sino por disponibilidad de devs a futuro

4. Cómo elegir (criterio del architect)

No hay una opción "objetivamente mejor" — la señal decisiva es una sola pregunta:

¿El equipo que va a construir y mantener esto durante años ya tiene experiencia fuerte en alguno de los tres, o recién va a formarse/contratarse para este proyecto?

• Si el equipo (interno o el que van a contratar) ya sabe Vue → Opción 2, sin dudarlo: Nuxt UI v4 recién se volvió gratis y el patrón de permisos dinámicos calza perfecto.
• Si el equipo ya sabe React, o van a contratar en un mercado donde React domina la oferta → Opción 1: menor riesgo de contratación, mayor cantidad de referencias.
• Si quieren apostar a performance y están dispuestos a un pool de devs más chico (o van a tener un equipo reducido y técnicamente fuerte que pueda absorber una curva de aprendizaje) → Opción 3.

5. Recomendación del Product Owner

Dado que la matriz de permisos editable (L/E/B) y la asignación multipaís/PDV son el corazón funcional de este proyecto (no un detalle), y que Vue ya era la hipótesis del cliente, mi recomendación es: la Opción 2 (Vue/Nuxt) es una decisión sólida y vigente en 2026 — no hace falta cambiarla por inseguridad tecnológica. La única razón real para moverse a la Opción 1 sería una limitación de contratación concreta (si hoy no hay o no van a poder conseguir devs Vue en el mercado donde van a construir esto). La Opción 3 la dejaría como candidata para un próximo proyecto piloto más chico, no para el primer MVP de un sistema que va a manejar dinero real en producción.

6. Qué necesito para cerrar esto

• Confirmar si el equipo de desarrollo (interno o a contratar) tiene más experiencia en Vue, React, o ninguno de los dos todavía.
• Una vez elegida la opción, el architect escribe el ADR correspondiente en doc/architecture/ADR-001-frontend-stack.md y el frontend-dev/ui-engineer arrancan el scaffold real del proyecto (hoy start-dev.sh solo levanta el portal de documentación).