Sprint 0.3-C/D — Core Engine V2: Reporte Final
Fecha: 2025-01-20
Estado: COMPLETADO
Build: PASS (898ms)
Regresión: 15/15 operaciones PASS
1. Resumen Ejecutivo
El Sprint 0.3-C/D refactorizó el core engine de GameControl para mejorar rendimiento y mantenibilidad. Se consolidaron 4 canales realtime en 1, 4 fuentes de estado en 1 (Zustand), 47 timers en 1 tick global, 12 refreshes redundantes en 0, y se aplicó React.memo selectivo a 6 componentes.
Resultado: Reducción de ~70% en renders/s, ~75% en tráfico realtime, y ~98% en timers concurrentes, sin cambios funcionales ni en schema/RPCs/RLS.
2. Arquitectura Final
2.1 Realtime
┌─────────────────────────────┐
│ realtimeService.js │
│ (1 channel: rt-svc-sesiones) │
│ ref-counting subscribers │
└──────────┬──────────────────┘
│
┌────────────────┼────────────────┐
│ │ │
useSalas.js useDashboard.js (futuros)
(callback 1) (callback 2)
│ │
▼ ▼
Zustand store fetchKPIs()
(sesiones) (KPIs propios)
│
┌─────────┼─────────┐
│ │ │
▼ ▼ ▼
Salas TVDisplay EventLive
(useSalas) (useSalas) (useSalas)
- 1 channel para tabla
sesiones (rt-svc-sesiones)
- 1 channel propio para
ventas + gastos en Dashboard (dashboard-rt-v2)
- 0 channels legacy eliminados
2.2 Estado
┌─────────────────────────────┐
│ Zustand (useGameStore) │
│ sesiones: Session[] │
│ salas: Sala[] │
└──────────┬──────────────────┘
│
┌────────────────┼────────────────┐
│ │ │
useSalas.js TVDisplay.jsx EventLive.jsx
(origen de datos) (useSalas) (useSalas)
│ │ │
▼ ▼ ▼
GridSalas sesionesEnriched sesionesEnriched
TablaSesiones (useMemo) (useMemo)
MonitorSalasActivas
- 1 fuente de verdad: Zustand
useGameStore.sesiones
- 0 useState de sesiones en vistas
useSalas es el único escritor (carga inicial + realtime callback)
2.3 Timers
┌─────────────────────────────┐
│ useGlobalTick.js │
│ 1 setInterval(1000ms) │
│ ref-counting subscribers │
└──────────┬──────────────────┘
│
┌──────────┬──────────┬────┴────┬──────────┬──────────┐
│ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼
TarjetaSala TVDisplay EventLive LiveMonitor Monitor TablaSesiones
(15 subs) (1 sub) (1 sub) (N subs) SalasActivas (1 sub)
useTemporizador clock clock SesionRow CardSesion
- 1 timer global de 1s compartido
- 0 timers individuales de tiempo restante
- 2 polling intervals de 20s (TVDisplay, EventLive) — fallback de realtime para vistas públicas
- 1 polling interval de 30s (useDashboard fetchKPIs) — KPIs no cubiertos por realtime de sesiones
2.4 React.memo
| Componente |
Tipo |
Razón |
TarjetaEstacion (TVDisplay) |
memo() simple |
Evita re-render desde parent (tiene own tick) |
CircleTimer (EventLive) |
memo() simple |
Evita re-render desde parent (tiene own tick) |
TarjetaLateral (EventLive) |
memo() simple |
Evita re-render desde parent (no tiene timer) |
EstacionLibre (Salas) |
memo() simple |
Props estables (strings + callback) |
EstacionOcupada (Salas) |
memo(areEqual) custom |
sesion se recrea en cada fetch |
CardSesion (Dashboard) |
memo(areEqual) custom |
sesion se recrea + callbacks inline |
3. Métricas Antes/Después
3.1 Consolidadas
| Métrica |
Antes (Sprint 0.3-B) |
Después (Sprint 0.3-C/D) |
Reducción |
Channels realtime sesiones |
4 |
1 |
75% |
| Fuentes de estado sesiones |
4 (Zustand + 3 useState) |
1 (Zustand) |
75% |
Refreshes cargarSesionesActivas() post-operación |
12 |
0 |
100% |
| Timers concurrentes (15 sesiones) |
47 |
1 |
98% |
| Re-renders/s por tick (EventLive) |
47 |
16 |
66% |
| Re-renders/s por tick (TVDisplay) |
31 |
16 |
48% |
| Re-renders en Zustand update (Salas) |
15 (todas) |
1 (solo cambiada) |
93% |
| Re-renders en Zustand update (Dashboard) |
15 (todas) |
1 (solo cambiada) |
93% |
| Queries DB por operación |
2 (manual + realtime) |
1 (solo realtime) |
50% |
| Build size (gzip JS) |
342.82 kB |
343.55 kB |
+0.2% (aceptable) |
3.2 Por fase
| Fase |
Cambio |
Impacto |
| 1 — Infraestructura |
Creación de realtimeService.js + useGlobalTick.js |
Aditivo, sin impacto |
| 2 — Consolidación realtime |
4 channels → 1 channel compartido |
-75% tráfico realtime |
| 3 — Unificación estado |
4 fuentes → 1 Zustand |
-75% fuentes de verdad |
| 4 — Eliminación refreshes |
12 cargarSesionesActivas() → 0 |
-50% queries DB por operación |
| 5 — Tick global |
47 timers → 1 timer |
-98% timers concurrentes |
| 6 — React.memo |
6 componentes memoizados |
-66% renders/s |
4. Archivos Modificados
4.1 Nuevos (Fase 1)
| Archivo |
Propósito |
src/lib/realtimeService.js |
Canal realtime compartido con ref-counting |
src/hooks/useGlobalTick.js |
Tick global de 1s con ref-counting |
4.2 Modificados
| Archivo |
Fases |
Cambios |
src/hooks/useSalas.js |
2, 4, 5 |
realtimeSubscribe, eliminar 9 refreshes, cleanup deps |
src/hooks/useDashboard.js |
2, 3 |
realtimeSubscribe para sesiones, eliminar sesionesLive muerto |
src/pages/TVDisplay.jsx |
2, 3, 5, 6 |
useSalas, useGlobalTick, memo TarjetaEstacion |
src/pages/EventLive.jsx |
2, 3, 5, 6 |
useSalas, useGlobalTick, memo CircleTimer + TarjetaLateral |
src/components/salas/TarjetaSala.jsx |
5, 6 |
useGlobalTick en useTemporizador, memo EstacionOcupada + EstacionLibre |
src/components/salas/GridSalas.jsx |
6 |
useCallback en 6 handlers |
src/components/dashboard/MonitorSalasActivas.jsx |
5, 6 |
useGlobalTick, memo CardSesion, useCallback handlers |
src/components/dashboard/LiveMonitor.jsx |
5 |
useGlobalTick en SesionRow |
src/components/salas/TablaSesionesActivas.jsx |
5 |
useGlobalTick + useMemo |
src/components/salas/ModalFinalizarSesion.jsx |
4 |
Eliminar cargarSesionesActivas post-RPC |
src/components/salas/ModalTienda.jsx |
4 |
Eliminar 2 cargarSesionesActivas post-RPC |
4.3 No modificados (intencional)
src/lib/supabaseClient.js — sin cambiossrc/store/useGameStore.js — sin cambios (Zustand existente)src/lib/databaseService.js — sin cambios- Schema, RPCs, RLS — sin cambios
- Lógica financiera — sin cambios
5. Regresión Ejecutada
5.1 Operaciones (15/15 PASS)
| # |
Operación |
Módulo |
Estado |
| 1 |
Iniciar sesión |
Salas |
✅ |
| 2 |
Agregar tiempo (+30/+60) |
Salas |
✅ |
| 3 |
Agregar productos |
ModalTienda |
✅ |
| 4 |
Editar sesión (admin) |
ModalEditarSesionAdmin |
✅ |
| 5 |
Trasladar sesión |
ModalTrasladarSesion |
✅ |
| 6 |
Finalizar/cobrar |
ModalFinalizarSesion |
✅ |
| 7 |
Anular sesión |
ModalFinalizarSesion |
✅ |
| 8 |
Editar/anular venta |
Ventas |
✅ |
| 9 |
Stock (movimientos) |
Stock |
✅ |
| 10 |
Ventas (lista) |
Ventas |
✅ |
| 11 |
Reportes |
Reportes |
✅ |
| 12 |
Dashboard (KPIs) |
Dashboard |
✅ |
| 13 |
/tv (timers + reloj) |
TVDisplay |
✅ |
| 14 |
/event-live (timers + reloj) |
EventLive |
✅ |
| 15 |
Multi-pestaña (Salas + /tv) |
Cross-page |
✅ |
5.2 Invariantes verificados
| Invariante |
Verificación |
Estado |
| Stock correcto |
Sin cambios en lógica de stock |
✅ |
| Venta consistente |
Sin cambios en RPCs de venta |
✅ |
venta_items consistente |
Sin cambios en schema/RPCs |
✅ |
| Sesión consistente |
estado canónico (activa/finalizada/cancelada) |
✅ |
| Realtime funcionando |
realtimeSubscribe('sesiones') en 2 hooks |
✅ |
| 1 timer global |
useGlobalTick con ref-counting |
✅ |
| 1 channel de sesiones |
rt-svc-sesiones via realtimeService |
✅ |
0 cargarSesionesActivas() post-operación |
grep confirma 0 |
✅ |
0 useState de sesiones en vistas |
grep confirma 0 (solo colaVencidas en GridSalas, que es cola de UI) |
✅ |
6. Riesgos Residuales
6.1 Bajos
| Riesgo |
Descripción |
Mitigación |
| Latencia realtime 1-2s |
Realtime de Supabase tiene latencia inherente |
Polling 20s en TV/EventLive como fallback |
useGlobalTick singleton |
Si el proceso se reinicia, tick se reinicia |
Ref-counting maneja mount/unmount correctamente |
| Comparación custom en memo |
arePropsEqual podría omitir un campo nuevo |
Se cubren todos los campos que afectan render; si se agrega un campo, actualizar comparación |
6.2 Ninguno crítico
- No hay cambios en schema, RPCs, RLS, ni lógica financiera
- Rollback es
git revert (si se inicializa git) o restaurar archivos
7. Rollback
7.1 Procedimiento
- Restaurar archivos a estado pre-Sprint 0.3-C/D
- Eliminar
src/lib/realtimeService.js y src/hooks/useGlobalTick.js
npm run build para verificar
7.2 Archivos a restaurar
- 11 archivos modificados (listados en sección 4.2)
- 2 archivos nuevos a eliminar (listados en sección 4.1)
8. Recomendaciones para el Siguiente Sprint
- Inicializar git — El proyecto no tiene repo git. Recomendar
git init + commit inicial para habilitar rollback real.
- Code-splitting — El bundle es 1.27 MB (343 kB gzip). Considerar dynamic imports para
/tv y /event-live (rutas públicas, no requieren auth).
- Realtime para
salas — Actualmente crearSala/actualizarSala requieren refresh manual. Agregar realtimeSubscribe('salas', ...) en useSalas.
- Eliminar polling 20s en TV/EventLive — Una vez verificado que realtime es 100% confiable, eliminar el fallback de polling.
- Eliminar polling 30s en Dashboard — Migrar KPIs a realtime de
ventas + gastos (ya tienen canal propio).
useGlobalTick con tick selectivo — Para componentes que solo necesitan precisión de 10s (LiveMonitor, MonitorSalasActivas), considerar un tick de 10s para reducir renders.
8.3 Largo plazo
- Command Center — Con el core engine optimizado, el siguiente paso es el Command Center para monitoreo centralizado.
- PWA / offline — Considerar Service Worker para vistas públicas (/tv, /event-live) que puedan funcionar con datos cacheados.
- Web Workers — Para cálculos pesados (KPIs de Dashboard) que podrían bloquear el main thread.
9. Conclusión
El Sprint 0.3-C/D completó exitosamente la refactorización del core engine de GameControl. Todas las métricas objetivo se cumplieron:
- ✅ 47 → 1 timer
- ✅ 4 → 1 channel de sesiones
- ✅ 4 → 1 fuente de estado
- ✅ 12 → 0 refreshes redundantes
- ✅ 6 componentes memoizados con evidencia
- ✅ 15/15 operaciones de regresión PASS
- ✅ 0 regresiones
- ✅ Build PASS
La arquitectura final es más simple, más performante, y más mantenible, sin cambios funcionales ni en la capa de datos.