🧩 Micro Frontends & Advanced Architecture
As web applications grow in complexity, teams need scalable architectures. Micro Frontends (MFEs) offer a solution by breaking a monolithic frontend into smaller, independent units that can be developed, tested, and deployed independently.
🧠 What are Micro Frontends?
Micro Frontends apply the principles of microservices to the frontend world. Each team owns a feature or domain and delivers it end-to-end, including UI.
- Independent codebases
- Tech-agnostic (React, Angular, Vue in the same app)
- Independent deployments
- Team autonomy
🏗️ Common Architecture Styles
| Architecture | Example | Communication |
|---|---|---|
| Iframe Embeds | Legacy isolation | window.postMessage |
| Web Components | Custom Elements | Props + Events |
| Module Federation | Webpack 5+ | Shared JS runtime |
🔗 Real-World Example
Suppose we have a shell app and a micro frontend hosted inside via iframe. The micro frontend can notify the shell about events (e.g., login, nav) using postMessage.
// Inside Micro Frontend (child)
window.parent.postMessage({ type: 'NAVIGATE', path: '/profile' }, '*');
// Inside Shell App (parent)
window.addEventListener('message', (event) => {
if (event.data.type === 'NAVIGATE') {
router.navigate(event.data.path);
}
});
This allows decoupled communication between micro apps.
🌍 Module Federation (Webpack 5)
Webpack 5 introduced Module Federation to allow runtime sharing of code between applications.
// webpack.config.js (host)
remotes: {
profileApp: 'profileApp@http://localhost:3001/remoteEntry.js',
}
// Import from remote app
import Profile from 'profileApp/Profile';
This allows importing code from other deployed micro apps like local modules.
📦 StackBlitz Demo
Below is a demo showing two micro frontends communicating via postMessage.
Click a button in the child iframe to send a message to the parent!
🚦 When to Use Micro Frontends
- Large teams needing parallel development
- Multiple frameworks (React + Angular)
- Independent deployments with CI/CD pipelines
- Legacy + modern system integration
💡 Best Practices
- Use a shared design system
- Version your contracts between shells and children
- Scope styles to avoid leakage
- Don’t over-engineer for small teams/projects
📚 Conclusion
Micro Frontends enable scalable frontend development by allowing teams to work independently on their features. Using tools like Webpack Module Federation, Web Components, or simple iframes, you can break the monolith and build faster, cleaner, and more modular web apps.
Choose your architecture wisely, align it with your org size, and maintain good communication protocols across teams.
✨ Pro tip: For real-world production apps, combine module federation with design tokens and CI/CD pipelines to unlock full micro frontend power!