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 · World Congress 2022

4:51 min

Differentiating domain-aware micro-frontends from UI components

Luca Mezzalira Luca Mezzalira · World Congress 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 · World Congress 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

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
6 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
7 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
13 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
14 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
19 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
20 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Outdoor Stage

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 3

Still on 4.8 or lower? A Practical Guide to Moving Your "Un-Migratable" .NET Apps

Isaac Levin

Developer Advocate

Isaac Levin
Open session

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

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

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

September 25, 2026 · 11:40–12:10

Stage 6

Codifying Trade-offs: Security, Cost, and Compliance as Agent Guardrails

Suzanne Daniels

Chief Developer Advisor at Microsoft

Suzanne Daniels
Open session

World Congress 2026 North America

September 25, 2026 · 12:20–12:50

Stage 9

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

September 25, 2026 · 12:55–13:25

Stage 9

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

Eric Wang, Paul Zimmerman

Eric Wang
Paul Zimmerman

Related videos

Micro-frontends anti-patterns thumbnail
40:17
World Congress 2022 • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • almost 5 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Microfrontends at Scale thumbnail
43:20
World Congress 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
World Congress 2026 Europe • 2 months 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
World Congress 2025 • about 1 year ago

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

Manfred Steyer

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • almost 5 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.