Este Trabajo Fin de Máster tiene como propósito realizar una comparación detallada entre los frameworks de desarrollo frontend React y Angular, que son ampliamente utilizados en la industria del desarrollo de aplicaciones web modernas. La comparación se basará en la implementación de dos versiones de una misma aplicación web para la gestión de recetas de cocina. Esta aplicación incluye funcionalidades como el registro y autenticación segura de usuarios, la búsqueda y filtrado de recetas utilizando una API externa, y la gestión de recetas favoritas y comentarios almacenados en una base de datos.
React, una biblioteca de JavaScript creada por Facebook, destaca por su flexibilidad y el uso de componentes funcionales basados en hooks, mientras que Angular, un framework completo desarrollado por Google, se caracteriza por su enfoque más estructurado y el uso de TypeScript como lenguaje base. Ambas tecnologías ofrecen soluciones robustas, pero presentan diferencias clave en aspectos como la configuración inicial, curva de aprendizaje, complejidad, rendimiento y experiencia de usuario.
Este proyecto utiliza una adaptación de Scrum como marco de gestión, complementada con documentación técnica y diagramas propios de RUP. Esta combinación permite aprovechar la flexibilidad y enfoque iterativo de Scrum junto con el rigor documental de RUP, obteniendo así los beneficios de ambas metodologías. Los diagramas de casos de uso, modelo de dominio y otros elementos visuales tradicionalmente asociados a RUP se han incorporado como documentación técnica para enriquecer la comprensión del sistema, mientras que la estructura de sprints y la gestión ágil del proyecto siguen los principios de Scrum.
Se medirán métricas objetivas y subjetivas, como tiempos de desarrollo, consumo de recursos, rendimiento, facilidad de integración con APIs y backend (desarrollado en Node.js), y satisfacción del usuario final. También se implementará una hoja de estilos compartida para garantizar consistencia visual y funcional entre ambas aplicaciones y pruebas unitarias.
Esta comparativa no solo permitirá entender las diferencias entre React y Angular en un caso práctico, sino que también proporcionará herramientas y criterios útiles para tomar decisiones informadas en proyectos futuros de desarrollo web, especialmente en entornos donde la elección de tecnologías puede impactar significativamente el resultado del producto.
Abstract:
This Master’s Thesis aims to perform a detailed comparison between the frontend development frameworks React and Angular, both of which are widely adopted in the web development industry. The comparison will focus on implementing two versions of the same web application for recipe management. This application includes features such as user registration and secure authentication, recipe search and filtering using an external API, and the management of favorite recipes and comments stored in a database.
React, a JavaScript library developed by Facebook, is renowned for its flexibility and the use of functional components with hooks, while Angular, a comprehensive framework developed by Google, is known for its structured approach and reliance on TypeScript as its core language. These differences make both technologies valuable for different contexts, and this project seeks to explore these distinctions in depth.
This project uses an adaptation of Scrum as a management framework, complemented by technical documentation and diagrams typically associated with RUP. This combination allows for the flexibility and iterative focus of Scrum while benefiting from the rigorous documentation practices of RUP, thus obtaining the advantages of both methodologies. Use case diagrams, domain models, and other visual elements traditionally linked to RUP have been incorporated as technical documentation to enhance the system’s understanding, while the sprint structure and agile project management follow Scrum principles.
Metrics such as development time, resource consumption, performance, integration ease with external APIs and a Node.js backend, and user satisfaction will be analyzed. A shared stylesheet will also be implemented to maintain visual and functional consistency between the two applications.
By comparing these frameworks in a practical scenario, this thesis aims to highlight their respective strengths and weaknesses. The findings will serve as a guide for making informed decisions when selecting technologies for future web development projects, particularly in scenarios where the choice of tools significantly influences the project’s success.
Este Trabajo Fin de Máster tiene como propósito realizar una comparación detallada entre los frameworks de desarrollo frontend React y Angular, que son ampliamente utilizados en la industria del desarrollo de aplicaciones web modernas. La comparación se basará en la implementación de dos versiones de una misma aplicación web para la gestión de recetas de cocina. Esta aplicación incluye funcionalidades como el registro y autenticación segura de usuarios, la búsqueda y filtrado de recetas utilizando una API externa, y la gestión de recetas favoritas y comentarios almacenados en una base de datos.
React, una biblioteca de JavaScript creada por Facebook, destaca por su flexibilidad y el uso de componentes funcionales basados en hooks, mientras que Angular, un framework completo desarrollado por Google, se caracteriza por su enfoque más estructurado y el uso de TypeScript como lenguaje base. Ambas tecnologías ofrecen soluciones robustas, pero presentan diferencias clave en aspectos como la configuración inicial, curva de aprendizaje, complejidad, rendimiento y experiencia de usuario.
Este proyecto utiliza una adaptación de Scrum como marco de gestión, complementada con documentación técnica y diagramas propios de RUP. Esta combinación permite aprovechar la flexibilidad y enfoque iterativo de Scrum junto con el rigor documental de RUP, obteniendo así los beneficios de ambas metodologías. Los diagramas de casos de uso, modelo de dominio y otros elementos visuales tradicionalmente asociados a RUP se han incorporado como documentación técnica para enriquecer la comprensión del sistema, mientras que la estructura de sprints y la gestión ágil del proyecto siguen los principios de Scrum.
Se medirán métricas objetivas y subjetivas, como tiempos de desarrollo, consumo de recursos, rendimiento, facilidad de integración con APIs y backend (desarrollado en Node.js), y satisfacción del usuario final. También se implementará una hoja de estilos compartida para garantizar consistencia visual y funcional entre ambas aplicaciones y pruebas unitarias.
Esta comparativa no solo permitirá entender las diferencias entre React y Angular en un caso práctico, sino que también proporcionará herramientas y criterios útiles para tomar decisiones informadas en proyectos futuros de desarrollo web, especialmente en entornos donde la elección de tecnologías puede impactar significativamente el resultado del producto.
Abstract:
This Master’s Thesis aims to perform a detailed comparison between the frontend development frameworks React and Angular, both of which are widely adopted in the web development industry. The comparison will focus on implementing two versions of the same web application for recipe management. This application includes features such as user registration and secure authentication, recipe search and filtering using an external API, and the management of favorite recipes and comments stored in a database.
React, a JavaScript library developed by Facebook, is renowned for its flexibility and the use of functional components with hooks, while Angular, a comprehensive framework developed by Google, is known for its structured approach and reliance on TypeScript as its core language. These differences make both technologies valuable for different contexts, and this project seeks to explore these distinctions in depth.
This project uses an adaptation of Scrum as a management framework, complemented by technical documentation and diagrams typically associated with RUP. This combination allows for the flexibility and iterative focus of Scrum while benefiting from the rigorous documentation practices of RUP, thus obtaining the advantages of both methodologies. Use case diagrams, domain models, and other visual elements traditionally linked to RUP have been incorporated as technical documentation to enhance the system’s understanding, while the sprint structure and agile project management follow Scrum principles.
Metrics such as development time, resource consumption, performance, integration ease with external APIs and a Node.js backend, and user satisfaction will be analyzed. A shared stylesheet will also be implemented to maintain visual and functional consistency between the two applications.
By comparing these frameworks in a practical scenario, this thesis aims to highlight their respective strengths and weaknesses. The findings will serve as a guide for making informed decisions when selecting technologies for future web development projects, particularly in scenarios where the choice of tools significantly influences the project’s success. Read More
Related posts:
Angular frente a React: Análisis de su adopción y eficiencia en el desarrollo de aplicaciones web modernas
Aplicación Android para la gestión de inventarios y optimización del consumo de productos
Desarrollo de un sistema de gestión para hostelería
Aplicación de la Metodología OOWS y el Marco Ágil Scrum en el Diseño del “Chat Corporativo”
Herramientas Low-Code: PadelLeagueAPP con OutSystems
Migración de una aplicación web de gestión de una tienda Online a una arquitectura hexagonal con Angular Y Spring Boot