Revisión de código con calambrazos y estructura de carpetas. Developer contra las cuerdas 3

Continuamos en esta saga de “Developer contra las cuerdas” trabajando sobre nuestra aplicación web y en este “meeting” José Manuel Gómez (Tech Lead) y Dani Primo (developer) vuelven a juntarse para revisar el código ejecutado por Dani y que José Manuel presente la arquitectura limpia del proyecto.

GitFlow: Organización y control en el desarrollo

Uno de los pilares de nuestro desarrollo ha sido el uso de GitFlow. Esta metodología nos permite estructurar nuestro flujo de trabajo de manera eficiente, separando las ramas de desarrollo, características, correcciones y releases. GitFlow facilita la colaboración en equipo y asegura que los cambios se integren de manera controlada y ordenada.

Ventajas de GitFlow

• Control de versiones: Mantiene un registro claro de los cambios y facilita la reversión si es necesario.
• Colaboración: Permite a múltiples desarrolladores trabajar en diferentes características sin interferir entre sí.
• Calidad: La integración continua y las revisiones de código se facilitan al tener ramas dedicadas para desarrollo y producción.

Estructura de carpetas y organización del código

Una buena organización del código es crucial para mantener la escalabilidad y la mantenibilidad de un proyecto. En nuestro caso, seguimos una estructura de carpetas bien definida que nos ayuda a mantener todo en orden.

Carpeta src

La carpeta src es el núcleo del proyecto, donde se encuentra todo el código fuente. Dentro de src, tenemos varias subcarpetas importantes:

API

Contiene los tipos generados automáticamente desde Supabase. Esto nos permite mantener una tipificación fuerte y evitar errores en tiempo de ejecución.

Dominio

Aquí definimos nuestras entidades, repositorios y adaptadores. El dominio es el corazón de nuestra lógica de negocio, asegurando que todas las operaciones se realicen conforme a las reglas establecidas.

Hooks

Incluye los hooks personalizados que utilizamos en React. Estos hooks nos permiten reutilizar lógica de forma eficiente y mantener el código limpio y modular.

Infraestructura

Esta carpeta alberga la implementación de nuestros repositorios y adaptadores. Aquí es donde conectamos nuestra aplicación con Supabase y otros servicios externos.

Presentación

Contiene los componentes de React que se encargan de renderizar la interfaz de usuario. La lógica de presentación se mantiene separada de la lógica de negocio para asegurar una clara división de responsabilidades.

Servicios

Los servicios actúan como intermediarios entre la capa de infraestructura y la capa de presentación. Gestionan las peticiones y respuestas, manejando los datos de manera eficiente.

Generación automática de tipos con Supabase

Una de las ventajas de utilizar Supabase es la capacidad de generar tipos automáticamente. Esto nos permite tener una tipificación fuerte en TypeScript, lo que reduce errores y mejora la autocompletación en los editores de código.

Ventajas de los tipos automáticos

• Precisión: Garantiza que los datos que manejamos siempre tengan el formato esperado.
• Productividad: Mejora la autocompletación y la detección de errores en tiempo de desarrollo.
• Mantenibilidad: Facilita el refactorizado y la evolución del esquema de la base de datos.

Manejo de dependencias y configuración del proyecto

La gestión de dependencias es fundamental para mantener un proyecto sano y funcional. Utilizamos Bun en lugar de npm para ejecutar y gestionar nuestras dependencias, lo que nos ofrece varias ventajas en términos de velocidad y eficiencia.

Beneficios de Bun

• Rapidez: Bun es conocido por ser más rápido en la resolución de dependencias y la instalación de paquetes.
• Consistencia: Ayuda a mantener un entorno de desarrollo consistente entre diferentes máquinas.

Implementación de hooks personalizados en React

Los hooks personalizados son una herramienta poderosa en React que nos permite encapsular lógica y reutilizarla en diferentes componentes. En nuestro proyecto, utilizamos hooks para gestionar formularios, realizar peticiones a la API y manejar el estado global.

Validación de datos y manejo de errores con Zod

Para asegurar la integridad de los datos, utilizamos Zod para la validación. Zod nos permite definir esquemas de validación que se aplican tanto en el cliente como en el servidor, asegurando que los datos siempre cumplan con las reglas establecidas.

Gestión de estados globales y caché con TanQuery

TanQuery es una herramienta esencial en nuestra aplicación para la gestión de estados globales y la caché. Nos permite sincronizar los datos del servidor con el cliente de manera eficiente, asegurando que siempre trabajemos con la información más actualizada.

Uso de TanQuery para caché

Uso de Service Locator y Dependency Injection

Para mantener nuestro código desacoplado y modular, utilizamos patrones como el Service Locator y la Inyección de Dependencias. Esto nos permite cambiar la implementación de nuestros servicios sin afectar al resto del código.

Implementar operaciones CRUD (Crear, Leer, Actualizar, Borrar) es una tarea común en la mayoría de las aplicaciones. En nuestro proyecto, seguimos buenas prácticas para asegurarnos de que estas operaciones sean robustas y eficientes.

Planificación de testing y workflows de despliegue

La calidad del código es crucial, y para asegurarla, planeamos integrar workflows de testing y despliegue en nuestro proyecto. Utilizaremos herramientas como Jest y React Testing Library para nuestras pruebas unitarias e integrales, y configuraremos workflows de CI/CD para automatizar el proceso de despliegue.