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

What if your micro frontends weren't tied to Webpack? Native Federation uses web standards to create faster, future-proof architectures for Angular.

#1about 2 minutes

Understanding the core challenge of micro frontend integration

Micro frontends enable team autonomy but create a significant challenge in integrating disparate parts into a cohesive user experience at runtime.

#2about 5 minutes

The evolution from Webpack to bundler-agnostic federation

While Webpack Module Federation solved runtime integration, its dependency on Webpack is a drawback as the ecosystem moves to faster bundlers like esbuild.

#3about 4 minutes

Introducing Native Federation using web standards

Native Federation provides a bundler-agnostic solution by acting as a slim wrapper that uses web standards like ECMAScript Modules and metadata for sharing code.

#4about 6 minutes

Configuring a micro frontend and shell with Native Federation

A walkthrough of the setup process shows how to use the federation config to expose components, share dependencies, and define remote applications in a manifest file.

#5about 2 minutes

Dynamically loading a remote micro frontend in Angular

The `loadRemoteModule` helper function allows for seamlessly lazy-loading a component from a separately deployed application directly within Angular's routing configuration.

#6about 5 minutes

Combining different frameworks with the Frankenstein architecture

By wrapping different frameworks or framework versions in standard web components, you can use Native Federation to integrate them into a single application.

#7about 2 minutes

Improving performance with island architectures and deferred loading

Island architectures improve initial page load performance by rendering static HTML on the server and deferring the loading of interactive JavaScript until needed.

#8about 3 minutes

Balancing complexity and benefits in modern architectures

Adopting micro frontends or island architectures increases complexity, so it's crucial to weigh this against the required benefits like team autonomy or raw performance.