Over the years, in my role as a lead full-stack developer, solutions architect, and mentor, I’ve been immersed in the world of micro frontend architecture, working across different large-scale frontend projects where multiple teams, stacks, and deplo...

freeCodeCamp is a nonprofit organization offering free online coding courses and programming tutorials, covering topics such as web development, data science, and machine learning. Learners can gain practical coding skills, build real-world projects, and earn certifications to advance their careers in tech.

freeCodeCamp

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.

The Micro-Frontend Architecture Handbook

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

Hi everyone! 👋🏼 🤓 Just published this deep dive on Micro-Frontend Architecture — and I’d love to hear from you! 💚
Which micro-frontend approach do you or your team use in your projects — iframes, Web Components, Single-SPA, Module Federation, Piral, Lougi … or something completely different?
I’ve built it entirely from my hands-on experience in Software Development and Solution Architecture — collaborating with diverse teams and tech stacks. But as we all know, the frontend landscape keeps evolving rapidly.
So, I’d love to learn from you! Drop your thoughts below 👇 Let me and others know what’s worked (or didn’t!) for your team — it’s genuinely interesting how you tackled micro frontends in the wild! Let’s share knowledge and discuss!
<img src="https://media.daily.dev/image/upload/s--B3IuukuZ--/f_auto/v1749243600/ugc/content_5751b89a-b528-4ead-9305-7d447ad470ca?_a=BAMClqUq0" alt="c78a8d84-a6a9-42af-90fd-423983c7ec77">

very informative read, thanks for sharing…
a question, if i may…
Method #4: Module Federation - Sharing Code at Runtime
<ul>
<li>both product-app and host-app will e in same project structure or they will run from different project?</li>
</ul>
thanks and happy coding :)

Great overview of modern strategies and point on. I like examples and list of tradeoffs for each approach. Unfortunately, we can rarely find a company using micro-frontends in production. Lack of expertise or cost of transition from monoliths are over estimated compared to long term gains. Hope adoption gonna get traction soon , giving teams more freedom and ownership.

Indeed, NOTHING in life is without trade-offs. Everything has a cost, and at least an opportunity cost. There is no “best” or one-size-fits-all solution for anything at all.