Guidelines for Adoption Micro-frontend Architecture
Resumo
Context: The rapid evolution of software development has led to challenges when integrating new technologies into monolithic frontend architectures. While microservices advanced backend modularity, frontends often face issues like code redundancy, scalability, and lack of modularity. The micro-frontend architecture emerged as a modular approach to address these challenges. Problem: Current monolithic frontend structures hinder agility and scalability in corporate environments, affecting both technology performance and business adaptability. This study targets challenges such as redundancy and the complexities of team coordination when scaling frontend projects. Proposed Solution: We developed a Guide for Adoption of Micro-Frontends (GAM), providing structured guidelines to support the effective implementation of micro-frontends in corporate contexts. IS Theory: This research draws upon the Technology Acceptance Model (TAM), evaluating the factors influencing the adoption of micro-frontend architecture within development teams. Method: We conducted a systematic mapping study (SMS) to investigate the impacts and challenges associated with adopting micro-frontends in software development. Next, we proposed the GAM and carried out a case study at Serasa Experian to assess the feasibility of the proposed guide. Additionally, we conducted a survey with development practitioners to explore their perceptions of the micro-frontend architecture and the workflows suggested by the GAM. Results: Results indicate that GAM is viewed positively by practitioners, assisting in the structured adoption of micro-frontends. Our case study highlights critical areas impacted by this approach, including performance, scalability, and parallel development, as well as issues with module complexity and developer experience. Contributions and Impact on IS: This research contributes a practical framework for the industry, addressing current gaps in micro-frontend implementation and setting a basis for further study on modular frontend architectures in Information Systems (IS). GAM provides actionable insights for practitioners, enhancing frontend modernization efforts with measurable impacts in agility and maintenance.
Palavras-chave:
Micro-frontend, Guidelines, Architecture, Web Development
Referências
Amr S. Abdelfattah and Tomás Cerný. 2023. Filling The Gaps in Microservice Frontend Communication: Case for New Frontend Patterns. In Proceedings of the 13th International Conference on Cloud Computing and Services Science, CLOSER 2023, Prague, Czech Republic, April 26-28, 2023. SCITEPRESS, 184–193. DOI: 10.5220/0011812500003488
Fabian Bühler, Johanna Barzen, Lukas Harzenetter, Frank Leymann, and Philipp Wundrack. 2022. Combining the Best of Two Worlds: Microservices and Micro Frontends as Basis for a New Plugin Architecture. In Service-Oriented Computing - 16th Symposium and Summer School, SummerSOC 2022, Hersonissos, Crete, Greece, July 3-9, 2022, Revised Selected Papers (Communications in Computer and Information Science, Vol. 1603). Springer, 3–23. DOI: 10.1007/978-3-031-18304-1_1
Eric Evans. 2004. Domain-Driven Design: Tackling Complexity in the Heart of Software. Addison-Wesley, [link].
Elvisa Gashi, Dhuratë Hyseni, Isak Shabani, and Betim Çiço. 2024. The advantages of Micro-Frontend architecture for developing web application. In 13th Mediterranean Conference on Embedded Computing, MECO 2024, Budva, Montenegro, June 11-14, 2024. IEEE, 1–5. DOI: 10.1109/MECO62516.2024.10577836
M. Geers. 2020. Micro Frontends in Action. Manning Publications, [link].
James Lewis and Martin Fowler. 2014. Microservices. [link]. Acesso em 06 de janeiro de 2024.
Julius Lorenz, Candy Lohse, and Leon Urbas. 2021. MicroFrontends as Opportunity for Process Orchestration Layer Architecture in Modular Process Plants. In 26th IEEE International Conference on Emerging Technologies and Factory Automation, ETFA 2021, Vasteras, Sweden, September 7-10, 2021. IEEE, 1–4. DOI: 10.1109/ETFA45728.2021.9613474
Tomi Männistö, Antti-Pekka Tuovinen, and Mikko Raatikainen. 2023. Experiences on a Frameworkless Micro-Frontend Architecture in a Small Organization. In 20th International Conference on Software Architecture, ICSA 2023 - Companion, L’Aquila, Italy, March 13-17, 2023. IEEE, 61–67. DOI: 10.1109/ICSA-C57050.2023.00025
Manel Mena, Antonio Corral, Luis Iribarne, and Javier Criado. 2019. A Progressive Web Application Based on Microservices Combining Geospatial Data and the Internet of Things. IEEE Access 7 (2019), 104577–104590. DOI: 10.1109/ACCESS.2019.2932196
L. Mezzalira. 2021. Building Micro-Frontends. O’Reilly Media, [link].
Sabah Mohammed, Jinan Fiaidhi, Darien Sawyer, and Mehdi Lamouchie. 2022. Developing a GraphQL SOAP Conversational Micro Frontends for the Problem Oriented Medical Record (QL4POMR). In Proceedings of the 6th International Conference on Medical and Health Informatics, ICMHI 2022, Virtual Event, Japan, May 13-15, 2022. ACM, 52–60. DOI: 10.1145/3545729.3545738
Yuma Nishizu and Tetsuo Kamina. 2022. Implementing Micro Frontends Using Signal-based Web Components. J. Inf. Process. 30 (2022), 505–512. DOI: 10.2197/IPSJJIP.30.505
Nattaporn Noppadol and Yachai Limpiyakorn. 2021. Application of Microfrontends to Legal Search Engine Web Development. In IT Convergence and Security. Springer Singapore, Singapore, 165–173.
Andrey Pavlenko, Nursultan Askarbekuly, Swati Megha, and Manuel Mazzara. 2020. Micro-frontends: application of microservices to web front-ends. J. Internet Serv. Inf. Secur. 10, 2 (2020), 49–66. DOI: 10.22667/JISIS.2020.05.31.049
Severi Peltonen, Luca Mezzalira, and Davide Taibi. 2021. Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature Review. Inf. Softw. Technol. 136 (2021), 106571. DOI: 10.1016/J.INFSOF.2021.106571
Rodrigo Perlin, Denilson Ebling, Vinícius Maran, Glenio Descovi, and Alencar Machado. 2023. An Approach to Follow Microservices Principles in Frontend. In 2023 IEEE 17th International Conference on Application of Information and Communication Technologies (AICT), Vol. 17. IEEE, 10.1109/AICT59525.2023.10313208, 1–6. DOI: 10.1109/AICT59525.2023.10313208
A. Petcu, M. Frunzete, and D.A. Stoichescu. 2023. BENEFITS, CHALLENGES, AND PERFORMANCE ANALYSIS OF A SCALABLE WEB ARCHITECTURE BASED ON MICRO-FRONTENDS. UPB Scientific Bulletin, Series C: Electrical Engineering and Computer Science 85, 3 (2023), 319–334. [link] cited By 0.
K. Petersen, S. Vakkalanka, and L. Kuzniarz. 2015. Guidelines for conducting systematic mapping studies in software engineering: An update. Information and Software Technology 64 (2015), 1–18. DOI: 10.1016/j.infsof.2015.03.007
István Pölöskei and Udo Bub. 2021. Enterprise-level migration to micro frontends in a multi-vendor environment. Acta Polytechnica Hungarica 18, 8 (2021), 7 – 25. DOI: 10.12700/APH.18.8.2021.8.1 Cited by: 4; All Open Access, Bronze Open Access.
F. Rappl and L. Schöttner. 2021. The Art of Micro Frontends: Build websites using compositional UIs that grow naturally as your application scales. Packt Publishing, [link].
Muddasir Shakil and Alois Zoitl. 2020. Towards a Modular Architecture for Industrial HMIs. In 25th IEEE International Conference on Emerging Technologies and Factory Automation, ETFA 2020, Vienna, Austria, September 8-11, 2020. IEEE, 1267–1270. DOI: 10.1109/ETFA46521.2020.9212011
Bruno Simões, María del Puy Carretero, Jorge Martínez Santiago, Sebastián Muñnz Segovia, and Nieves Alcaín. 2023. TwinArk: A Unified Framework for Digital Twins based on Micro-frontends, Micro-Services, and Web 3D. In The 28th International ACM Conference on 3D Web Technology, Web3D 2023, San Sebastian, Spain, October 9-11, 2023. ACM, San Sebastian, Spain, 9:1–9:10. DOI: 10.1145/3611314.3615915
Bruno Simões, María del Puy Carretero, Jorge Martínez Santiago, Sebastián Muñnz Segovia, and Nieves Alcaín. 2023. TwinArk: A Unified Framework for Digital Twins based on Micro-frontends, Micro-Services, and Web 3D. In The 28th International ACM Conference on 3D Web Technology, Web3D 2023, San Sebastian, Spain, October 9-11, 2023. ACM, 9:1–9:10. DOI: 10.1145/3611314.3615915
Jonas Sorgalla, Philip Wizenty, Florian Rademacher, Sabine Sachweh, and Albert Zündorf. 2021. Applying Model-Driven Engineering to Stimulate the Adoption of DevOps Processes in Small and Medium-Sized Development Organizations. SN Comput. Sci. 2, 6 (2021), 459. DOI: 10.1007/S42979-021-00825-Z
Single SPA. 2022. Single SPA - Getting Started Overview. [link] Acesso em: 10 Janeiro de 2024.
Emilija Stefanovska and Vladimir Trajkovik. 2022. Evaluating Micro Frontend Approaches for Code Reusability. In ICT Innovations 2022. Reshaping the Future Towards a New Normal - 14th International Conference, ICT Innovations 2022, Skopje, Macedonia, September 29 - October 1, 2022, Proceedings (Communications in Computer and Information Science, Vol. 1740). Springer, 93–106. DOI: 10.1007/978-3-031-22792-9_8
Davide Taibi and Luca Mezzalira. 2022. Micro-Frontends: Principles, Implementations, and Pitfalls. ACM SIGSOFT Softw. Eng. Notes 47, 4 (2022), 25–29. DOI: 10.1145/3561846.3561853
Davide Taibi and Luca Mezzalira. 2022. Micro-Frontends: Principles, Implementations, and Pitfalls. ACM SIGSOFT Softw. Eng. Notes 47, 4 (2022), 25–29. DOI: 10.1145/3561846.3561853
P Yedhu Tilak, Vaibhav Yadav, Shah Dhruv Dharmendra, and Narasimha Bolloju. 2020. A platform for enhancing application developer productivity using microservices and micro-frontends. In 2020 IEEE-HYDCON. IEEE, Hyderabad, India, 1–4. DOI: 10.1109/HYDCON48903.2020.9242913
P Yedhu Tilak, Vaibhav Yadav, Shah Dhruv Dharmendra, and Narasimha Bolloju. 2020. A platform for enhancing application developer productivity using microservices and micro-frontends. In 2020 IEEE-HYDCON. IEEE, 10.1109/HYDCON48903.2020.9242913, 1–4.
Daojiang Wang, Dongming Yang, Huan Zhou, Ye Wang, Daocheng Hong, Qiwen Dong, and Shubing Song. 2020. A Novel Application of Educational Management Information System based on Micro Frontends. In Knowledge-Based and Intelligent Information & Engineering Systems: Proceedings of the 24th International Conference KES-2020, Virtual Event, 16-18 September 2020 (Procedia Computer Science, Vol. 176). Elsevier, 1567–1576. DOI: 10.1016/J.PROCS.2020.09.168
Sylvester Timona Wanjala. 2022. A framework for implementing micro frontend architecture. Int. J. Web Eng. Technol. 17, 4 (2022), 337–352. DOI: 10.1504/IJWET.2022.10054340
Caifang Yang, Chuanchang Liu, and Zhiyuan Su. 2019. Research and Application of Micro Frontends. IOP Conference Series: Materials Science and Engineering 490, 6 (apr 2019), 062082. DOI: 10.1088/1757-899X/490/6/062082
C. Zhang, D. Zhang, H. Zhou, X. Wang, L. Lv, R. Zhang, Y. Xie, H. Liu, Y. Li, D. Jia, Y. Huang, and T. Jiang. 2023. Application Business Information Interaction Bus Based on Micro Frontend Framework. In 2023 7th International Symposium on Computer Science and Intelligent Control (ISCSIC). IEEE Computer Society, Los Alamitos, CA, USA, 306–310. DOI: 10.1109/ISCSIC60498.2023.00070
Fabian Bühler, Johanna Barzen, Lukas Harzenetter, Frank Leymann, and Philipp Wundrack. 2022. Combining the Best of Two Worlds: Microservices and Micro Frontends as Basis for a New Plugin Architecture. In Service-Oriented Computing - 16th Symposium and Summer School, SummerSOC 2022, Hersonissos, Crete, Greece, July 3-9, 2022, Revised Selected Papers (Communications in Computer and Information Science, Vol. 1603). Springer, 3–23. DOI: 10.1007/978-3-031-18304-1_1
Eric Evans. 2004. Domain-Driven Design: Tackling Complexity in the Heart of Software. Addison-Wesley, [link].
Elvisa Gashi, Dhuratë Hyseni, Isak Shabani, and Betim Çiço. 2024. The advantages of Micro-Frontend architecture for developing web application. In 13th Mediterranean Conference on Embedded Computing, MECO 2024, Budva, Montenegro, June 11-14, 2024. IEEE, 1–5. DOI: 10.1109/MECO62516.2024.10577836
M. Geers. 2020. Micro Frontends in Action. Manning Publications, [link].
James Lewis and Martin Fowler. 2014. Microservices. [link]. Acesso em 06 de janeiro de 2024.
Julius Lorenz, Candy Lohse, and Leon Urbas. 2021. MicroFrontends as Opportunity for Process Orchestration Layer Architecture in Modular Process Plants. In 26th IEEE International Conference on Emerging Technologies and Factory Automation, ETFA 2021, Vasteras, Sweden, September 7-10, 2021. IEEE, 1–4. DOI: 10.1109/ETFA45728.2021.9613474
Tomi Männistö, Antti-Pekka Tuovinen, and Mikko Raatikainen. 2023. Experiences on a Frameworkless Micro-Frontend Architecture in a Small Organization. In 20th International Conference on Software Architecture, ICSA 2023 - Companion, L’Aquila, Italy, March 13-17, 2023. IEEE, 61–67. DOI: 10.1109/ICSA-C57050.2023.00025
Manel Mena, Antonio Corral, Luis Iribarne, and Javier Criado. 2019. A Progressive Web Application Based on Microservices Combining Geospatial Data and the Internet of Things. IEEE Access 7 (2019), 104577–104590. DOI: 10.1109/ACCESS.2019.2932196
L. Mezzalira. 2021. Building Micro-Frontends. O’Reilly Media, [link].
Sabah Mohammed, Jinan Fiaidhi, Darien Sawyer, and Mehdi Lamouchie. 2022. Developing a GraphQL SOAP Conversational Micro Frontends for the Problem Oriented Medical Record (QL4POMR). In Proceedings of the 6th International Conference on Medical and Health Informatics, ICMHI 2022, Virtual Event, Japan, May 13-15, 2022. ACM, 52–60. DOI: 10.1145/3545729.3545738
Yuma Nishizu and Tetsuo Kamina. 2022. Implementing Micro Frontends Using Signal-based Web Components. J. Inf. Process. 30 (2022), 505–512. DOI: 10.2197/IPSJJIP.30.505
Nattaporn Noppadol and Yachai Limpiyakorn. 2021. Application of Microfrontends to Legal Search Engine Web Development. In IT Convergence and Security. Springer Singapore, Singapore, 165–173.
Andrey Pavlenko, Nursultan Askarbekuly, Swati Megha, and Manuel Mazzara. 2020. Micro-frontends: application of microservices to web front-ends. J. Internet Serv. Inf. Secur. 10, 2 (2020), 49–66. DOI: 10.22667/JISIS.2020.05.31.049
Severi Peltonen, Luca Mezzalira, and Davide Taibi. 2021. Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature Review. Inf. Softw. Technol. 136 (2021), 106571. DOI: 10.1016/J.INFSOF.2021.106571
Rodrigo Perlin, Denilson Ebling, Vinícius Maran, Glenio Descovi, and Alencar Machado. 2023. An Approach to Follow Microservices Principles in Frontend. In 2023 IEEE 17th International Conference on Application of Information and Communication Technologies (AICT), Vol. 17. IEEE, 10.1109/AICT59525.2023.10313208, 1–6. DOI: 10.1109/AICT59525.2023.10313208
A. Petcu, M. Frunzete, and D.A. Stoichescu. 2023. BENEFITS, CHALLENGES, AND PERFORMANCE ANALYSIS OF A SCALABLE WEB ARCHITECTURE BASED ON MICRO-FRONTENDS. UPB Scientific Bulletin, Series C: Electrical Engineering and Computer Science 85, 3 (2023), 319–334. [link] cited By 0.
K. Petersen, S. Vakkalanka, and L. Kuzniarz. 2015. Guidelines for conducting systematic mapping studies in software engineering: An update. Information and Software Technology 64 (2015), 1–18. DOI: 10.1016/j.infsof.2015.03.007
István Pölöskei and Udo Bub. 2021. Enterprise-level migration to micro frontends in a multi-vendor environment. Acta Polytechnica Hungarica 18, 8 (2021), 7 – 25. DOI: 10.12700/APH.18.8.2021.8.1 Cited by: 4; All Open Access, Bronze Open Access.
F. Rappl and L. Schöttner. 2021. The Art of Micro Frontends: Build websites using compositional UIs that grow naturally as your application scales. Packt Publishing, [link].
Muddasir Shakil and Alois Zoitl. 2020. Towards a Modular Architecture for Industrial HMIs. In 25th IEEE International Conference on Emerging Technologies and Factory Automation, ETFA 2020, Vienna, Austria, September 8-11, 2020. IEEE, 1267–1270. DOI: 10.1109/ETFA46521.2020.9212011
Bruno Simões, María del Puy Carretero, Jorge Martínez Santiago, Sebastián Muñnz Segovia, and Nieves Alcaín. 2023. TwinArk: A Unified Framework for Digital Twins based on Micro-frontends, Micro-Services, and Web 3D. In The 28th International ACM Conference on 3D Web Technology, Web3D 2023, San Sebastian, Spain, October 9-11, 2023. ACM, San Sebastian, Spain, 9:1–9:10. DOI: 10.1145/3611314.3615915
Bruno Simões, María del Puy Carretero, Jorge Martínez Santiago, Sebastián Muñnz Segovia, and Nieves Alcaín. 2023. TwinArk: A Unified Framework for Digital Twins based on Micro-frontends, Micro-Services, and Web 3D. In The 28th International ACM Conference on 3D Web Technology, Web3D 2023, San Sebastian, Spain, October 9-11, 2023. ACM, 9:1–9:10. DOI: 10.1145/3611314.3615915
Jonas Sorgalla, Philip Wizenty, Florian Rademacher, Sabine Sachweh, and Albert Zündorf. 2021. Applying Model-Driven Engineering to Stimulate the Adoption of DevOps Processes in Small and Medium-Sized Development Organizations. SN Comput. Sci. 2, 6 (2021), 459. DOI: 10.1007/S42979-021-00825-Z
Single SPA. 2022. Single SPA - Getting Started Overview. [link] Acesso em: 10 Janeiro de 2024.
Emilija Stefanovska and Vladimir Trajkovik. 2022. Evaluating Micro Frontend Approaches for Code Reusability. In ICT Innovations 2022. Reshaping the Future Towards a New Normal - 14th International Conference, ICT Innovations 2022, Skopje, Macedonia, September 29 - October 1, 2022, Proceedings (Communications in Computer and Information Science, Vol. 1740). Springer, 93–106. DOI: 10.1007/978-3-031-22792-9_8
Davide Taibi and Luca Mezzalira. 2022. Micro-Frontends: Principles, Implementations, and Pitfalls. ACM SIGSOFT Softw. Eng. Notes 47, 4 (2022), 25–29. DOI: 10.1145/3561846.3561853
Davide Taibi and Luca Mezzalira. 2022. Micro-Frontends: Principles, Implementations, and Pitfalls. ACM SIGSOFT Softw. Eng. Notes 47, 4 (2022), 25–29. DOI: 10.1145/3561846.3561853
P Yedhu Tilak, Vaibhav Yadav, Shah Dhruv Dharmendra, and Narasimha Bolloju. 2020. A platform for enhancing application developer productivity using microservices and micro-frontends. In 2020 IEEE-HYDCON. IEEE, Hyderabad, India, 1–4. DOI: 10.1109/HYDCON48903.2020.9242913
P Yedhu Tilak, Vaibhav Yadav, Shah Dhruv Dharmendra, and Narasimha Bolloju. 2020. A platform for enhancing application developer productivity using microservices and micro-frontends. In 2020 IEEE-HYDCON. IEEE, 10.1109/HYDCON48903.2020.9242913, 1–4.
Daojiang Wang, Dongming Yang, Huan Zhou, Ye Wang, Daocheng Hong, Qiwen Dong, and Shubing Song. 2020. A Novel Application of Educational Management Information System based on Micro Frontends. In Knowledge-Based and Intelligent Information & Engineering Systems: Proceedings of the 24th International Conference KES-2020, Virtual Event, 16-18 September 2020 (Procedia Computer Science, Vol. 176). Elsevier, 1567–1576. DOI: 10.1016/J.PROCS.2020.09.168
Sylvester Timona Wanjala. 2022. A framework for implementing micro frontend architecture. Int. J. Web Eng. Technol. 17, 4 (2022), 337–352. DOI: 10.1504/IJWET.2022.10054340
Caifang Yang, Chuanchang Liu, and Zhiyuan Su. 2019. Research and Application of Micro Frontends. IOP Conference Series: Materials Science and Engineering 490, 6 (apr 2019), 062082. DOI: 10.1088/1757-899X/490/6/062082
C. Zhang, D. Zhang, H. Zhou, X. Wang, L. Lv, R. Zhang, Y. Xie, H. Liu, Y. Li, D. Jia, Y. Huang, and T. Jiang. 2023. Application Business Information Interaction Bus Based on Micro Frontend Framework. In 2023 7th International Symposium on Computer Science and Intelligent Control (ISCSIC). IEEE Computer Society, Los Alamitos, CA, USA, 306–310. DOI: 10.1109/ISCSIC60498.2023.00070
Publicado
19/05/2025
Como Citar
AMORIM, Giovanni; ROCHA, Larissa; MENDES, Fabiana Freitas; SANTOS, Rodrigo Pereira dos; CANEDO, Edna Dias.
Guidelines for Adoption Micro-frontend Architecture. In: SIMPÓSIO BRASILEIRO DE SISTEMAS DE INFORMAÇÃO (SBSI), 21. , 2025, Recife/PE.
Anais [...].
Porto Alegre: Sociedade Brasileira de Computação,
2025
.
p. 713-722.
DOI: https://doi.org/10.5753/sbsi.2025.246619.
