> Markdown version of [/videos/299-micro-frontends-anti-patterns](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Micro-frontends anti-patterns

Are your micro-frontends actually a distributed monolith? Uncover the architectural anti-patterns that bloat technical debt, and learn how to enforce team autonomy without triggering dependency hell.

- **Speakers:** [Luca Mezzalira](https://www.wearedevelopers.com/@luca-mezzalira)
- **Event:** JavaScript Congress
- **Published:** November 23, 2021
- **Duration:** 47:05
- **URL:** https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns

## Summary

As micro-frontends shift from the innovators phase into mainstream discovery, organizations frequently grapple with hidden complexities by applying single-page application mentalities to distributed frontends. This discussion unpacks the evolution of micro-frontends—spanning from Zalando’s early 2015 implementations to modern configurations—to dissect the structural missteps that inadvertently bloat technical debt. At the core of a successful transition is the understanding that software architecture boundaries must match organizational communication structures; ignoring this invites the creation of tightly coupled "distributed monoliths."

The central thesis warns against confusing micro-frontends with generic web components. A true micro-frontend must be domain-aware, fully independent, and resistant to unneeded injection from its host container. Treating these as standard components leads to the "Hydra of Lerna" anti-pattern, where teams needlessly load multiple frameworks (like React, Angular, and Vue) into a single view—a practice only justifiable during temporary legacy migrations or acquisitions. Similarly, forcing bidirectional data exchanges or relying on a global state tightly binds independent teams organizationally, throttling deployment speeds. Embracing a unidirectional data flow and loosely coupled event emitters—borrowing from MVI and Flux methodologies—safeguards debugging and maintains strict team autonomy.

Several deeper architectural vulnerabilities arise when scaling, particularly "dependency hell" triggered by shared core libraries that derail versioning governance. To cleanly isolate legacy integrations, developers should deploy an anti-corruption layer, using iframes or localized SystemJS imports to preempt dependency clashes. Furthermore, teams must rigorously map their network dependencies; duplicated API calls from multiple micro-frontends rendering in the same view can easily trigger a self-inflicted DDoS attack on backend microservices. As the speaker notes, "there is no compression algorithm for experience," meaning these hard-won trade-offs are essential to ensure micro-frontends deliver on their promise of rapid, decentralized, and incremental deployment.

**Keywords:** micro-frontends architecture, distributed ui anti-patterns, domain-driven frontend design, legacy system migration, frontend anti-corruption layer, organizational coupling, unidirectional data flow, global state management challenges, distributed monolith, ui components vs micro-frontends, shared component governance, team cognitive load, self-inflicted api ddos, module federation configuration, systemjs scoping

## Chapters

1. **History and evolution of micro-frontends** (00:02) — The shift from early experiments at companies like Zalando to widespread industry adoption.
1. **Primary benefits of micro-frontend architectures** (04:00) — How independent deployments and decentralized decision-making accelerate delivery and empower engineering teams.
1. **Distinguishing between micro-frontends and ui components** (07:03) — Micro-frontends encapsulate entire business subdomains independently whereas components rely entirely on contextual property injection.
1. **Avoiding the multi-framework micro-frontend approach** (11:25) — Mixing UI frameworks inside a single page application should remain a temporary workaround for legacy migrations or acquisitions.
1. **Isolating legacy code with anti-corruption layers** (14:19) — Using sandboxing boundaries like iframes prevents dependency clashes when adopting modern micro-frontend orchestrators.
1. **Managing shared dependencies across isolated teams** (18:12) — Relying on extensive core libraries creates tight governance bottlenecks and cascades breaking changes across loosely coupled features.
1. **Implementing unidirectional data flows across boundaries** (23:02) — Bidirectional data sharing between application parts complicates debugging and encourages brittle integrations between modules.
1. **Preventing organizational coupling via global state** (26:26) — Sharing global state across disparate modules forces continuous cross-team synchronization during development and test automation pipelines.
1. **Optimizing backend calls to prevent self-ddos** (29:42) — Multiple independent frontends calling identical APIs forces redundant authorization checks and unnecessary backend scaling pressure.
1. **Answering questions on micro-frontend adoption and tooling** (33:55) — Strategies for monolithic code extraction, evaluating module federation versus SystemJS, and valid iframe use cases.

## Related Moments

- [Differentiating domain-aware micro-frontends from UI components](https://www.wearedevelopers.com/videos/420-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Introduction to micro frontends and architectural consequences](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Introduction to micro frontends and platform architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Transitioning monolithic page structures to distributed front-end architectures](https://www.wearedevelopers.com/videos/1012-micro-frontends-discovery) (from "Micro-Frontends Discovery")
- [Understanding the engineering benefits of micro-frontend architectures](https://www.wearedevelopers.com/videos/420-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")

## Related Articles

- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Why Event-Driven Architecture Isn’t About Speed (and When You Actually Need It)](https://www.wearedevelopers.com/magazine/745-why-event-driven-architecture-isn-t-about-speed-and-when-you-actually-need-it)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**