ADR-0003 · Migrar de React a Tabulator + Chart.js

ADR-0003 · Migrar de React a Tabulator + Chart.js

  • Status: ✅ Accepted
  • Fecha: 2026-03-01
  • Tags: frontend · performance

Contexto

La versión 1.x de los dashboards usaba React + ReactDOM + Recharts + Babel Standalone. El bundle inicial pesaba ~500 KB sólo de librerías + el código.

Necesidades del módulo Caja/Gastos:

  • Tabla árbol RUBRO ▸ CONCEPTO (jerarquía).
  • Virtual scroll para tablas grandes (clientes ~1.000 filas, artículos ~1.200).
  • bottomCalc para fila TOTAL al pie de cada tabla.
  • Sin build step (Hostinger no corre webpack).

Opciones consideradas

Stack Bundle dataTree Virtual scroll Build step Veredicto
React + Recharts ~500 KB manual manual ❌ Babel Standalone Lento, frágil
React + AG-Grid ~600 KB ✅ ✅ ❌ Demasiado pesado
Vue + Element Plus ~400 KB ✅ ✅ ❌ Mismo problema
Vanilla JS + Tabulator + Chart.js ★ ~280 KB ✅ nativo ✅ nativo ✅ ninguno Elegido

Decisión

Migrar todo el frontend a:

  • JS vanilla (sin framework)
  • Tabulator 6.3 para todas las tablas
  • Chart.js 4.4 para todos los gráficos
  • Carga vía CDN (sin build step)

Consecuencias

✅ −500 KB de bundle comparado con React stack. ✅ dataTree nativo en Tabulator (RUBRO ▸ CONCEPTO sin código custom). ✅ bottomCalc nativo para filas TOTAL ponderado. ✅ Sin build step — código va directo a producción. ✅ Compatible con Hostinger shared (no necesita node). ⚠️ Perdimos JSX → más HTML inline en dashboard.php. ⚠️ Reactividad menos elegante (manual con eventos vs hooks).

Referencias