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

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta thumbnail
6:07
1 day ago

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
1 day ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
15 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
22 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
24 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
29 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

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 • over 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 • 3 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.