De un dashboard de Vue 2 a Remix: un viaje de modernización

Migrar una aplicación web puede ser una tarea abrumadora, especialmente cuando se trata de dashboards complejos. Sin embargo, los beneficios de frameworks modernos como Remix a menudo superan el esfuerzo inicial.

Describiremos en esta entrada las consideraciones clave y los pasos involucrados en la migración de un dashboard de Vue 2 a Remix, centrándonos en el manejo de acciones del lado del cliente y del servidor, y la carga de datos.

¿POR QUÉ REMIX?

Remix ofrece varias ventajas para construir aplicaciones web modernas:

• Renderizado del lado del servidor (SSR): SEO mejorado, tiempos de carga inicial más rápidos y mejor experiencia de usuario, especialmente en conexiones más lentas.
• Mejora progresiva: las aplicaciones son funcionales incluso con JavaScript deshabilitado, lo que garantiza accesibilidad y resiliencia.
• Carga de datos con loaders: mecanismos simplificados de búsqueda y almacenamiento en caché de datos.
• Acciones para mutaciones de datos: clara separación de preocupaciones para manejar envíos de formularios y otras modificaciones de datos.
• UI optimista: proporciona un impulso de rendimiento percibido al actualizar inmediatamente la interfaz de usuario antes de que el servidor responda.

ESTRATEGIA DE MIGRACIÓN

Se recomienda un enfoque paso a paso para migrar un dashboard de Vue 2 a Remix:

1. Configuración del proyecto: crea un nuevo proyecto Remix y configura la estructura de enrutamiento básica. Esta fase también requiere una decisión cuidadosa sobre qué gestor de estado, validación de formularios y otras bibliotecas de utilidades usar.
2. Migración de componentes: migra gradualmente los componentes de Vue 2 a componentes de React, centrándote en la funcionalidad y el flujo de datos.
3. Carga de datos con loaders: implementa loaders de Remix para buscar datos en el servidor y pasarlos a los componentes.
4. Acciones para mutaciones de datos: reemplaza los métodos de Vue 2 para manejar envíos de formularios y otros cambios de datos con acciones de Remix.
5. Ajustes de estilo e interfaz de usuario: adapta los estilos y los elementos de la interfaz de usuario para que se ajusten al entorno Remix.
6. Pruebas y refinamiento: prueba exhaustivamente la aplicación migrada y aborda cualquier problema.

ACCIONES DEL LADO DEL CLIENTE VS. DEL LADO DEL SERVIDOR Y LOADERS

Comprender la distinción entre las operaciones del lado del cliente y del lado del servidor es crucial en Remix:

Loaders: estas funciones se ejecutan en el servidor y son responsables de buscar datos. Se llaman:

• en la carga inicial de la página
• durante la navegación dentro de la aplicación Remix
• cuando los datos se invalidan

Acciones: estas funciones también se ejecutan en el servidor y manejan las mutaciones de datos, como los envíos de formularios. Se llaman cuando:

• se envía un formulario
• se hace clic en un enlace con method="post", method="put" o method="delete"

Esta separación de preocupaciones simplifica la gestión de datos y mejora el rendimiento.

EJEMPLO: MIGRANDO UNA TABLA DE DATOS

Considera un componente de Vue 2 que muestra una tabla de datos obtenidos de una API:

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        this.items = data;
      });
  },
};
</script>

En Remix, esto se implementa usando un loader:

import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
}

export default function DataTable() {
  const items = useLoaderData();

  return (
    <table>
      {items.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.value}</td>
        </tr>
      ))}
    </table>
  );
}

Cambios clave:

• La función loader busca datos en el servidor.
• El hook useLoaderData proporciona los datos al componente.

CONCLUSIÓN

Migrar de Vue 2 a Remix requiere una planificación y ejecución cuidadosas. Sin embargo, los beneficios de Remix, como el rendimiento mejorado, el SEO y la experiencia del desarrollador, lo convierten en una inversión que vale la pena. Al comprender los conceptos de loaders y acciones, y al seguir una estrategia de migración paso a paso, puedes modernizar con éxito tu aplicación de dashboard.