> Markdown version of [/videos/873-interface-contracts-in-microfrontend-architectures?t=2734](https://www.wearedevelopers.com/videos/873-interface-contracts-in-microfrontend-architectures?t=2734). 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).

---

# Interface Contracts in Microfrontend Architectures

Stop rewriting legacy monoliths. How do you prevent breaking changes across autonomous frontend teams? Discover how OpenMFE interface contracts enable risk-free, incremental microfrontend migrations.

- **Speakers:** [Alexander Günsche](https://www.wearedevelopers.com/@alexander-gunsche)
- **Event:** WeAreDevelopers LIVE
- **Published:** March 22, 2024
- **Duration:** 54:39
- **URL:** https://www.wearedevelopers.com/videos/873-interface-contracts-in-microfrontend-architectures

## Summary

Modernizing a legacy frontend monolith often prompts the risky impulse to rip and replace, but organizations can preserve existing business value through incremental adoption of microfrontend architectures. Applying the Strangler Fig pattern allows teams to wrap existing capabilities in modern interfaces or deploy new, self-contained microfrontends alongside legacy code, enabling a low-risk, gradual migration path that satisfies both engineering and business stakeholders.

Determining the right scale for these components heavily relies on finding bounded contexts via Domain-Driven Design, utilizing communication frequency as a gauge for coupling. A framework-less approach leverages native Web Components and Custom Elements, ensuring cross-browser compatibility and longevity. In this model, incoming data passes through observed HTML attributes—handling complex data via serialized JSON—while outgoing actions dispatch bubbling custom events. Crucially, the host page acts as an event mediator, ensuring microfrontends never communicate directly and remain fully autonomous.

Scaling this architecture across autonomous teams requires strict governance to prevent boundary violations, such as unauthorized global CSS injection. Implementing interface contracts through specifications like the OpenMFE standard establishes strict rules of engagement. Similar to OpenAPI in the backend, these structured manifests define the tag names, properties, data shapes, and events a microfrontend guarantees, creating a reliable developer catalog and preventing uncoordinated breaking changes.

Successfully managing a distributed frontend ecosystem demands shifts in testing and shared dependencies. Organizations should move away from the traditional testing pyramid toward a testing diamond, heavily prioritizing integration flows over deep unit testing, since the overall user experience depends entirely on inter-component event pipelines. Furthermore, to cement true decoupling, teams must avoid nesting microfrontends at runtime and heavily invest in dedicated, versioned UI libraries rather than sharing core runtime assets across the application.

**Keywords:** microfrontend architecture, legacy frontend modernization, domain-driven design contexts, framework-less web components, custom elements integration, frontend strangler fig pattern, openmfe interface contracts, observed html attributes, custom event bubbling, frontend boundary governance, openapi style manifests, microfrontend integration testing, shadow dom encapsulation, standalone ui libraries, runtime frontend dependencies

## Chapters

1. **Incremental frontend modernization avoiding full rewrites** (00:03) — How incremental modernization avoids the massive technical and business risks of throwing away monolithic legacy web applications.
1. **Evolution of frontend and microservices architectures** (01:46) — The transition from horizontal backend microservices integrated via API gateways to fully verticalized microfrontend designs.
1. **Determining microfrontend boundaries using domain-driven design** (07:11) — How to identify coherent context boundaries and appropriate UI building block sizes using non-functional aspects and communication patterns.
1. **Implementing microfrontends entirely with custom elements** (11:14) — Structuring and loading native frameworkless microfrontends using HTML custom elements, script loaders, and shadow DOM lifecycle methods.
1. **Managing interactions using HTML attributes and custom events** (13:54) — Designing inbound and outbound communication for decoupled UI components via reactive attributes and synthetic event dispatching.
1. **Standardizing API contracts with the open MFE standard** (19:21) — Enforcing Open MFE interface contracts to govern runtime behaviors and block undocumented side channel hacks like CSS injection.
1. **Defining complex metadata schemas for microfrontend APIs** (22:27) — Formally documenting microfrontend configuration state structures, events, and component identities using OpenAPI and JSON schema.
1. **Applying the strangler fig pattern to legacy frontends** (27:10) — Encapsulating legacy web interfaces behind new boundaries to incrementally upgrade existing implementation code and share component libraries safely.
1. **Testing integration in frameworkless web architectures** (32:43) — Why functional integration testing of microfrontend events provides far more resilience value than testing isolated interface components internally.
1. **Lambda compatibility, interface security, and career advice** (37:22) — Insights on WebAssembly integration constraints in AWS Lambda, mitigating interface risks through Git repository governance, and exploring cross-functional engineering roles.
1. **Resolving shared dependencies and namespace collisions** (45:34) — Architectural strategies to avoid deep component nesting, mitigate custom tag name collisions, and manage centralized npm libraries cleanly.

## Related Moments

- [Applying microfrontend patterns and data duplication bounds](https://www.wearedevelopers.com/videos/494-the-rise-of-reactive-microservices) (from "The Rise of Reactive Microservices")
- [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 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")
- [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Evolving architectures from backend microservices to micro frontends](https://www.wearedevelopers.com/videos/130-front-end-micro-apps) (from "Front-End Micro Apps")

## Related Articles

- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [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**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**