Mini app · inspirada en MS Project y Primavera
Cronogramas
Un planificador que intenta sentirse como MS Project: la tabla, el Diagrama de Gantt, la ruta crítica, los calendarios, los recursos. Es también una prueba de límites: lo que las librerías de Gantt cobran (el motor de programación) está escrito a mano, con librerías gratuitas para todo lo demás.
Lo que cobran las librerías
Hace unos años la forma razonable de tener esto en React era comprar una suite como Kendo. Hoy las librerías de Gantt gratuitas siguen dando las barras y cobrando el motor. Según sus páginas de precios (octubre de 2026), en SVAR React Gantt la programación automática, la ruta crítica, la línea base y los calendarios son de la edición PRO (desde unos 524–749 USD); la edición gratuita de dhtmlxGantt trae ruta crítica pero es GPL.
| Característica | Librerías con licencia libre | Aquí |
|---|---|---|
| Barras, arrastre, dependencias, jerarquía | gratis | hecho |
| Programación automática (CPM) | de pago | hecho |
| Ruta crítica | de pago | hecho |
| Calendario laboral con feriados | de pago | hecho |
| Línea base | de pago | hecho |
| Importar / exportar MS Project (XML) | de pago | hecho |
| Nivelación de recursos, diagrama de red, exportar a PDF | de pago | hecho |
El límite, medido
Recalcular el cronograma completo (CPM con calendario) con pnpm bench, en Node. El objetivo era menos de 50 ms para 10.000 tareas; así que se recalcula entero en cada cambio, sin recálculo incremental. «Redistribuir todo» con 10.000 tareas y 200 recursos (casi 4.000 días-recurso sobreasignados) tarda unos 155 ms y no deja ninguno.
| Proyecto (~1,5 vínculos por tarea) | Recalcular tras una edición | Al abrir (calendario nuevo) |
|---|---|---|
| 1.000 tareas | 0,6 ms | 0,7 ms |
| 10.000 tareas | 7–8 ms | 7–9 ms |
| 50.000 tareas | 46 ms | 51 ms |
Qué tiene
Nivel 1 · la sensación de MS Project
completo- Diagrama de Gantt: tabla a la izquierda, escala de tiempo de dos niveles a la derecha y divisor arrastrable
- Edición en celda con el teclado de MS Project: Enter, Tab, F2, Esc; escribir en una fila vacía crea la tarea («1 día?»)
- Duraciones y predecesoras como en la versión en español: 5d?, 2 sem, 1,5 días, 3FC+2 días, 5CC-25%
- Programación automática: cualquier cambio recalcula todo el cronograma al instante
- Esquema: sangría con Alt+Mayús+→/←, tareas resumen, contraer y expandir, hitos
- Barras que se arrastran (pone «No comenzar antes del»), se estiran, marcan el avance y se vinculan arrastrando de una a otra
- Flechas de vínculo enrutadas, ruta crítica en rojo, zoom de horas a trimestres con Ctrl+rueda, línea de hoy
- Deshacer y rehacer, guardado automático y un proyecto de ejemplo
Nivel 2 · lo que la vuelve usable
completo- Información de la tarea: General, Predecesoras, Recursos, Avanzado (restricciones y fecha límite) y Notas
- Las ocho restricciones de MS Project, con indicador de conflicto, y fecha límite con aviso
- Cambiar tiempo laboral: horario por día de la semana y feriados
- Tablas Entrada, Programación (margen de demora total y permisible), Seguimiento, Variación y Costo
- Hoja de recursos, asignaciones con unidades, sobreasignación y Gráfico de recursos
- Línea base (barras grises de lo previsto) y fecha de estado
- Insertar, eliminar y mover tareas con sus subtareas; copiar y pegar filas, también desde y hacia Excel
- Seis pestañas de cinta y barra de estado como las de MS Project
Extras que surgieron por el camino
- La barra de estado muestra cuánto tardó el último recálculo de todo el proyecto
- Ejemplo generado de 10.000 tareas y ~15.000 vínculos para medir el rendimiento
- Información emergente con las fechas resultantes mientras se arrastra una barra
- Mensajes de MS Project al rechazar vínculos circulares o entre una resumen y sus subtareas
Nivel 3a · el límite (esta vez sí entra)
completo- Importar y exportar MS Project XML, con un informe de lo que se adaptó al abrir
- Importar .xer de Primavera P6 (EDT, calendarios, avance, restricciones, recursos)
- Diagrama de red con distribución propia: 10.000 tareas en ~30 ms (dagre tardaba 63 s con 5.000)
- Nivelación de recursos («Redistribuir todo»): 10.000 tareas en ~155 ms
- Valor ganado (tabla «Valor acumulado»: CPTP, CPTR, CRTR, SPI, CPI, EAC) y curva S
- Imprimir: vista previa paginada y descarga en PDF (escrito a mano, sin jsPDF) o PNG
Fuera de alcance: abrir archivos .mpp binarios (no hay librería en JavaScript), la paridad exacta de cálculo con MS Project en todos los casos y la parte de base de datos multiusuario de Primavera.
Librerías y para qué sirve cada una
| Librería | Papel | Qué aporta aquí |
|---|---|---|
| Next.js 16 (App Router) | Rutas y build | Las páginas de información se prerenderizan; la app se carga solo en el cliente con dynamic(…, { ssr: false }). |
| React 19 | Interfaz | Tabla, cinta, diálogos y vistas de recursos. Las barras NO pasan por React: las pinta el canvas. |
| Canvas 2D | Gantt | API del navegador, sin librería. Dos capas: escena (barras, flechas, escala) y superposición (arrastres). |
| Zustand 5 (vanilla) | Estado | Tres stores fuera de React: el proyecto, lo calculado y la sesión. El Gantt se suscribe sin provocar renders. |
| Immer 11 | Deshacer | produceWithPatches: el historial guarda qué cambió y cómo revertirlo, no copias del proyecto. |
| idb-keyval | Guardado | IndexedDB con una API de dos funciones: un proyecto de 10.000 tareas no cabe cómodo en localStorage. |
| fast-xml-parser | MS Project XML | Lee el XML al importar. Exportar es escribir texto en el orden que pide el esquema de MSPDI. |
| lucide-react | Iconos | Los iconos de la cinta y los indicadores. |
| Vitest | Tests y benchmark | El motor se prueba con redes de libro de texto calculadas a mano; `pnpm bench` mide el recálculo. |
Hecho a mano (sin librería)
- Motor CPM
- Orden topológico, pasada hacia adelante y hacia atrás, cuatro tipos de vínculo, restricciones, holguras, ciclos. ~400 líneas con arrays tipados.
- Calendario laboral
- Pared ↔ minutos laborables con una tabla de acumulados y búsqueda binaria; feriados y horario por día.
- Gantt
- Escala de tiempo, barras, enrutado de flechas, hit-testing y arrastres sobre Canvas 2D.
- Tabla virtualizada
- Con filas de alto fijo, la primera visible es scrollTop / alto: no hizo falta librería.
- Uso de recursos
- Trabajo por recurso y día, sobreasignación, costo, e histograma.
- Nivelación
- Generación en serie sobre el propio CPM: cada tarea, por urgencia, en el primer hueco de sus recursos.
- Valor ganado
- Presupuesto de la línea base repartido en tiempo laborable; curva S en Canvas con información emergente.
- Diagrama de red
- Distribución por capas (columna = camino más largo, orden por baricentros) y render en Canvas.
- Unas 80 líneas: catálogo, páginas, una imagen JPEG por hoja y la tabla xref con las posiciones en bytes.
- MS Project XML
- El mapeo completo: duraciones ISO en horas, adelantos en décimas de minuto, calendarios derivados, tareas manuales.
Si fuera un producto real
- Bryntum Gantt / Scheduler Pro
- El más completo en JavaScript (motor propio, nivelación, MS Project). Comercial, por desarrollador.
- DHTMLX Gantt PRO / SVAR React Gantt PRO
- Programación automática, ruta crítica, línea base y calendarios en la edición de pago. Las ediciones gratuitas no los traen (o son GPL).
- Kendo / Telerik, Syncfusion
- Suites de componentes empresariales con Gantt incluido; lo que había que comprar.
- MPXJ
- Leer .mpp binarios de MS Project y .xer/.xml de P6 desde un servidor Java o .NET.
Atajos
Enter / TabConfirmar y bajar / pasar a la derecha
F2Editar la celda
Mayús+F2 / doble clicInformación de la tarea
Alt+Mayús+→ / ←Aumentar / disminuir sangría
Alt+Mayús+↑ / ↓Subir / bajar la tarea con sus subtareas
Alt+Mayús+- / +Ocultar / mostrar subtareas
Ctrl+F2 / Ctrl+Mayús+F2Vincular / desvincular las tareas seleccionadas
Insert / SuprInsertar tarea / eliminar (en Nombre) o borrar el valor
Ctrl+Mayús+F5Desplazarse a la tarea
Ctrl+C, Ctrl+X, Ctrl+VCopiar, cortar, pegar (filas enteras o celdas, con Excel)
Ctrl+Z / Ctrl+YDeshacer / rehacer
Ctrl+rueda / Mayús+ruedaZoom de la escala / desplazamiento horizontal