MinhVo

Minh Vo

rss feed

Slaying code & making it lit fr fr 🔥 tagline

Hey there 👋 I'm an AI Engineer with 7 years of experience building scalable web and mobile applications. Currently at Neurond AI (May 2025 — present), architecting an Enterprise AI Assistant Platform with multi-tenant RAG on pgvector, multi-provider LLM orchestration, and Azure-native infrastructure. Previously spent 5+ years at SNAPTEC (Sep 2019 — Apr 2025), leading SaaS themes, admin dashboards, and e-commerce platforms — earned the Hero of the Year award in 2021. I specialize in TypeScript, React, Next.js, and AI-Native engineering with Claude Code and Cursor.bio

Resumegithub - https://github.com/minhomegamail - mailto:vnqminh0502@gmail.comlinkedin - https://linkedin.com/in/minhvoomegaphone - tel:+84835559175facebook - https://www.facebook.com/minhomegaa/
Projects
Experience
TIL
Blogs
Back to blogs

Micro-Frontend Architecture Module Federation and Single-SPA

Micro-frontend architecture with Module Federation and Single-SPA. Team autonomy, deployment independence.

micro-frontendModule FederationSingle-SPAfrontendWebpackarchitecture

By MinhVo

Introduction

Applies microservice principles to frontend. Enables independent teams owning vertical slices. Benefits: independent deployment, technology flexibility, team autonomy, fault isolation. Companies like IKEA, Spotify, Zalando use with dozens of teams. Complexity only pays off at scale.

Why Micro-Frontends

frontend illustration

Applies microservice principles to frontend. Enables independent teams owning vertical slices. Benefits: independent deployment, technology flexibility, team autonomy, fault isolation. Companies like IKEA, Spotify, Zalando use with dozens of teams. Complexity only pays off at scale.

Module Federation

Webpack 5 feature enabling loading code from separate builds at runtime. Each micro-frontend exposes modules for consumption. Shared dependencies loaded once. Runtime API dynamically loads remote components. Lazy loading fetches only when needed. Works with Webpack, Vite, and other bundlers.

Single-SPA Orchestration

Framework-agnostic: multiple frameworks coexist on same page. Root config defines active applications by URL. Lifecycle: Bootstrap, Mount, Unmount. With Module Federation provides powerful combination: orchestration plus module sharing.

Communication Patterns

frontend illustration

Custom Events for loose coupling. Shared State Libraries for reactive state. URL parameters as universal channel. PostMessage for cross-origin. Shared Context for common data. Minimize shared state, prefer event-driven communication. Theme and locale via CSS custom properties.

Routing Styling Performance

Shell handles top-level routing, each micro-frontend handles internal. CSS Modules for scoping, design tokens via CSS custom properties. Performance: dependency sharing, lazy loading, prefetching, caching. Monitor each micro-frontend independently with budgets.

Testing and CI/CD

Unit tests per micro-frontend independently. Integration tests verify routing and shared state. End-to-end tests for user journeys spanning multiple micro-frontends. Contract tests verify module interfaces. Independent CI/CD pipelines per team. Canary deployments for gradual rollout.

Conclusion

The topics covered in this article represent important developments in modern software engineering. By understanding these concepts deeply and applying them in your projects, you can build more robust, scalable, and maintainable systems. Continue exploring, experimenting, and building — the technology landscape rewards those who stay curious and keep learning.