A Catalog of Micro Frontends Anti-patterns

TL;DR

This paper presents a catalog of 12 micro frontend anti-patterns derived from microservice issues, validated through industry surveys, and offers a web tool to help developers avoid common pitfalls in MFE architectures.

Contribution

It introduces a novel catalog of MFE anti-patterns based on MS parallels, validated by industry feedback, and provides a web application to promote best practices.

Findings

All anti-patterns were encountered in real MFE projects.

Most anti-patterns are recognized by over 50% of practitioners.

The catalog is considered a valuable guide for improving MFE quality.

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.