Manfred Steyer

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.

Native Federation: The Future of Micro Frontends and Plugin-Systems in 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.

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

Matching moments

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Technical challenges of shipping a cross-platform browser
09:38 MIN

Technical challenges of shipping a cross-platform browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

See all videos
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 with Module Federation: Beyond the Basics44:35

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

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

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios24:47

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

Manfred Steyer

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

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

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Interface Contracts in Microfrontend Architectures54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

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

From learning to earning

Jobs that call for the skills explored in this talk.