Back to Blog

Why Microfrontends? iframe vs Federation vs Other Options (Part 3)

Why Microfrontends? iframe vs Federation vs Other Options (Part 3)

Why Microfrontends? iframe vs Federation vs Other Options (Part 3)

This is Part 3 of the same journey:

In this post, I answer the practical strategy questions that usually come right after implementation.


1. What is a microfrontend?

A microfrontend is an architectural style where the frontend is split into smaller, independently owned parts, usually aligned with business domains.

Examples:

  • Checkout team owns checkout UI.
  • Catalog team owns product listing UI.
  • Profile team owns account UI.

The key idea is independent ownership and deployment boundaries, not just splitting code into many components.

A simple rule:

  • Multiple components in one tightly coupled app is not automatically microfrontend.
  • Independently developed, versioned, and deployable UI parts is microfrontend thinking.

2. Why should you use microfrontends?

Microfrontends are useful when your product and organization grow beyond what one frontend repo/team can comfortably handle.

Common benefits:

  1. Team autonomy: domain teams move faster without blocking each other.
  2. Safer releases: smaller scope deployments reduce blast radius.
  3. Incremental modernization: old and new frontend stacks can coexist during migration.
  4. Clear ownership: easier to map code to business capability.
  5. Scalable development workflow: parallel work across many teams.

When not to use them:

  • Small product
  • One small team
  • Simple UI and release process

In that case, microfrontends can add unnecessary complexity.


3. Why is iframe a beginner-friendly choice?

iframe is often the easiest on-ramp because it minimizes runtime coupling.

Why it is beginner-friendly:

  1. Strong isolation by default (CSS, JS runtime, dependency conflicts).
  2. Very low setup complexity.
  3. Easy debugging: each child app is still directly reachable by URL.
  4. Easy rollback and experimentation.

Trade-offs:

  • Harder shared routing/state.
  • Cross-window communication needs extra design (postMessage, event contracts).
  • Visual/UX integration can feel less seamless.

So iframe is excellent for:

  • Proof of concept
  • Team onboarding
  • Early architecture validation

4. Why choose full federation?

Choose federation when you need tighter integration and true runtime composition.

Why federation is powerful:

  1. Direct module/component loading at runtime.
  2. Better UX continuity than iframe embedding.
  3. Shared dependency control and optimized duplication.
  4. Better fit for integrated shell experiences.

Trade-offs:

  • More configuration and version management.
  • Runtime contract discipline is required (exposes, manifests, shared libs).
  • Troubleshooting can be more complex than iframe.

A practical sequence that works well:

  1. Start with iframe to validate domain boundaries.
  2. Move to federation when integration maturity and team discipline are ready.

5. Is there any way other than federation?

Yes. Federation is not the only option.

Other patterns:

  • Build-time integration: publish UI packages to a registry and consume them in host at build time. Runtime is simpler, but independent deployability is reduced.
  • iframe composition: independent deployment and strong isolation. UX continuity can be weaker unless carefully designed.
  • Web Components: expose custom elements from domain apps/libraries with a framework-agnostic integration style.
  • Backend-driven composition (edge/server): compose HTML fragments or route-level content server-side, which is strong for SEO and centralized rendering pipelines.
  • Client-side orchestrator with APIs: shell coordinates routing/layout while domain UIs are loaded using custom loaders or CDN modules.

The right choice depends on:

  • Team size
  • Deployment model
  • UX integration depth
  • Performance and operational constraints

6. If different projects are in different repos, is it still microfrontend?

Yes. Different repositories can still be microfrontend architecture.

In many organizations, multi-repo is actually common for microfrontends.

What really matters is:

  1. Independent ownership
  2. Clear integration contracts
  3. Independent deployment lifecycle
  4. Coordinated versioning/compatibility strategy

Repo layout does not define the architecture by itself:

  • Monorepo can be microfrontend.
  • Multi-repo can be microfrontend.

Architecture is about boundaries, ownership, and deployment behavior.


7. How to choose your path quickly

Use this quick decision guide:

  • Start with iframe if:

    • you are learning,
    • proving concept,
    • or optimizing for low risk.
  • Use federation if:

    • you need integrated UX,
    • runtime remote loading,
    • and independent deployable UI modules with tighter composition.
  • Use build-time packages if:

    • independent runtime deployment is not required,
    • but team-level modularity is still needed.

8. Final takeaway

Microfrontend is not a single tool. It is a set of architectural decisions.

  • iframe is often the best beginner entry point.
  • Federation is a strong next step for mature integration.
  • Alternatives are valid and sometimes better depending on constraints.
  • Monorepo vs multi-repo is a delivery choice, not the definition of microfrontend.

If your boundaries, ownership model, and deployment strategy are clear, you are already on the right track.


Reference Projects

If you want to explore working code and compare approaches, these two repositories map directly to the patterns discussed in this series:


Series Navigation