> Markdown version of [/videos/492-stairway-to-heaven-scaling-frontends-the-right-way?t=730](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way?t=730). 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).

---

# Stairway to Heaven - Scaling Frontends the Right Way

Micro-frontends often introduce punishing overhead for growing teams. Discover how a frontend modulith with strict boundary tooling guarantees scalable autonomy without compounding your technical debt.

- **Speakers:** Florian Rappl
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 40:05
- **URL:** https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way

## Summary

While micro-frontends offer large engineering organizations the freedom to iterate independently, applying this architectural trend without the right organizational scale introduces punishing overhead. Challenges like redundant browser bundle downloads, fragile npm publishing workflows, and runtime version mismatches often outweigh the agility benefits for smaller teams. As a more pragmatic alternative, the frontend "modulith"—a modular monolith housed in a centralized codebase—recovers the isolation of micro-frontends without sacrificing the stability of a unified deployment.

Managing a scaled monorepo requires rigorous tooling to prevent tight software coupling. Utilizing command-line ecosystems like nx workspaces allows developers to instantly visualize project interdependencies and dramatically accelerate CI/CD times through incremental build caching, ensuring that only modified libraries trigger recompilation. Within this structured repository, logic is deliberately segmented into highly defined layers: user-aware smart feature components, universally reusable presentational ui libraries, backend-facing domain services, and isolated general utilities.

The definitive key to sustaining a monorepo's architectural integrity lies in automated boundary enforcement. By mapping strict linting rules to specific business domains, teams can outright forbid cross-domain coupling locally and during automated checks, halting broken dependencies before they ever reach the main branch. This frictionless validation fosters a robust culture of shared code ownership, ensuring that engineers who alter core shared libraries are directly responsible for resolving downstream breakages. Ultimately, enforcing rigid dependency graphs over co-located frontend code delivers scalable team autonomy without compounding technical debt.

**Keywords:** micro-frontends, frontend modulith architecture, monorepo scaling, nx workspace tooling, incremental build cache, dependency graph visualization, architectural boundary linting, cross-domain coupling, npm publishing overhead, browser version mismatches, smart feature components, presentational ui components, shared code ownership, frontend domain services, circular dependency prevention, angular monorepo structure

## Chapters

1. **Evaluating frontend trends and the Tamagotchi analogy** (00:05) — Understanding when to adopt trends like micro frontends based on actual project requirements.
1. **Scaling development teams with micro frontend architecture** (04:07) — How subdividing huge user interfaces grants individual teams maximum technical freedom.
1. **Analyzing the disadvantages of micro frontend implementation** (06:18) — Why independent deployments create overhead through heavy bundle sizes and fatal version mismatches.
1. **Introducing the frontend modolith and monorepo structure** (08:21) — Using a modular monolith approach in a single repository to sidestep version conflicts.
1. **Managing enterprise monorepos using Nx tooling features** (12:10) — Visualizing dependency graphs with Nx to detect structural problems and excessive coupling.
1. **Enforcing decoupled domain boundaries using code linting** (15:03) — Restricting cross-domain access through predefined repository categories and global linting rules.
1. **Demonstrating workspace architecture and public API exports** (18:01) — Navigating a generated dependency graph and analyzing public library exports versus private implementations.
1. **Triggering linting errors for domain boundary violations** (21:46) — Automating architectural validation within continuous integration pipelines by executing linting checks from the command line.
1. **Improving compilation speeds with incremental build caching** (24:09) — Leveraging Nx build caches to only recompile and test modified application slices.
1. **Organizing scalable monorepo libraries by functional category** (25:29) — Structuring codebase layers into distinct feature, presentation, domain, and utility categories.
1. **Combining micro frontends and the modular monolith pattern** (29:35) — Isolating deployable micro frontends within a single structured repository to maximize architectural benefits.
1. **Answering community questions on monorepo package management** (32:42) — Establishing strict processes to synchronize major framework updates and prevent deployment regressions.

## Related Moments

- [Addressing backend architectures and code repository structures](https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks) (from "Generate Customer Journeys from reusable Building Blocks")
- [Understanding the frontend monolith problem](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Understanding the engineering benefits of micro-frontend architectures](https://www.wearedevelopers.com/videos/420-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [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?")
- [Recapping frontend scaling patterns and distributed UI techniques](https://www.wearedevelopers.com/videos/236-microfrontends-at-scale) (from "Microfrontends at Scale")
- [Evaluating architectural alternatives to multi-framework micro frontends](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")

## Related Articles

- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 104 - Fight for your right to 3rd party](https://www.wearedevelopers.com/magazine/390-dev-digest-104-fight-for-your-right-to-3rd-party)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [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**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [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**