Desafios na arquitetura de microfrontends: um estudo de caso com module dederation e uma proposta de validação automatizada de dependências compartilhadas

Abstract

The microfrontend architecture proposes to bring to the user interface layer the same decomposition logic that microservices brought to the server: splitting a web application into small modules, maintained by separate teams and integrated at runtime. The idea is appealing because it lets each team evolve its part without depending on the schedule of the others. In practice, however, this autonomy hides a class of problems that recent literature has been characterizing, in particular module integration, shared dependency management, inter-module communication and visual consistency. This work investigates these problems empirically. The starting point was a real production incident: TaqShell, maintained by Taqtile, started showing a blank screen after user login, a single symptom caused by four concurrent technical problems, each one matching a challenge already cataloged in the literature on microfrontends. Investigating that incident motivated the construction of a controlled sample system (mfe-example), in which each phenomenon was reproduced in isolation through four experiments focused on CSS conflict, Shadow DOM isolation, shared-dependency incompatibility and MINOR version compatibility breaks. As a central contribution, a script for automated validation of shared dependencies between host and remote microfrontends is proposed, integrated into a GitHub Actions workflow with cross-repository checkout. The solution closes a gap left by Module Federation itself, which is by design a sharing tool, not a validation tool. Applied to TaqShell, the script revealed six version divergences that the existing pipeline had not flagged, and in an open pull request it detected, in real time, the exact failure mode characterized as Problem 3 in this work, blocking the merge until the fix was applied. The results show that theoretically predicted errors, such as major version mismatch, dependencies missing from the shared scope and duplication of libraries with global state, pass silently through the build and only manifest in the end user’s browser, often with error messages that do not point to the root cause.