Manfred Steyer

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

How can you safely run different frameworks and versions in one app? This talk reveals the advanced micro frontend architecture that makes it possible.

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
#1about 2 minutes

Understanding micro frontends and team autonomy

Micro frontends split a large application into independent parts to give teams autonomy and restore the agility of a small team.

#2about 3 minutes

Integrating micro frontends with module federation

Module federation enables a shell application to dynamically load remote micro frontends at runtime and share common library dependencies.

#3about 3 minutes

Navigating multi-version and multi-framework challenges

Independent teams, company mergers, or gradual migrations can lead to multiple framework versions, which may cause conflicts due to private API dependencies.

#4about 5 minutes

Using web components to abstract framework details

Wrapping micro frontends in web components creates a standardized, framework-agnostic abstraction layer for easier integration.

#5about 3 minutes

Loading abstracted components with module federation

Exposing web components via module federation allows the shell to dynamically load them while sharing dependencies when versions match or loading new versions on demand.

#6about 4 minutes

Demonstrating a multi-version and multi-framework app

A live demonstration shows an application integrating different versions of Angular, React, Vue, and AngularJS, highlighting challenges like nested routing.

#7about 2 minutes

Considering alternatives to micro frontends

Alternative architectures like monoliths, monorepos, or using iframes involve trade-offs between team autonomy and managing version complexity.

#8about 2 minutes

Understanding the organizational cost of this architecture

Adopting a micro frontend architecture requires a dedicated platform team to provide guidelines, helper functions, and workarounds for stream-aligned teams.

#9about 2 minutes

Key takeaways for building multi-version frontends

The solution combines web components for abstraction, federation for dynamic loading, and a platform team for support to successfully manage multi-version architectures.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Micro Frontends with Module Federation: Why and How?45:40

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Micro-Frontends with Module Federation: Beyond the Basics44:35

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular29:36

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular

Manfred Steyer

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular33:18

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

Interface Contracts in Microfrontend Architectures54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

The Dependency Cookbook - Recipes for Micro Frontend success21:06

The Dependency Cookbook - Recipes for Micro Frontend success

Lucas Braeschke, Stefan Bley

Microfrontends at Scale43:20

Microfrontends at Scale

Josh Goldberg

From learning to earning

Jobs that call for the skills explored in this talk.

Angular Developer

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
RxJS
Angular
TypeScript