Modern web applications have grown increasingly complex, challenging development teams to find better ways to build, maintain, and scale their frontend codebases. The traditional monolithic frontend approach, where a single team manages one large codebase, often creates bottlenecks in delivery and stifles innovation. Enter microfrontends—an architectural pattern that extends microservice principles to frontend development.
Understanding Microfrontends
Microfrontends decompose frontend applications into smaller, more manageable pieces that can be developed, tested, and deployed independently. Each microfrontend represents a distinct feature or business domain within the larger application. This approach allows multiple teams to work autonomously while contributing to a unified product.
I’ve implemented microfrontends across several enterprise applications and discovered that the true value lies not just in the technical architecture, but in how it transforms organizational dynamics. Teams gain ownership over their domains and can move at their own pace without waiting for other teams to complete their work.
Core Benefits of Microfrontends
The primary advantages of microfrontends include:
Independent deployment capabilities allow teams to release features without coordinating with others. This reduces deployment risk and accelerates time-to-market for new features.
Technology flexibility enables teams to select the best tools for their specific requirements rather than being constrained by application-wide technology decisions.
Scalable development teams can work in parallel on different features without stepping on each other’s toes, making it easier to onboard new developers and expand capacity.
Simplified maintenance becomes possible as each codebase is smaller, more focused, and easier to understand than a monolithic equivalent.
Architectural Patterns
Several patterns have emerged for implementing microfrontends, each with distinct trade-offs:
Client-Side Composition
This approach composes the application in the browser by loading microfrontends at runtime. The shell application provides the common structure and orchestrates the loading and mounting of individual microfrontends.
// Shell application with client-side composition
class AppShell {
constructor() {
this.routes = {
'/products': 'product-catalog',
'/cart': 'shopping-cart',
'/account': 'user-account'
};
this.initRouter();
}
initRouter() {
window.addEventListener('popstate', () => this.renderCurrentRoute());
document.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
const href = e.target.getAttribute('href');
if (href.startsWith('/')) {
e.preventDefault();
history.pushState({}, '', href);
this.renderCurrentRoute();
}
}
});
this.renderCurrentRoute();
}
async renderCurrentRoute() {
const path = window.location.pathname;
const microfrontendName = this.routes[path] || 'home';
try {
await this.loadAndMountMicrofrontend(microfrontendName);
} catch (error) {
console.error(`Failed to load microfrontend: ${microfrontendName}`, error);
document.getElementById('content').innerHTML = '<p>Something went wrong</p>';
}
}
async loadAndMountMicrofrontend(name) {
const contentEl = document.getElementById('content');
// Clean up currently mounted microfrontend
if (this.currentMicrofrontend) {
this.currentMicrofrontend.unmount();
}
contentEl.innerHTML = '<p>Loading...</p>';
// Load the microfrontend script
const scriptId = `mf-${name}`;
if (!document.getElementById(scriptId)) {
const script = document.createElement('script');
script.id = scriptId;
script.src = `/microfrontends/${name}.js`;
script.onload = () => {
this.currentMicrofrontend = window[`mf_${name}`];
this.currentMicrofrontend.mount(contentEl);
};
document.head.appendChild(script);
} else {
this.currentMicrofrontend = window[`mf_${name}`];
this.currentMicrofrontend.mount(contentEl);
}
}
}
new AppShell();
Server-Side Composition
With server-side composition, the application is assembled on the server before being sent to the client. This approach can offer better performance for initial page loads and improved SEO capabilities.
// Server-side composition with Express
const express = require('express');
const axios = require('axios');
const app = express();
// Registry of microfrontends and their endpoints
const registry = {
header: 'http://team-a-service/header',
productList: 'http://team-b-service/products',
cart: 'http://team-c-service/cart',
footer: 'http://team-a-service/footer'
};
app.get('/', async (req, res) => {
try {
// Fetch all fragments in parallel
const [header, productList, cart, footer] = await Promise.all([
axios.get(registry.header),
axios.get(registry.productList),
axios.get(registry.cart),
axios.get(registry.footer)
]);
// Compose the full HTML response
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Microfrontend Demo</title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<div id="header">${header.data}</div>
<main>
<div id="product-list">${productList.data}</div>
<div id="cart">${cart.data}</div>
</main>
<div id="footer">${footer.data}</div>
<script src="/scripts/main.js"></script>
</body>
</html>
`;
res.send(html);
} catch (error) {
console.error('Error composing page:', error);
res.status(500).send('Something went wrong');
}
});
app.listen(3000, () => {
console.log('Composition server running on port 3000');
});
Web Components
Using Web Components provides a standards-based approach for creating encapsulated, reusable components that can be used across different microfrontends regardless of the underlying framework.
// Creating a microfrontend as a Web Component
class ProductCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['product-id', 'name', 'price', 'image'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.render();
}
connectedCallback() {
this.render();
this.addEventListeners();
}
disconnectedCallback() {
this.removeEventListeners();
}
render() {
const productId = this.getAttribute('product-id');
const name = this.getAttribute('name');
const price = this.getAttribute('price');
const image = this.getAttribute('image');
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1rem;
}
.product-image {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
}
.product-name {
font-weight: bold;
margin-bottom: 0.5rem;
}
.product-price {
color: #e53935;
margin-bottom: 1rem;
}
.add-to-cart {
background-color: #4caf50;
color: white;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-radius: 4px;
}
</style>
<img class="product-image" src="${image}" alt="${name}">
<div class="product-name">${name}</div>
<div class="product-price">$${price}</div>
<button class="add-to-cart">Add to Cart</button>
`;
}
addEventListeners() {
const addToCartButton = this.shadowRoot.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', this.handleAddToCart.bind(this));
}
removeEventListeners() {
const addToCartButton = this.shadowRoot.querySelector('.add-to-cart');
addToCartButton.removeEventListener('click', this.handleAddToCart.bind(this));
}
handleAddToCart() {
const productId = this.getAttribute('product-id');
// Dispatch custom event that can be caught by parent applications
this.dispatchEvent(new CustomEvent('product-added', {
bubbles: true,
composed: true,
detail: {
productId,
name: this.getAttribute('name'),
price: this.getAttribute('price')
}
}));
}
}
// Register the web component
customElements.define('product-card', ProductCard);
Module Federation
Webpack 5 introduced Module Federation, a game-changing feature that allows JavaScript applications to dynamically import code from another application at runtime. This approach has quickly become one of the most powerful ways to implement microfrontends.
// Webpack configuration with Module Federation for a microfrontend
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
entry: './src/index',
mode: 'development',
output: {
publicPath: 'http://localhost:3001/'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'productCatalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList',
'./ProductDetail': './src/components/ProductDetail'
},
shared: {
react: { singleton: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
}
})
]
};
// Shell application consuming a federated module
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
entry: './src/index',
mode: 'development',
output: {
publicPath: 'http://localhost:3000/'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
productCatalog: 'productCatalog@http://localhost:3001/remoteEntry.js',
shoppingCart: 'shoppingCart@http://localhost:3002/remoteEntry.js',
userAccount: 'userAccount@http://localhost:3003/remoteEntry.js'
},
shared: {
react: { singleton: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
}
})
]
};
Communication Patterns
Effective communication between microfrontends is crucial for creating a cohesive user experience. I’ve used several patterns in production:
Custom Events
Custom events provide a lightweight, loosely coupled communication mechanism.
// Microfrontend A: Dispatching an event
const addToCartButton = document.getElementById('add-to-cart');
addToCartButton.addEventListener('click', () => {
const productDetails = {
id: '123',
name: 'Premium Headphones',
price: 199.99,
quantity: 1
};
// Create and dispatch a custom event
const event = new CustomEvent('add-to-cart', {
bubbles: true, // Allow event to bubble up through the DOM
composed: true, // Allow event to cross shadow DOM boundaries
detail: productDetails
});
document.dispatchEvent(event);
});
// Microfrontend B: Listening for the event
document.addEventListener('add-to-cart', (event) => {
const product = event.detail;
console.log(`Added ${product.name} to cart`);
// Update cart UI
updateCartUI(product);
});
function updateCartUI(product) {
const cartItems = document.getElementById('cart-items');
const cartItem = document.createElement('div');
cartItem.classList.add('cart-item');
cartItem.innerHTML = `
<span class="item-name">${product.name}</span>
<span class="item-price">$${product.price}</span>
<span class="item-quantity">Qty: ${product.quantity}</span>
`;
cartItems.appendChild(cartItem);
// Update cart total
const cartTotal = document.getElementById('cart-total');
const currentTotal = parseFloat(cartTotal.textContent.replace('$', ''));
const newTotal = currentTotal + (product.price * product.quantity);
cartTotal.textContent = `$${newTotal.toFixed(2)}`;
}
Shared State Management
For more complex applications, a shared state management solution can provide a more structured approach to cross-microfrontend communication.
// Implementation of a simple shared state store
class SharedStore {
constructor() {
this.state = {};
this.listeners = {};
}
getState(key) {
return this.state[key];
}
setState(key, value) {
this.state[key] = value;
if (this.listeners[key]) {
this.listeners[key].forEach(listener => listener(value));
}
}
subscribe(key, listener) {
if (!this.listeners[key]) {
this.listeners[key] = [];
}
this.listeners[key].push(listener);
// Return unsubscribe function
return () => {
this.listeners[key] = this.listeners[key].filter(l => l !== listener);
};
}
}
// Create a singleton instance
const globalStore = window.globalStore || new SharedStore();
window.globalStore = globalStore;
// Usage in Microfrontend A
globalStore.setState('cart', { items: [], total: 0 });
function addToCart(product) {
const cart = globalStore.getState('cart');
const updatedCart = {
items: [...cart.items, product],
total: cart.total + product.price
};
globalStore.setState('cart', updatedCart);
}
// Usage in Microfrontend B
function initCartUI() {
const cartElement = document.getElementById('cart-summary');
// Initial render
const cart = globalStore.getState('cart') || { items: [], total: 0 };
renderCart(cart);
// Subscribe to changes
globalStore.subscribe('cart', (cart) => {
renderCart(cart);
});
function renderCart(cart) {
cartElement.innerHTML = `
<div class="cart-count">${cart.items.length} items</div>
<div class="cart-total">$${cart.total.toFixed(2)}</div>
`;
}
}
initCartUI();
Routing Solutions
Routing in microfrontend architectures requires special consideration since multiple applications need to coordinate around a single URL.
Shell-Based Routing
The shell application controls the primary routing and delegates rendering to the appropriate microfrontend.
// Shell application router
class Router {
constructor(routes, contentElement) {
this.routes = routes;
this.contentElement = contentElement;
// Initialize
this.handleRouteChange = this.handleRouteChange.bind(this);
window.addEventListener('popstate', this.handleRouteChange);
document.addEventListener('click', this.handleLinkClick.bind(this));
// Initial route
this.handleRouteChange();
}
handleLinkClick(event) {
// Only handle links within the app
if (event.target.tagName === 'A' && event.target.origin === window.location.origin) {
event.preventDefault();
this.navigate(event.target.pathname);
}
}
navigate(path) {
window.history.pushState({}, '', path);
this.handleRouteChange();
}
async handleRouteChange() {
const path = window.location.pathname;
// Find the matching route
const matchedRoute = this.findMatchingRoute(path);
if (matchedRoute) {
this.contentElement.innerHTML = '<div>Loading...</div>';
try {
await this.loadMicrofrontend(matchedRoute.microfrontend);
// Pass the route parameters to the microfrontend
if (window[matchedRoute.microfrontend]) {
window[matchedRoute.microfrontend].render(
this.contentElement,
matchedRoute.params
);
} else {
this.contentElement.innerHTML = '<div>Failed to load module</div>';
}
} catch (error) {
console.error('Error loading microfrontend:', error);
this.contentElement.innerHTML = '<div>Something went wrong</div>';
}
} else {
this.contentElement.innerHTML = '<div>Page not found</div>';
}
}
findMatchingRoute(path) {
for (const route of this.routes) {
// Simple route matching - can be enhanced with more complex path matching
const paramNames = [];
const regexPattern = route.path.replace(/:([^/]+)/g, (_, paramName) => {
paramNames.push(paramName);
return '([^/]+)';
});
const match = path.match(new RegExp(`^${regexPattern}$`));
if (match) {
const params = {};
paramNames.forEach((name, index) => {
params[name] = match[index + 1];
});
return {
microfrontend: route.microfrontend,
params
};
}
}
return null;
}
async loadMicrofrontend(name) {
if (!window[name]) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = `/microfrontends/${name}.js`;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
return Promise.resolve();
}
}
// Usage
const routes = [
{ path: '/', microfrontend: 'home' },
{ path: '/products', microfrontend: 'product-catalog' },
{ path: '/products/:id', microfrontend: 'product-detail' },
{ path: '/cart', microfrontend: 'shopping-cart' },
{ path: '/account', microfrontend: 'user-account' }
];
const contentElement = document.getElementById('app-content');
new Router(routes, contentElement);
Microfrontend-Owned Routing
Each microfrontend manages its own internal routing, while the shell handles top-level navigation.
// Product catalog microfrontend with internal routing
window.productCatalog = {
render: function(container, params) {
this.container = container;
this.router = new MicrofrontendRouter(container, this.routes, params);
},
routes: [
{
path: '/',
component: function(container) {
container.innerHTML = `
<h2>Product Catalog</h2>
<div class="product-grid">
<div class="product-card" data-product-id="1">
<img src="/images/product1.jpg" alt="Product 1">
<h3>Wireless Headphones</h3>
<p>$149.99</p>
<a href="/products/1">View Details</a>
</div>
<div class="product-card" data-product-id="2">
<img src="/images/product2.jpg" alt="Product 2">
<h3>Smart Watch</h3>
<p>$299.99</p>
<a href="/products/2">View Details</a>
</div>
<!-- More products -->
</div>
`;
}
},
{
path: '/:id',
component: function(container, params) {
const productId = params.id;
// In a real app, you would fetch this data from an API
const product = {
id: productId,
name: productId === '1' ? 'Wireless Headphones' : 'Smart Watch',
price: productId === '1' ? 149.99 : 299.99,
description: 'This is a detailed product description.'
};
container.innerHTML = `
<div class="product-detail">
<a href="/products" class="back-link">← Back to Products</a>
<h2>${product.name}</h2>
<div class="product-info">
<img src="/images/product${productId}.jpg" alt="${product.name}">
<div class="product-meta">
<p class="price">$${product.price}</p>
<p>${product.description}</p>
<button class="add-to-cart-btn">Add to Cart</button>
</div>
</div>
</div>
`;
// Add event listeners
container.querySelector('.add-to-cart-btn').addEventListener('click', () => {
// Dispatch event for adding to cart
const event = new CustomEvent('add-to-cart', {
bubbles: true,
composed: true,
detail: product
});
container.dispatchEvent(event);
});
}
}
]
};
// Simple router for microfrontends
class MicrofrontendRouter {
constructor(container, routes, params = {}) {
this.container = container;
this.routes = routes;
this.params = params;
// Handle initial route
this.handleRoute();
// Set up link interception
this.container.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
const href = e.target.getAttribute('href');
if (href && href.startsWith('/products')) {
e.preventDefault();
window.history.pushState({}, '', href);
window.dispatchEvent(new PopStateEvent('popstate'));
}
}
});
}
handleRoute() {
// For microfrontend with ID param
if (this.params.id) {
const idRoute = this.routes.find(route => route.path === '/:id');
if (idRoute) {
idRoute.component(this.container, this.params);
return;
}
}
// Default to home route
const homeRoute = this.routes.find(route => route.path === '/');
if (homeRoute) {
homeRoute.component(this.container, this.params);
}
}
}
Styling in Microfrontends
Consistent styling across microfrontends is a common challenge. I’ve found these approaches effective:
Shared Design System
Building a shared component library ensures visual consistency across all microfrontends.
// Design system package exposed as a federated module
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
entry: './src/index',
mode: 'production',
output: {
publicPath: 'https://design-system.example.com/'
},
plugins: [
new ModuleFederationPlugin({
name: 'designSystem',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
'./Input': './src/components/Input',
'./Card': './src/components/Card',
'./Typography': './src/components/Typography',
'./theme': './src/theme'
},
shared: {
react: { singleton: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
}
})
]
};
// Consuming the design system in a microfrontend
// src/App.jsx
import React from 'react';
import { Button, Card, Typography } from 'designSystem/components';
import { theme } from 'designSystem/theme';
const App = () => {
return (
<div style={{ padding: theme.spacing.medium }}>
<Typography variant="h1">Product Catalog</Typography>
<div className="product-grid">
<Card>
<img src="/product1.jpg" alt="Product" />
<Typography variant="h3">Wireless Headphones</Typography>
<Typography variant="body">High-quality sound experience</Typography>
<Typography variant="price">$149.99</Typography>
<Button variant="primary">Add to Cart</Button>
</Card>
{/* More products */}
</div>
</div>
);
};
export default App;
CSS-in-JS with Theme Provider
CSS-in-JS libraries can help create scoped styles while sharing a common theme.
// Shared theme definition
// src/theme.js
export const theme = {
colors: {
primary: '#0070f3',
secondary: '#ff4081',
background: '#ffffff',
text: '#333333',
error: '#d32f2f'
},
typography: {
fontFamily: "'Roboto', sans-serif",
fontSize: {
small: '0.875rem',
medium: '1rem',
large: '1.25rem',
xlarge: '1.5rem',
xxlarge: '2rem'
}
},
spacing: {
small: '0.5rem',
medium: '1rem',
large: '1.5rem',
xlarge: '2rem'
},
breakpoints: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px'
}
};
// Using the theme in a component with styled-components
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { theme } from './theme';
const Button = styled.button`
background-color: ${props => props.variant === 'primary'
? props.theme.colors.primary
: props.theme.colors.secondary};
color: white;
border: none;
border-radius: 4px;
padding: ${props => props.theme.spacing.small} ${props => props.theme.spacing.medium};
font-family: ${props => props.theme.typography.fontFamily};
font-size: ${props => props.theme.typography.fontSize.medium};
cursor: pointer;
transition: opacity 0.2s ease;
&:hover {
opacity: 0.9;
}
`;
const Card = styled.div`
background-color: ${props => props.theme.colors.background};
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: ${props => props.theme.spacing.large};
margin-bottom: ${props => props.theme.spacing.medium};
`;
// Wrapper component that provides the theme
const ThemedApp = ({ children }) => (
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
);
export { ThemedApp, Button, Card };
Deployment Strategies
Effective deployment is critical for realizing the benefits of microfrontends.
Independent Deployment Pipelines
Each microfrontend should have its own CI/CD pipeline, allowing teams to deploy changes independently.
# Example GitHub Actions workflow for a microfrontend
# .github/workflows/deploy.yml
name: Deploy Microfrontend
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Build
run: npm run build
- name: Deploy to S3
if: github.event_name == 'push'
uses: jakejarvis/s3-sync-action@master
with:
args: --acl public-read --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}/product-catalog
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
SOURCE_DIR: 'dist'
- name: Invalidate CloudFront
if: github.event_name == 'push'
uses: chetan/invalidate-cloudfront-action@master
env:
DISTRIBUTION: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
PATHS: '/product-catalog/*'
AWS_REGION: 'us-east-1'
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
Runtime Integration with CDN
Deploying microfrontends to a CDN enables efficient delivery and versioning.
// Dynamic loading of versioned microfrontends
const microfrontendRegistry = {
'product-catalog': {
entry: 'https://cdn.example.com/product-catalog/v1.2.3/remoteEntry.js',
name: 'productCatalog'
},
'shopping-cart': {
entry: 'https://cdn.example.com/shopping-cart/v2.0.1/remoteEntry.js',
name: 'shoppingCart'
},
'user-account': {
entry: 'https://cdn.example.com/user-account/v1.0.5/remoteEntry.js',
