Teaching Micro Frontends: Insights from Two Controlled Experiments on Guidelines and Anti-patterns
DOI:
https://doi.org/10.5753/jserd.2026.7762Keywords:
Micro frontends, Experience Report, Controlled Experiment, Empirical Software Engineering, Anti-patternsAbstract
Context: Micro Frontend (MFE) is an architectural style that extends microservices principles to the frontend. Despite its growing adoption, misunderstandings about MFE foundations can create significant challenges during development. Preparing in-training software engineers to address these challenges and incorporating MFE into software architecture curricula is essential. Goal: We aim to address the gap in MFE education by presenting an experience report on teaching MFE in an undergraduate course. We compare two supporting materials to aid students in architectural decision-making: practitioner-provided guidelines and a catalog of MFE anti-patterns. Through two controlled experiments, we evaluate their effectiveness, with particular emphasis on understanding the role and benefits of using anti-patterns as a learning tool. Method: We taught MFE across five sessions and conducted a controlled experiment with two assessments, each one using one of the supporting materials. We compared them by analyzing differences in assessment scores and evaluated whether the catalog improved students' perceived learning. Additionally, we investigated how students used the catalog by applying the Technology Acceptance Model and collecting qualitative feedback regarding its use. Finally, we extend our previous work by introducing a new version of the catalog and comparing it with the original through a second controlled experiment. Results: Both supporting materials are equally helpful for solving MFE architectural problems. Students reported an increased perception of learning after engaging with the catalog. Their feedback indicated that the catalog was used to identify problems and solutions, promote efficient search for issues, and reinforce MFE knowledge. The results of the second experiment show no statistically significant differences between the versions. However, qualitative feedback indicates that preferences depend on individual reading styles and information needs. It also revealed additional ways students use the catalog to learn about MFE, such as using anti-patterns as a third learning phase. Conclusion: This paper provides insights into teaching MFE, introduces two supporting instructional materials, and highlights the value of anti-pattern catalogs for both education and practice. Our findings show that the catalog can support learning while also helping developers analyze architectural problems and make more informed decisions.
Downloads
References
Anderson, A., Guevara, J. N., Moussaoui, F., Li, T., Vorvoreanu, M., and Burnett, M. (2024). Measuring user experience inclusivity in human-ai interaction via five user problem-solving styles. ACM Transactions on Interactive Intelligent Systems, 14(3):1–90.
Anks, D. (2023). Mastering micro frontends: Best practices, pitfalls to avoid, tools and scaling strategies. Available at: [link]. Online; accessed November 14, 2024.
Antunes, F., Lima, M. J. D., Araújo, M. A. P., Taibi, D., and Kalinowski, M. (2024). Investigating benefits and limitations of migrating to a micro-frontends architecture. arXiv preprint arXiv:2407.15829.
Aplyca (2024). Best practices for micro frontends. Available at: [link]. Online; accessed November 14, 2024.
Bærbak Christensen, H. (2022). Teaching microservice architecture using devops—an experience report. In European Conference on Software Architecture, pages 117–130. Springer.
Brada, P. and Picha, P. (2019). Software process anti-patterns catalogue. In Proceedings of the 24th European Conference on Pattern Languages of Programs, pages 1–10.
Brown, S. (2023). The C4 Model for Visualising Software Architecture. Leanpub.
Brown, W. H., Malveau, R. C., McCormick, H. W. S., and Mowbray, T. J. (1998). AntiPatterns: refactoring software, architectures, and projects in crisis. John Wiley & Sons, Inc.
Capdepon, Q., Hlad, N., Seriai, A.-D., and Derras, M. (2023). Migration process from monolithic to micro frontend architecture in mobile applications. In Proceeding of the International Workshop on Smalltalk Technologies.
Casas, R. (2020). Rules of micro-frontends. Available at: [link]. Online; accessed March 17, 2025.
Corbin, J. and Strauss, A. (2014). Basics of qualitative research: Techniques and procedures for developing grounded theory. Sage publications.
Cordeiro, R., Rosa, T., Goldman, A., and Guerra, E. (2019). Teaching complex systems based on microservices. GROUP, 1:1.
Cunningham, W. (2013). Anti patterns catalog. Available at: [link]. Online; accessed April 25, 2025.
do Nascimento Oliveira, B. R., Rodríguez, L. M. G., Santos, D. S., Galster, M., and Nakagawa, E. Y. (2025). Real-world cases in software architecture education: An experience report. IEEE Transactions on Education, 69(1):1–9.
Galster, M. and Angelov, S. (2016). What makes teaching software architecture difficult? In Proceedings of the 38th International Conference on Software Engineering Companion, pages 356–359.
Geers, M. (2020). Micro Frontends in Action. Simon and Schuster.
Gkamperlo, N. (2020). Micro-frontend “blackbox pattern”. Available at: [link]. Online; accessed March 17, 2025.
Kaushik, N., Kumar, H., and Raj, V. (2024). Micro frontend based performance improvement and prediction for microservices using machine learning. Journal of Grid Computing, 22(2):1–26.
Kazman, R., Cai, Y., Godfrey, M. W., Pautasso, C., and Liu, A. (2023). A better way to teach software architecture. In Software Architecture: Research Roadmaps from the Community, pages 101–110. Springer.
Kofler, J. (2020). Como os microfrontends podem ajudar a focar nas necessidades de negócios. Available at: [link]. Online; accessed November 14, 2024.
Lago, P. and Van Vliet, H. (2005). Teaching a course on software architecture. In 18th Conference on Software Engineering Education & Training (CSEET’05), pages 35–42. IEEE.
Laitenberger, O. and Dreyer, H. M. (1998). Evaluating the usefulness and the ease of use of a web-based inspection data collection tool. In Proceedings Fifth International Software Metrics Symposium. Metrics (Cat. No. 98TB100262), pages 122–132. IEEE.
Lange, M., Koschel, A., and Hausotter, A. (2019). Microservices in higher education. In International Conference on Microservices.
Likert, R. (1932). A technique for the measurement of attitudes. Archives of psychology.
Männistö, J., Tuovinen, A.-P., and Raatikainen, M. (2023). Experiences on a frameworkless micro-frontend architecture in a small organization. In 2023 IEEE 20th International Conference on Software Architecture Companion (ICSA-C), pages 61–67. IEEE.
Mannisto, T., Savolainen, J., and Myllarniemi, V. (2008). Teaching software architecture design. In Seventh Working IEEE/IFIP Conference on Software Architecture (WICSA 2008), pages 117–124. IEEE.
Matteo Figus, Alexander Guensche, H. H. and Mezzalira, L. (2024). Understanding and implementing microfrontends on aws - aws prescriptive guidance. Available at: [link]. Online; accessed March 17, 2025.
Meireles, M. A. C., Rocha, S., Maldonado, J. C., and Conte, T. (2024). An experience report on the use of active learning in empirical software engineering education: Understanding the pros and cons from the student’s perspective. In Proceedings of the 46th International Conference on Software Engineering: Software Engineering Education and Training, pages 380–390.
Mezzalira, L. (2020). Micro frontends anti-patterns. Available at: [link]. Online; accessed March 17, 2025.
Mezzalira, L. (2021a). Building Micro-Frontends. O’Reilly Media, Inc.
Mezzalira, L. (2021b). Chapter 4. discovering micro-frontend architectures. Available at: [link]. Online; accessed March 17, 2025.
Mezzalira, L. (2021c). Techlead journal: #47 - micro-frontends and the socio-technical aspect. Available at: [link]. Online; accessed March 17, 2025.
Mezzalira, L. (2024). Micro-frontends anti-patterns by luca mezzalira. Available at: [link]. Online; accessed March 17, 2025.
Moraes, F., Campos, G., Almeida, N., and Affonso, F. (2024). Micro frontend-based development: Concepts, motivations, implementation principles, and an experience report. In Proceedings of the 26th International Conference on Enterprise Information Systems, volume 2, pages 175–184.
Newman, S. (2021). Building microservices. O’Reilly Media, Inc.
Oliveira, B. R., Garcés, L., Lyra, K. T., Santos, D. S., Isotani, S., and Nakagawa, E. Y. (2022). An overview of software architecture education. In Congresso Ibero-Americano em Engenharia de Software (CIbSE), pages 76–90. SBC.
Peltonen, S., Mezzalira, L., and Taibi, D. (2021). Motivations, benefits, and issues for adopting micro-frontends: a multivocal literature review. Information and Software Technology, 136:106571.
Perlin, R., Ebling, D., Maran, V., Descovi, G., and Machado, A. (2023). An approach to follow microservices principles in frontend. In 2023 IEEE 17th International Conference on Application of Information and Communication Technologies (AICT), pages 1–6. IEEE.
Pölöskei, I. and Bub, U. (2021). Enterprise-level migration to micro frontends in a multi-vendor environment. Acta Polytechnica Hungarica, 18(8):7–25.
Raimundo, J. L. P. (2023). Compositional qualities of microfrontends: The ldod archive. Available at: [link]. Online; accessed March 17, 2025.
Rappl, F. (2024). Top 10 micro frontend anti-patterns. Available at: [link]. Online; accessed March 17, 2025.
Razavian, M., Paech, B., and Tang, A. (2019). Empirical research for software architecture decision making: An analysis. Journal of Systems and Software, 149:360–381.
Richardson, C. (2018). Microservices patterns: with examples in Java. Simon and Schuster.
Shinde, S. (2022). 4 micro-frontend anti-patterns. Available at: [link]. Online; accessed March 17, 2025.
Shukla, V. (2023). A comprehensive guide to micro frontend architecture. Available at: [link]. Online; accessed November 04, 2024.
Silva, M. R. d. (2024). Arquitetura reativa cognitiva baseada em microsserviços e micro-frontends para melhorar a experiência do usuário em aplicações bancárias por meio de interfaces adaptativas.
Silva, N., Rodrigues, E., and Conte, T. (2025a). A catalog of micro frontends anti–patterns. In IEEE/ACM International Conference on Software Engineering (ICSE).
Silva, N., Rodrigues, E., and Conte, T. (2025b). Evaluating strategies for teaching micro frontends: Do anti-patterns help? In Simpósio Brasileiro de Engenharia de Software (SBES), pages 522–532. SBC.
Single-spa (2016). single-spa: A javascript router for front-end microservices.
Taibi, D. and Mezzalira, L. (2022). Micro-frontends: Principles, implementations, and pitfalls. ACM SIGSOFT Software Engineering Notes, 47(4):25–29.
ThoughtWorks (2016). Micro frontends. ThoughtWorks Technology Radar.
Valente, M. T. (2020). Engenharia de software moderna. Princípios e Práticas para Desenvolvimento de Software com Produtividade, 1(24).
Vegas, S., Apa, C., and Juristo, N. (2015). Crossover designs in software engineering experiments: Benefits and perils. IEEE Transactions on Software Engineering, 42(2):120–135.
Venkatesh, V. and Bala, H. (2008). Technology acceptance model 3 and a research agenda on interventions. Decision sciences, 39(2):273–315.
Wessels, B. (2020). Micro front-end architecture at enterprise scale. Available at: [link]. Online; accessed March 17, 2025.
Wohlin, C., Runeson, P., Höst, M., Ohlsson, M. C., Regnell, B., and Wesslén, A. (2012). Experimentation in software engineering. Springer Science & Business Media.
Downloads
Published
How to Cite
Issue
Section
License
Copyright (c) 2026 Nabson Silva, Eriky Rodrigues, Tayana Conte
This work is licensed under a Creative Commons Attribution 4.0 International License.
