KRISTI BRAHOLLI, KLESTI HOXHA
Abstract
This paper explores the concept of micro-frontends in the development of web- based applications, as an architectural approach designed to address the challenges of scalability and maintainability in modern systems. Driven by the rapid growth and increasing complexity of web applications over the past fifteen years, there has been a need for better management, clarity, and structured architecture. Micro-frontends offer a solution by breaking down the frontend into smaller, independent units that can be developed, deployed, and maintained by different teams. Inspired by the success of microservices, developers have started to apply similar architectural principles to the frontend, giving rise to the micro-frontend approach. Although the concept is not entirely new, it has gained popularity in recent years due to the rise of single-page applications and the need for more efficient scaling and maintenance. This approach offers several benefits, including faster development cycles, improved scalability, and reduced maintenance costs. However, it also requires careful planning and coordination to be successfully implemented in real-world projects. To evaluate this architecture, in this work we design and implement a case study prototype that leverages the micro- frontend architecture combining React, NextJS, VueJS, and NodeJS using Webpack Module Federation. Despite its notable advantages, including independent deployment, this architecture was found to introduce additional maintenance complexity for small-scale applications.
Key words: Micro-frontends, scalability, maintainability, modular design, software architecture.