Refactorización y limpieza de módulos en TuTiendaWeb

Introducción

En este artículo analizamos el reciente esfuerzo de refactorización en el proyecto TuTiendaWeb, un sistema de comercio electrónico basado en el stack de Next.js. El objetivo principal fue optimizar la generación de códigos QR y realizar una limpieza profunda del módulo de usuarios, garantizando un código más mantenible y robusto.

El Problema: Acoplamiento y deuda técnica

A medida que el proyecto crece, es común que la lógica de negocio se disperse. Teníamos una implementación de generación de QR que estaba altamente acoplada a la vista, lo que dificultaba las pruebas unitarias y la reutilización del código. Del mismo modo, el módulo de usuario presentaba responsabilidades superpuestas que violaban los principios de arquitectura limpia.

Solución: Aplicando Arquitectura Hexagonal y Refactorización

Para resolver esto, movimos la lógica de generación de QR a un servicio dedicado, separado completamente de la capa de UI. Al aplicar una variante de la Arquitectura Hexagonal, logramos que los componentes de React solo consuman servicios sin conocer los detalles de implementación.

Ejemplo conceptual de la separación de responsabilidades:

// Servicio independiente para lógica de negocio
export const generateQRCodeData = (payload: string): string => {
  // Lógica de transformación validada por Zod
  return transformToQrFormat(payload);
};

// Componente de React puro (UI)
const QrDisplay = ({ data }: { data: string }) => {
  const qrCode = generateQRCodeData(data);
  return <img src={qrCode} alt="Código QR" />;
};

Limpieza del Módulo de Usuarios

La limpieza del módulo de usuarios se centró en delegar tareas a hooks personalizados de Zustand y centralizar las validaciones de esquemas con Zod. Esto redujo el tamaño de los archivos principales y eliminó redundancias en el manejo de estado global.

Resultados

Gracias a esta refactorización, el tiempo de mantenimiento del módulo de usuarios se ha reducido significativamente. Al desacoplar la lógica de generación de QR, ahora podemos cambiar el motor de renderizado o la librería sin tocar ninguno de los componentes de la interfaz.

Próximos pasos

Te recomiendo revisar tus módulos actuales buscando lógica de negocio oculta en los componentes. Intenta extraer esa lógica en funciones puras o servicios aislados. El siguiente paso lógico tras una limpieza de código es aumentar la cobertura de pruebas unitarias sobre estas nuevas funciones aisladas para asegurar estabilidad a largo plazo.

Generated with Gitvlg.com