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.

Matching moments

Managing shared dependencies and component nesting
45:21 MIN

Managing shared dependencies and component nesting

Interface Contracts in Microfrontend Architectures

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

Sharing libraries and handling version conflicts
19:54 MIN

Sharing libraries and handling version conflicts

Micro Frontends with Module Federation: Why and How?

The role of micro-frontends in scaling development teams
00:18 MIN

The role of micro-frontends in scaling development teams

Micro-Frontends with Module Federation: Beyond the Basics

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

Managing risks from third-party libraries
08:46 MIN

Managing risks from third-party libraries

Securing your application software supply-chain

Managing the complexity and risk of shared libraries
18:12 MIN

Managing the complexity and risk of shared libraries

Micro-frontends anti-patterns

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

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

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

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

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

Micro-frontends anti-patterns40:17

Micro-frontends anti-patterns

Luca Mezzalira

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 188: CfP time, the risks of NPM and IKEA algorithms
Inside last week’s Dev Digest 188 . 🤖 GitHub Copilot CLI is now in public review 💻 Microsoft is bringing ‘vibe working’ to office apps 🎣 Attackers abuse AI tools to generate captchas in fishing attacks ⚠️ When LLMs autonomously attack 🧠 Common cause...
Dev Digest 188: CfP time, the risks of NPM and IKEA algorithms
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

From learning to earning

Jobs that call for the skills explored in this talk.