WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Mar 22, 2024

Interface Contracts in Microfrontend Architectures

Alexander Günsche

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.

Pause
Mute Enter Fullscreen
#1 about 2 min

Incremental frontend modernization avoiding full rewrites

How incremental modernization avoids the massive technical and business risks of throwing away monolithic legacy web applications.

#2 about 6 min

Evolution of frontend and microservices architectures

The transition from horizontal backend microservices integrated via API gateways to fully verticalized microfrontend designs.

#3 about 5 min

Determining microfrontend boundaries using domain-driven design

How to identify coherent context boundaries and appropriate UI building block sizes using non-functional aspects and communication patterns.

#4 about 3 min

Implementing microfrontends entirely with custom elements

Structuring and loading native frameworkless microfrontends using HTML custom elements, script loaders, and shadow DOM lifecycle methods.

#5 about 6 min

Managing interactions using HTML attributes and custom events

Designing inbound and outbound communication for decoupled UI components via reactive attributes and synthetic event dispatching.

#6 about 4 min

Standardizing API contracts with the open MFE standard

Enforcing Open MFE interface contracts to govern runtime behaviors and block undocumented side channel hacks like CSS injection.

#7 about 5 min

Defining complex metadata schemas for microfrontend APIs

Formally documenting microfrontend configuration state structures, events, and component identities using OpenAPI and JSON schema.

#8 about 6 min

Applying the strangler fig pattern to legacy frontends

Encapsulating legacy web interfaces behind new boundaries to incrementally upgrade existing implementation code and share component libraries safely.

#9 about 5 min

Testing integration in frameworkless web architectures

Why functional integration testing of microfrontend events provides far more resilience value than testing isolated interface components internally.

#10 about 9 min

Lambda compatibility, interface security, and career advice

Insights on WebAssembly integration constraints in AWS Lambda, mitigating interface risks through Git repository governance, and exploring cross-functional engineering roles.

#11 about 10 min

Resolving shared dependencies and namespace collisions

Architectural strategies to avoid deep component nesting, mitigate custom tag name collisions, and manage centralized npm libraries cleanly.

Matching moments

2:36 min

Applying microfrontend patterns and data duplication bounds

David Leitner · WWC 2022

4:51 min

Differentiating domain-aware micro-frontends from UI components

Luca Mezzalira Luca Mezzalira · WWC 2022

1:26 min

Introduction to micro frontends and platform architecture

Florian Rappl · LIVE

1:31 min

Recapping frontend scaling patterns and distributed UI techniques

Josh Goldberg · WWC 2021

13:09 min

Answering questions on micro-frontend adoption and tooling

Luca Mezzalira Luca Mezzalira · JS Congress

3:15 min

Evolving architectures from backend microservices to micro frontends

Serg Hospodarets · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

It’s Alive! Taming the MLOps Franken-Stack: Write, Run, and Serve with Michelangelo

Eric Wang, Paul Zimmerman

Eric Wang
Paul Zimmerman
Open session

World Congress 2026 North America

Reinventing Testing Practices in the AI Era

Eric Deandrea

Java Champion & Senior Principal Software Engineer, IBM

Eric Deandrea
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

Related videos

Micro-frontends anti-patterns thumbnail
40:17
WWC 2022 • about 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Microfrontends at Scale thumbnail
43:20
WWC 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams thumbnail
31:55
WWC Europe 2026 • about 1 month ago

Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams

Erasmo Hernandez

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
WWC 2025 • 12 months ago

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Manfred Steyer

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • over 4 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.