The Micro-Frontend Architecture Handbook

A comprehensive guide covering four main approaches to micro frontend architecture: iframes with cross-window messaging, Web Components with Shadow DOM, single-spa for orchestrating multiple SPAs, and Module Federation for runtime code sharing. Each method is explained with practical code examples, pros/cons analysis, and real-world use cases. The guide also covers additional tools like Piral, Luigi, and Import Maps, helping developers choose the right approach based on team structure, technical requirements, and deployment needs.

#webdev

#career

#webpack

#web-components

Jun 06, 2025•33m read time•From freecodecamp.org

Table of contents

Table of Contents What are Micro Frontends For?Method #1: Iframes & Cross-Window Messaging Method #2: Web Components (Custom Elements + Shadow DOM)Method #3: Single -SPA — The Meta- Framework Approach Method #4: Module Federation - Sharing Code at Runtime Other Tools & Ecosystem Additions Final Thoughts