Migración y actualización de una aplicación de gestión de tiempos a una arquitectura SPA con frontal React y backend GraphQL

Abstract

[Resumen]: Este proyecto consiste en migrar y actualizar la aplicación de tiempos de la empresa Trabe Soluciones, integrando sus funcionalidades en otra aplicación ya existente de la Intranet de Trabe. La aplicación a migrar utiliza una versión de React antigua, usa componentes de clase y Redux para la gestión del estado. A nivel de datos, consume un backend REST implementado con Ruby on Rails. Durante la realización del proyecto, se ha analizado esta aplicación para definir qué funcionalidades deben mantenerse y cuáles ajustarse. La migración contempla integrar la gestión de tiempos en la nueva aplicación de la Intranet de Trabe, que usa una arquitectura SPA más moderna, con un frontal React basado en React Hooks y una comunicación con el backend utilizando GraphQL y react-apollo. Además, esta aplicación utiliza una librería de componentes React propia de la empresa para definir una UI consistente y reaprovechable. Durante el proyecto se ha extendido el esquema GraphQL, ampliado la capa de acceso a datos y se han montado las diferentes vistas de la SPA con React. Además, se han implementado o ajustado componentes de la librería de la empresa cuando ha sido necesario.

[Abstract]: This project consists of migrating and updating the time application of the company Trabe Soluciones, integrating its functionalities in another application that already exists in the Trabe Intranet. The application that is being migrated uses an old React version, class based components and Redux for state management. Data wise it cosumes a REST backend which is implemented in Ruby on Rails. During the course of the project, the existing application has been analyzed to define which functionalities should be kept and which ones should be adjusted. The migration involves integrating time management into the newer Trabe Intranet application, which uses a more modern SPA architecture, with a React frontend based on React Hooks and communication with the backend using GraphQL and React Apollo. In addition, this application uses the company’s own React component library to define a cohesive and reusable UI (user interface) During the project, the GraphQL schema and data access layer have been extended, and newer SPA views have been assembled using React. Moreover, when needed, newer components have been added to the company’s React library, or the existing ones have been adjusted.