Micro-Frontends (MFE)

When a codebase grows too large for 100+ developers, it becomes a Monolithic Nightmare. Micro-Frontends allow you to break the UI into independent, deployable pieces. One team owns 'Search,' another owns 'Checkout,' and they can use totally different frameworks if they want.

1. Module Federation

The modern way to do MFE. Webpack/Vite Module Federation allows one app to dynamically import code from another app over the network at runtime. It's like a dynamic import, but the code is hosted on a different server.

2. Inter-App Communication

How do MFEs talk to each other?

• Custom Events: Browser-native window.dispatchEvent.
• Shared State: A shared library (like a small Zustand store) that both apps import.
• URL Parameters: The most robust way. Sync state via the query string.

4. Interview Mastery

Q: "When should you NOT use Micro-Frontends?"

Architect Answer: "Most of the time. MFE adds massive complexity to local development, CI/CD, and versioning. You should only use it if you have **Organizational Scaling issues**. If your teams are stepping on each other's toes and deployments are blocked by other departments, MFE is the solution. For a small or medium team, a well-structured Monolith (or Monorepo) is 10x more productive."