Intermediate LevelSoftware Engineering Principles
What are Micro-Frontends and how do independent teams build modular UI applications?
❓ Interview Prompt: Explain Micro-Frontends architecture, Webpack 5 Module Federation, iframe isolation, shared design systems, and runtime integration.
Micro-Frontends extend microservice architectural concepts to frontend web applications, decomposing monolithic single-page applications into smaller, independently deliverable web apps:
Integration Strategies:
1
Build-Time Integration: Packages published to npm (tight coupling risk).
2
Runtime Integration via Module Federation: Webpack 5 / Vite Module Federation dynamically loads remote JavaScript bundles at runtime across domains!
3
Web Components: Custom HTML elements isolating styles via Shadow DOM.
Code Implementation Example
javascript
// Webpack 5 Module Federation Config (Remote App)
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'checkoutApp',
filename: 'remoteEntry.js',
exposes: { './CheckoutButton': './src/CheckoutButton' }
})
]
};💡Configuring Webpack Module Federation for Micro-Frontend component sharing.
🎯 Interview Key Takeaway
Use Micro-Frontends and Module Federation to allow autonomous engineering teams to deploy UI components independently.
#Micro-Frontends#Module Federation#Architecture#Intermediate
Back to all Software Engineering Principles Questions→