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.

#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.