Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

A Catalog of Micro Frontends Anti-patterns

Nabson Silva, Eriky Rodrigues, Tayana Conte

TL;DR

This paper addresses the lack of structured guidance for MFEs by deriving a catalog of 12 anti-patterns from microservices patterns and real-world MFE problems, and validating them through a practitioner survey. The methodology combines a systematic literature review basis, qualitative and quantitative analyses, and a collaborative web app to disseminate and evolve the catalog. Key contributions include the anti-pattern catalog, empirical validation, and an open, community-driven repository for ongoing refinement. The work offers a practical, actionable resource to help developers design more robust, maintainable MFEs and highlights directions for automated detection and expansion through industry feedback.

Abstract

Micro frontend (MFE) architectures have gained significant popularity for promoting independence and modularity in development. Despite their widespread adoption, the field remains relatively unexplored, especially concerning identifying problems and documenting best practices. Drawing on both established microservice (MS) anti-patterns and the analysis of real problems faced by software development teams that adopt MFE, this paper presents a catalog of 12 MFE anti-patterns. We composed an initial version of the catalog by recognizing parallels between MS anti-patterns and recurring issues in MFE projects to map and adapt MS anti-patterns to the context of MFE. To validate the identified problems and proposed solutions, we conducted a survey with industry practitioners, collecting valuable feedback to refine the anti-patterns. Additionally, we asked participants if they had encountered these problems in practice and to rate their harmfulness on a 10-point Likert scale. The survey results revealed that participants had encountered all the proposed anti-patterns in real-world MFE architectures, with only one reported by less than 50\% of participants. They stated that the catalog can serve as a valuable guide for both new and experienced developers, with the potential to enhance MFE development quality. The collected feedback led to the development of an improved version of the anti-patterns catalog. Furthermore, we developed a web application designed to not only showcase the anti-patterns but also to actively foster collaboration and engagement within the MFE community. The proposed catalog is a valuable resource for identifying and mitigating potential pitfalls in MFE development. It empowers developers of all experience levels to create more robust, maintainable, and well-designed MFE applications.

A Catalog of Micro Frontends Anti-patterns

TL;DR

This paper addresses the lack of structured guidance for MFEs by deriving a catalog of 12 anti-patterns from microservices patterns and real-world MFE problems, and validating them through a practitioner survey. The methodology combines a systematic literature review basis, qualitative and quantitative analyses, and a collaborative web app to disseminate and evolve the catalog. Key contributions include the anti-pattern catalog, empirical validation, and an open, community-driven repository for ongoing refinement. The work offers a practical, actionable resource to help developers design more robust, maintainable MFEs and highlights directions for automated detection and expansion through industry feedback.

Abstract

Micro frontend (MFE) architectures have gained significant popularity for promoting independence and modularity in development. Despite their widespread adoption, the field remains relatively unexplored, especially concerning identifying problems and documenting best practices. Drawing on both established microservice (MS) anti-patterns and the analysis of real problems faced by software development teams that adopt MFE, this paper presents a catalog of 12 MFE anti-patterns. We composed an initial version of the catalog by recognizing parallels between MS anti-patterns and recurring issues in MFE projects to map and adapt MS anti-patterns to the context of MFE. To validate the identified problems and proposed solutions, we conducted a survey with industry practitioners, collecting valuable feedback to refine the anti-patterns. Additionally, we asked participants if they had encountered these problems in practice and to rate their harmfulness on a 10-point Likert scale. The survey results revealed that participants had encountered all the proposed anti-patterns in real-world MFE architectures, with only one reported by less than 50\% of participants. They stated that the catalog can serve as a valuable guide for both new and experienced developers, with the potential to enhance MFE development quality. The collected feedback led to the development of an improved version of the anti-patterns catalog. Furthermore, we developed a web application designed to not only showcase the anti-patterns but also to actively foster collaboration and engagement within the MFE community. The proposed catalog is a valuable resource for identifying and mitigating potential pitfalls in MFE development. It empowers developers of all experience levels to create more robust, maintainable, and well-designed MFE applications.

Paper Structure

This paper contains 27 sections, 3 figures, 1 table.

Table of Contents

  1. Introduction
  2. Background
  3. Anti-patterns
  4. Microservices
  5. Micro frontends
  6. Methodology
  7. Results
  8. Quantitative Analysis
  9. Thematic Analysis
  10. Micro frontends anti-patterns
  11. Cyclic Dependency
  12. Knot Micro Frontend
  13. Hub-like Dependency
  14. Nano Frontend
  15. Mega Frontend
  16. ...and 12 more sections

Figures (3)

  • Figure 1: BPMN diagram illustrating the process we followed to propose and refine the MFE anti-patterns.
  • Figure 2: Boxplot illustrating the harmfulness ratings for each anti-pattern.
  • Figure 3: Identified themes during the Thematic Analysis, with accompanying example quotations. The red themes relate to suggested improvements, the green themes represent new proposals, and the blue themes highlight insights and recommendations for using the catalog.