Este trabajo consiste en realizar una migración de una aplicación legada, pasando en la parte back-end de una arquitectura tres capas a arquitectura hexagonal y en la parte front-end, de un sistema de ficheros HTML, CSS y JavaScript a una SPA (Single Page Application) creada haciendo uso del framework Angular.
La aplicación legada es el resultado del desarrollo del Trabajo de Fin de Grado: “DESARROLLO DE UNA APLICACIÓN WEB CON JAVA Y SPRING BOOT PARA LA GESTIÓN DE UNA TIENDA DE ROPA ONLINE”.
La motivación principal para llevar a cabo esta migración radica de la necesidad de modernizar la arquitectura de la aplicación para mejorar aspectos importantes como la mantenibilidad, la escalabilidad y el rendimiento. En la parte de la API, pasar de un modelo tres capas a una arquitectura hexagonal permitirá separar las responsabilidades y desacoplar componentes, lo que facilitará la evolución de partes concretas sin afectar al resto de partes de la aplicación. En cuanto a la parte frontal, la migración de un sistema de ficheros a un SPA con Angular otorgará mayor fluidez y mejorará la interactividad con el usuario. Además, Angular proporciona herramientas enfocadas la integración con API REST lo que contribuye a una mayor coherencia de la migración de la aplicación en su conjunto.
Para el desarrollo de esta migración se plantea un diseño similar al diseño legado: la parte back-end, que consistirá en una API REST, la cual permitirá la gestión de los diferentes recursos, el front-end, que será la parte visual de la aplicación y, por último, la capa de persistencia de datos. Estos componentes mantendrán la contenerización que ya tenía la aplicación legada -haciendo uso de Docker- para lograr una alta portabilidad y rapidez de despliegue de la aplicación.
La primera parte de este documento abarcará los conceptos clave y las explicaciones necesarias de las diferentes tecnologías que se utilizarán, haciendo un estudio teórico de cada una de ellas.
La segunda parte consistirá en un estudio arquitectónico de la aplicación legada (requisitos, diagramas y modelado) y contendrá las fases de desarrollo de la nueva aplicación, que desarrollará en iteraciones siguiendo una metodología SCRUM (Scrum.org, 2025). En cada una de estas fases se expondrán tanto las acciones necesarias en cada una de las iteraciones como los resultados finales obtenidos al terminar cada una de ellas, incluyendo estimaciones previas, ajustes, creación de historias de usuario, ejecución de la aplicación y ejecución de pruebas (Medium, 2022).
Por último, se sacarán conclusiones generales tras la finalización de la migración y se hará un estudio ético, social y ambiental de la nueva aplicación creada.
Abstract:
The objective of this project is to perform a migration of a legacy application from a three-layer architecture to a hexagonal architecture on the back-end and from an HTML, CSS and JavaScript file system to a SPA (Single Page Application) developed using Angular framework on the front-end.
The legacy application is the result of the development of the final degree assignment: “DESARROLLO DE UNA APLICACIÓN WEB CON JAVA Y SPRING BOOT PARA LA GESTIÓN DE UNA TIENDA DE ROPA ONLINE”.
The main motivation of carrying out this migration lays on the need of modernizing the architecture of the application in order to improve important features such as maintainability, scalability and performance. In the API migration part going from a three-layer model to a hexagonal architecture pattern will allow to separate responsibilities and decouple components what will facilitate the evolution of separate parts of the application without affecting the rest of the application. Regarding the frontal part of the application, migrating from a file system to an Angular SPA will give the application more fluidity and will improve interaction with the user. Moreover, Angular will provide us with very useful API REST integration tools which helps to add more coherency to the full application migration.
For the development of this migration a similar design to the legacy design is proposed: the back-end part will consist of an API REST, which will allow the management of the different resources, the front-end part, which will be the visual part of the application, and lastly, the data persistence layer. These components will be maintaining the same containerization mechanism that the legacy application has -using Docker- achieving a high portability and deployment speed of the application.
The first part of this document will cover the key concepts and the necessary explanations of the different technologies that will be used, making a theoretical study of each one of them.
The second part will consist of an architectural study of the legacy application (requirements, diagrams and models) and will contain the development stages of the new application, which will be developed in different iterations following a SCRUM methodology. In each of these stages both the actions required in each of the iterations and the final results obtained at the end of each one will be exposed, including previous estimates, adjustments, creation of user stories, execution of the application and execution of tests.
Finally, general conclusions will be drawn after the completion of the migration process and an ethical, social and environmental study of the application will be carried out.
Este trabajo consiste en realizar una migración de una aplicación legada, pasando en la parte back-end de una arquitectura tres capas a arquitectura hexagonal y en la parte front-end, de un sistema de ficheros HTML, CSS y JavaScript a una SPA (Single Page Application) creada haciendo uso del framework Angular.
La aplicación legada es el resultado del desarrollo del Trabajo de Fin de Grado: “DESARROLLO DE UNA APLICACIÓN WEB CON JAVA Y SPRING BOOT PARA LA GESTIÓN DE UNA TIENDA DE ROPA ONLINE”.
La motivación principal para llevar a cabo esta migración radica de la necesidad de modernizar la arquitectura de la aplicación para mejorar aspectos importantes como la mantenibilidad, la escalabilidad y el rendimiento. En la parte de la API, pasar de un modelo tres capas a una arquitectura hexagonal permitirá separar las responsabilidades y desacoplar componentes, lo que facilitará la evolución de partes concretas sin afectar al resto de partes de la aplicación. En cuanto a la parte frontal, la migración de un sistema de ficheros a un SPA con Angular otorgará mayor fluidez y mejorará la interactividad con el usuario. Además, Angular proporciona herramientas enfocadas la integración con API REST lo que contribuye a una mayor coherencia de la migración de la aplicación en su conjunto.
Para el desarrollo de esta migración se plantea un diseño similar al diseño legado: la parte back-end, que consistirá en una API REST, la cual permitirá la gestión de los diferentes recursos, el front-end, que será la parte visual de la aplicación y, por último, la capa de persistencia de datos. Estos componentes mantendrán la contenerización que ya tenía la aplicación legada -haciendo uso de Docker- para lograr una alta portabilidad y rapidez de despliegue de la aplicación.
La primera parte de este documento abarcará los conceptos clave y las explicaciones necesarias de las diferentes tecnologías que se utilizarán, haciendo un estudio teórico de cada una de ellas.
La segunda parte consistirá en un estudio arquitectónico de la aplicación legada (requisitos, diagramas y modelado) y contendrá las fases de desarrollo de la nueva aplicación, que desarrollará en iteraciones siguiendo una metodología SCRUM (Scrum.org, 2025). En cada una de estas fases se expondrán tanto las acciones necesarias en cada una de las iteraciones como los resultados finales obtenidos al terminar cada una de ellas, incluyendo estimaciones previas, ajustes, creación de historias de usuario, ejecución de la aplicación y ejecución de pruebas (Medium, 2022).
Por último, se sacarán conclusiones generales tras la finalización de la migración y se hará un estudio ético, social y ambiental de la nueva aplicación creada.
Abstract:
The objective of this project is to perform a migration of a legacy application from a three-layer architecture to a hexagonal architecture on the back-end and from an HTML, CSS and JavaScript file system to a SPA (Single Page Application) developed using Angular framework on the front-end.
The legacy application is the result of the development of the final degree assignment: “DESARROLLO DE UNA APLICACIÓN WEB CON JAVA Y SPRING BOOT PARA LA GESTIÓN DE UNA TIENDA DE ROPA ONLINE”.
The main motivation of carrying out this migration lays on the need of modernizing the architecture of the application in order to improve important features such as maintainability, scalability and performance. In the API migration part going from a three-layer model to a hexagonal architecture pattern will allow to separate responsibilities and decouple components what will facilitate the evolution of separate parts of the application without affecting the rest of the application. Regarding the frontal part of the application, migrating from a file system to an Angular SPA will give the application more fluidity and will improve interaction with the user. Moreover, Angular will provide us with very useful API REST integration tools which helps to add more coherency to the full application migration.
For the development of this migration a similar design to the legacy design is proposed: the back-end part will consist of an API REST, which will allow the management of the different resources, the front-end part, which will be the visual part of the application, and lastly, the data persistence layer. These components will be maintaining the same containerization mechanism that the legacy application has -using Docker- achieving a high portability and deployment speed of the application.
The first part of this document will cover the key concepts and the necessary explanations of the different technologies that will be used, making a theoretical study of each one of them.
The second part will consist of an architectural study of the legacy application (requirements, diagrams and models) and will contain the development stages of the new application, which will be developed in different iterations following a SCRUM methodology. In each of these stages both the actions required in each of the iterations and the final results obtained at the end of each one will be exposed, including previous estimates, adjustments, creation of user stories, execution of the application and execution of tests.
Finally, general conclusions will be drawn after the completion of the migration process and an ethical, social and environmental study of the application will be carried out. Read More
