Lucas Braeschke & Stefan Bley

The Dependency Cookbook - Recipes for Micro Frontend success

What happens when a dependency update breaks your entire micro frontend? This talk offers the recipes for a resilient, scalable architecture.

The Dependency Cookbook - Recipes for Micro Frontend success
#1about 3 minutes

The challenge of dependencies in regulated micro frontends

A complex healthcare application's move to micro frontends highlights the business risk of dependency conflicts, where technical upgrades can force feature deactivation.

#2about 2 minutes

Four key reasons for sharing dependencies in micro frontends

Sharing dependencies improves performance by reducing bundle sizes, ensures UI consistency, prevents runtime errors from incompatible libraries, and simplifies security patching.

#3about 2 minutes

Categorizing dependencies from easy to very hard

Dependencies can be classified as easy (small, stateless), tricky (large, global state), or very hard (singletons like PDF.js that cannot coexist in multiple versions).

#4about 2 minutes

Defining core use cases for dependency management

A robust solution must support using multiple dependency versions, sharing large libraries like Angular, and unifying versions to apply critical security fixes efficiently.

#5about 3 minutes

Using native browser import maps for dependencies

Import maps offer a native, library-free way to manage dependencies by mapping specifiers to URLs, enabling lazy loading but currently limited to a single map per page.

#6about 4 minutes

Managing dependencies with Webpack's Module Federation

Module Federation provides a bundler plugin to share dependencies, negotiate compatible versions at runtime, and allow micro frontends to use their own fallbacks if a match isn't found.

#7about 4 minutes

Choosing a strategy and final recommendations

The choice between native import maps and a framework like Module Federation depends on scale, but it is critical to plan for dependency management and singleton conflicts early.

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

job ad

Saby Company
Delebio, Italy

Intermediate

d

Saby Company
Delebio, Italy

Junior

Matching moments

Managing shared dependencies and component nesting
45:21 MIN

Managing shared dependencies and component nesting

Interface Contracts in Microfrontend Architectures

Sharing libraries and handling version conflicts
19:54 MIN

Sharing libraries and handling version conflicts

Micro Frontends with Module Federation: Why and How?

Key takeaways for successfully adopting micro frontends
33:00 MIN

Key takeaways for successfully adopting micro frontends

Front-End Micro Apps

Conclusion and key takeaways on micro frontends
41:06 MIN

Conclusion and key takeaways on micro frontends

Micro Frontends with Module Federation: Why and How?

Integrating micro frontends with module federation
01:54 MIN

Integrating micro frontends with module federation

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

Audience Q&A on practical micro-frontend challenges
33:55 MIN

Audience Q&A on practical micro-frontend challenges

Micro-frontends anti-patterns

The historical challenge of building micro frontends
00:19 MIN

The historical challenge of building micro frontends

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Exploring the challenges and downsides of micro-frontends
06:24 MIN

Exploring the challenges and downsides of micro-frontends

Stairway to Heaven - Scaling Frontends the Right Way

Featured Partners

Related Videos

See all videos
Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios24:47

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

Manfred Steyer

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

Micro-frontends anti-patterns47:05

Micro-frontends anti-patterns

Luca Mezzalira

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

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

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

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Micro-frontends anti-patterns40:17

Micro-frontends anti-patterns

Luca Mezzalira

Related Articles

View all articles
BB
Benedikt Bischof
Why You Shouldn’t Build a Microservice Architecture
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Michael Eisenbart who talks about the pros and cons of microservice architecture.‍About the speaker:‍Michael has been working for Bosch as a sof...
Why You Shouldn’t Build a Microservice Architecture
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!

From learning to earning

Jobs that call for the skills explored in this talk.