Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
What the interviewer wants to hear
- Benefit: independent teams and deployments
- Costs: duplicate dependencies, bigger bundles, inconsistent UX
- Integration options: build-time packages, runtime module federation, route-level split
- Shared design system and contracts between apps
- Consider a well-structured monorepo first
- Cross-cutting concerns: auth, routing, observability
Model answer
Micro-frontends mainly solve an organisational problem: many teams that need to ship independently without waiting for one big release. The costs are real: risk of loading React twice, larger bundles, inconsistent UI, harder debugging and more infrastructure. Before agreeing, I would check if a monorepo with clear module boundaries, code owners and fast CI solves the pain. If we go ahead, I prefer splitting by route or business domain, so each app owns full pages, which can be composed by the edge or a thin shell. Runtime module federation allows finer composition but needs strict version contracts for shared libraries. All apps should use the shared design system and a common auth, routing and telemetry layer. I would migrate one area first and measure performance and team speed.
Can you answer it under time pressure?
Take a timed hard round and get scored on every answer.
More hard Frontend Developer questions
- How would you design and build a shared component library (design system) used by several product teams?
- A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?
- What are the main security risks for a frontend application and how do you protect against them?
- What are React Server Components, and how do they change the way you build a React app?
- How would you design a web app that keeps working offline, for example for field workers with poor connectivity?
- You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
- How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?
- Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
- How do you know your frontend is healthy in production? Describe the monitoring you would set up.