> Markdown version of [/videos/236-microfrontends-at-scale?t=660](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale?t=660). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Microfrontends at Scale

Ditch bloated monolithic code and excruciatingly slow builds. Discover how leveraging microfrontends, edge routing, and strict design systems can isolate deployment workflows and restore developer velocity.

- **Speakers:** Josh Goldberg
- **Event:** World Congress 2021
- **Published:** June 28, 2021
- **Duration:** 43:20
- **URL:** https://www.wearedevelopers.com/videos/236-microfrontends-at-scale

## Summary

As **monolithic frontend applications** grow, they often suffer from bloated code, flaky testing, and excruciatingly slow build processes. To combat these scaling bottlenecks, engineering teams can adopt **microfrontends**—an architectural pattern that splits the UI into smaller, independent applications based on areas of responsibility. By treating the frontend much like backend microservices, developers can isolate deploy workflows, limit the blast radius of code changes, and independently optimize specific application domains. Implementing microfrontends effectively relies on intelligent routing, often utilizing **edge computing workers** to seamlessly direct users to the appropriate service based on URL paths. This architectural freedom allows teams to assign the most effective rendering strategy—such as **static site generation** for performance-critical pages or **server-side rendering** for complex dashboard experiences—to each isolated service. However, splitting application logic introduces the risk of fragmented user experiences and duplicated effort. To maintain a unified aesthetic across discrete microfrontends, teams must implement a rigorous **design system** built on the **atomic design methodology**. By documenting strictly typed components with interactive tools and enforcing constraints via TypeScript, organizations can standardize visual logic, ensure accessibility, and prevent microfrontends from becoming entangled with shared state, ultimately delivering a seamless experience for users and an efficient workflow for developers.

**Keywords:** microfrontend architecture, monolithic frontend scaling, build workflow bottlenecks, edge worker URL routing, static site generation, server-side rendering, client-side hydration, atomic design methodology, UI component libraries, interactive component documentation, typescript property interfaces, frontend state decoupling, isolated deployment workflows, cross-application visual consistency

## Chapters

1. **Overcoming challenges of scaling legacy monolithic frontend applications** (00:03) — How slow builds and massive repositories degrade developer experience and deployment speed over time.
1. **Splitting codebases with specialized frontend application structures** (05:11) — Replacing monoliths with discrete projects mapped to specific architectural responsibilities accelerates development cycles.
1. **Directing user traffic rapidly using geographic edge computing** (07:29) — Utilizing CDN-level workers to seamlessly route users to specialized frontend applications based on URL paths.
1. **Acknowledging duplicate pipeline maintenance and communication trade-offs** (09:54) — The organizational cost of synchronizing standards and build flows across decentralized teams and projects.
1. **Comparing client, server, and static frontend rendering strategies** (11:00) — Comparing performance and architectural trade-offs between static site generation and client-side rendering strategies.
1. **Building cohesive interfaces utilizing atomic design system principles** (15:50) — Structuring reusable visual components into a predictable hierarchy maintains interface consistency across isolated frontend pieces.
1. **Documenting component libraries effectively using interactive development tools** (21:40) — Authoring interactive documentation to enforce internal typescript standards and simplify component usage for teams.
1. **Recapping frontend scaling patterns and distributed UI techniques** (23:39) — Implementing discrete microfrontends, edge routing, and standardized design systems modernizes frontend scalability.
1. **Coordinating design system rollouts across decoupled software teams** (25:11) — Addressing the difficulties of enforcing standardized interface updates without breaking dependent external environments.
1. **Selecting opinionated frameworks for hybrid frontend generation tasks** (28:17) — Adopting feature-complete libraries like Next.js simplifies hybrid server and static rendering over custom webpack setups.
1. **Evaluating vertical routing against complex horizontal page splitting** (29:26) — Why dividing applications by entire page routes is structurally safer than rendering segmented widgets via shared boundaries.
1. **Managing granular deploy conditional logic within unified monorepo structures** (31:20) — Exploring pipeline infrastructure limits when isolating test suites and partial builds inside a dense centralized codebase.
1. **Moving static deployments toward modern edge environment capabilities** (34:28) — Serving prebuilt markup instantly from edge caching networks reduces traditional origin server bottleneck delays.
1. **Restricting raw property inputs to maintain resilient compound components** (35:48) — Enforcing tight configuration limits via programmatic types prevents consuming applications from overriding baseline styling unexpectedly.
1. **Avoiding synchronized architectural state between isolated frontend layers** (41:14) — Offloading session context directly to unified API backends eliminates unreliable cross-application frontend memory sharing constraints.

## Related Moments

- [Introduction to micro frontend architecture](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Introduction to micro frontends and architectural consequences](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Introduction to micro frontends and platform architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")
- [Splitting large monolithic frontends for team autonomy](https://www.wearedevelopers.com/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios) (from "Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios")
- [Understanding the engineering benefits of micro-frontend architectures](https://www.wearedevelopers.com/videos/420-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Scaling development teams with micro frontend architecture](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**