Utilice DHTMLX React Gantt con Remix para aplicaciones de planificación de proyectos
DHTMLX React Gantt dentro de las rutas de Remix: configuración estable, devoluciones de llamada de data.save y acceso opcional a la API imperativa para la planificación de proyectos, sin soluciones alternativas de SSR.
Fuentes: Using DHTMLX React Gantt and Remix for Project Planning Apps
Las interfaces de usuario para la planificación de proyectos en React suelen enfrentarse al mismo tiempo a dos presiones: una programación interactiva y detallada en el cliente, y datos que deben llegar sin retrasar la visualización del gráfico. A medida que los diagramas de tareas crecen y los flujos de trabajo se ramifican, mantener una interfaz Gantt ágil depende tanto de cómo las rutas cargan los datos como de la propia biblioteca de gráficos.
Remix se sitúa en el lado de renderizado en servidor de este equilibrio. Junto con DHTMLX React Gantt, permite que las pantallas de planificación carguen el trabajo de manera eficiente, al tiempo que mantiene la línea de tiempo disponible para desplazarse, editar y vincular tareas. El starter público en GitHub bajo DHTMLX/react-gantt-remix-starter ofrece una guía concreta sobre esas integraciones: https://github.com/DHTMLX/react-gantt-remix-starter
Qué aporta Remix a una aplicación React Gantt
Artículos anteriores ya combinan widgets de programación intensiva con SSR de Next.js. Remix aborda la misma integración desde un enfoque distinto: se apoya en APIs web conocidas y React Router en lugar de inventar un modelo paralelo para la obtención de datos.
Esa elección hace que la gestión de rutas y el movimiento de datos sean más fáciles de comprender en el árbol de código fuente. En el caso de gráficos de Gantt, programadores y otros paneles con grandes volúmenes de datos, las interacciones suelen requerir una conexión clara con las operaciones del servidor; por lo tanto, un esquema explícito de rutas y cargadores resulta más útil que la magia oculta de los frameworks.
El proyecto inicial se centra en cómo fluye el proceso de renderizado entre Remix y React Gantt. Cubre lo siguiente:
- cargar datos desde la ruta
- mantener estable la configuración del Gantt
- enviar los cambios en la interfaz de usuario de vuelta al gráfico
- acceder a la API del Gantt cuando las propiedades no son suficientes
Los cargadores, las acciones y la persistencia están deliberadamente fuera del alcance. Estas partes cambian con cada arquitectura de producto. La función de la demostración es mostrar que DHTMLX React Gantt se integra en el modelo de renderizado de Remix sin necesidad de envoltorios exclusivos para SSR ni tratamientos especiales.
A partir de la versión 9.0.12, DHTMLX React Gantt funciona con frameworks SSR como Next.js y Remix sin requerir shells exclusivos para el cliente ni configuraciones puntuales.
Detalles de integración: Conectar Remix y DHTMLX React Gantt
Los puntos de conexión prácticos que se detallan a continuación son los que permiten que Remix junto con React Gantt funcione en una ruta real.
Renderizado del Gantt dentro de una ruta de Remix
El gráfico se encuentra en su propio componente GanttChart. Desde Remix, se importa ese componente a una ruta ordinaria y se renderiza como cualquier otro árbol de React; no se requiere ninguna API especial para rutas.
import GanttChart from '~/components/Gantt/Gantt';
import type { Route } from './+types/home';
import { tasks, links } from '~/data/demoData';
export default function Home() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<GanttChart tasks={tasks} links={links} />
</div>
);
}
La ruta controla el diseño de la página y el flujo de datos. React Gantt se encarga de dibujar la línea de tiempo y gestionar las ediciones. Las tareas y los enlaces se entregan como propiedades; las mutaciones se realizan a través del callback save.
La muestra utiliza datos de demostración estáticos para que la estructura sea claramente visible. La misma ruta de propiedades funciona cuando los cargadores de Remix proporcionan tareas y enlaces obtenidos desde el servidor.
Un error común: el contenedor del Gantt necesita un tamaño explícito. Sin establecer una altura (por ejemplo width: '100vw', height: '100vh'), el componente puede cargarse mientras el gráfico permanece en blanco.
Mantener estable la configuración del Gantt
GanttConfig gestiona las escalas, fechas, ancho de la cuadrícula y otros parámetros relacionados de la interfaz.
Los objetos simples asignados durante la renderización reciben una nueva referencia en cada iteración. Al introducir un objeto de configuración actualizado en Gantt se puede forzar una reinicialización completa. La demostración congela la configuración con useMemo:
const config: GanttConfig = useMemo(
() => ({
grid_width: 500,
scale_height: 90,
scales: [
{ unit: 'year', step: 1, date: '%Y' },
{ unit: 'month', step: 1, date: '%M' },
{ unit: 'day', step: 1, date: '%d %M' },
],
}),
[]
);
El objeto memorizado se crea una sola vez y se reutiliza durante toda la vida útil del componente, por lo que las renderizaciones incidentales del padre no reconstruyen el gráfico.
Procesamiento de cambios del usuario con data.save
Gantt es un editor, no solo una imagen. Los usuarios añaden tareas, modifican fechas, reorganizan dependencias y eliminan filas.
DHTMLX React Gantt muestra esos cambios a través de data.save:
data={{
save: (entity: string, action: string, data: Task | Link, id: string | number) => {
console.log(`${entity} - ${action} - ${id}`, data);
},
}}
En la versión inicial, la función de callback solo registra los cambios. En producción, aquí es donde las acciones de Remix, las llamadas HTTP o las actualizaciones del estado local persistirían el cambio. La función de callback actúa como puente entre los gestos del gráfico y la capa de datos; el destino exacto depende de la arquitectura de la aplicación.
Acceder a la API de Gantt cuando sea necesario
Algunos flujos requieren algo más que propiedades declarativas: desplazarse por la línea de tiempo en código, leer el contenido de una tarea o agregar comportamientos personalizados.
La demostración mantiene la instancia de Gantt mediante useRef:
const ganttRef = useRef<ReactGanttRef>(null);
const gantt = ganttRef.current?.instance;
if (!gantt) return;
// here you can call any Gantt API method
console.log('All tasks:', gantt.getTaskByTime());
gantt.showDate(new Date());
Ese referencia permite acceder a la API subyacente sin forzar la actualización de React. Los gráficos simples podrían no necesitarlo nunca. A medida que crecen las reglas del producto, el acceso imperativo mantiene prácticas las interacciones personalizadas.
Con estas conexiones claras, el repositorio de inicio y la guía de integración con Remix en https://docs.dhtmlx.com/gantt/integrations/react/remix/ son más fáciles de seguir de principio a fin.
Conclusión
El starter de Remix no constituye una arquitectura de producto completa. Muestra cómo el flujo de renderizado, la transferencia de datos y las interacciones con Gantt pueden integrarse en un proyecto de Remix junto a un widget de programación avanzado.
Desde allí puede agregar persistencia en el servidor, introducir un almacén de datos o ampliar el gráfico con lógica personalizada. Junto con la guía de documentación, la demostración constituye una base funcional para interfaces de planificación de proyectos compatibles con SSR.
Lecturas relacionadas
- Subidas multitab coordinadas con la API Web Locks — Evite las subidas duplicadas entre pestañas del navegador reemplazando los trucos basados en localStorage y BroadcastChannel por navigator.locks y un coordinador de subidas de React.
- Mantener listas de React Query actualizadas con refetchOnMount después de la navegación — Entienda por qué TanStack Query muestra filas de lista obsoletas tras las ediciones, cuando invalidateQueries no es suficiente, y cómo refetchOnMount vuelve a validarlas en cada recarga.