Micro Frontends
Four frameworks sharing the same TODO state via a framework-agnostic event bus. Changes in any app instantly propagate to all others.
React
Angular
Vue
Blazor (.NET 10)
Architecture Diagram
Next.js Host
/micro-fe
→MicroFePage.tsx
→dynamic import (ssr: false) × 4
React
Native component
useMicroFeBus() hook
Angular
Custom Element
<angular-todo-list>
Vue
Custom Element (Shadow DOM)
<vue-todo-list>
Blazor
WASM + JS Bridge
DotNetObjectReference
Shared State
window.__microFeBus
addTodo()updateTodo()deleteTodo()subscribe()getState()
Data Flow
- User performs action (add/edit/delete) in any micro FE
- Micro FE calls
__microFeBus.addTodo()/updateTodo()/deleteTodo() - Bus updates internal state and calls
notify() - All subscribed callbacks receive the new
TodoState - Each micro FE re-renders with updated items