Guidelines and Insights for Implementing Micro-Frontend Architecture in Software Development

<p><strong>Context:&nbsp;</strong>The complexity associated with incorporating new technologies into monolithic frontend projects has posed a challenge for software development teams. While the backend has advanced with microservices, the frontend has faced challenges related to code redundancy, consistency, scalability, and the lack of a modular approach. In response to these challenges, the micro-frontend architecture emerged, proposing a more modular and independent architecture.</p> <p><strong>Objective:</strong> To investigate the impacts and challenges associated with adopting the micro-frontend architecture and to provide practical guidelines for organizations to implement it.</p> <p><strong>Method:</strong> We conducted a Systematic Mapping Study (SMS) to identify the architectural patterns and visions used in micro-frontends. In addition, we conducted two surveys to validate strategies and guidelines for adopting the architecture.</p> <p><strong>Results:</strong> In the perception of the survey participants, the proposed guide can facilitate the process of adopting the micro-frontend architecture. As for the case study, we identified aspects related to practical implementation, covering performance and scalability, maintenance, collaboration, and parallel development. Participants also reported complexity associated with managing multiple smaller modules, as well as the lack of developer experience with micro-frontend architecture technologies. The case study also corroborated the findings of the surveys.</p> <p><strong>Conclusion:</strong> The findings highlighted the relevance of the Micro-frontend architecture in modernizing the frontend layer. However, it is important to note that the need for its adoption is strongly related to the complexity and size of the project and team. Thus, adopting the micro-frontend architecture with the support of a set of methodological and technological decisions has a greater chance of success in its implementation.</p> <p>&nbsp;</p> <p><br><em>Keywords: Micro-Frontend Architecture, Frontend Modernization, Systematic Mapping Study (SMS), Software Architecture, Web Development<br></em></p>