Arquitectura micro-frontend para optimizar el desarrollo de aplicaciones web tipo spa.

Abstract

Currently, the world of web application development has undergone a significant change. and one of the most important trends is the adoption of microfrontend architecture. This approach in web design and development allows for breaking down a user interface into smaller. independent components, offering several benefits in terms of performance. maintenance, and scalability. Microfrontend encompasses concepts that aim to improve modularity and code reuse in the frontend part of the web application. Instead of managing a single codebase in a unified repository, the application can be divided into smaller modules and worked on by smaller teams.

The objective of this project is to implement a microfrontend architecture to optimize the development of SPA-type web applications. achieving more efficient and agile development, and providing users with a high-quality experience when interacting with the web application. By leveraging the benefits of the microfrontend approach, companies can quickly adapt to the changing demands of the market and offer innovative products and services to their end users. Consequently. a test application was developed using the architecture to showcase its benefits through metrics.

For the project development, the XP (Extreme Programming) methodology was used. focusing on rapid development, as continuous performance testing was required to demonstrate the main objective. Angular and React technologies were used for frontend development, and the Module Federation library was utilized for implementing the architecture. A Node.js-based backend service was used, along with a non-relational database in a MongoDB cluster. Finally. Performance testing was finally applied using the browser's devtools tool