Model Online / On-Site
Duration
Modules 4 modules

About the Course

When multiple engineering squads collaborate on a single massive web product, monolithic frontend codebases quickly suffer from slow builds, tight coupling, and deployment bottlenecks. Micro Frontend and Monorepo architectures solve this by decomposing large applications along business domain boundaries so autonomous teams can build, test, and deploy independently.

This advanced course covers high-performance monorepo engineering with Nx and Turborepo, runtime composition via Webpack / Rspack Module Federation, cross-app communication patterns, and independent CI/CD pipelines.

Target Audience and Prerequisites

  • Senior frontend engineers, frontend architects, Tech Leads, and Developer Experience / Platform engineers
  • Multi-squad organizations scaling complex web applications or breaking apart frontend monoliths
  • Production experience with a modern frontend framework (React, Angular, or Vue) and bundlers is required

Key Takeaways

  • Monorepo Engineering: Configure Nx and Turborepo with remote computation caching, affected dependency graphs, and strict module boundaries
  • Runtime Module Federation: Architect Host (Shell) and Remote micro-apps with shared singleton dependencies
  • Isolation & Communication: Implement loosely coupled cross-MFE routing, custom events, and CSS/DOM isolation
  • Resilient Deployment: Manage shared Design System packages, independent CI/CD releases, and graceful runtime fallbacks

Curriculum

Scalable Frontend Topologies and Monorepo Engineering (Nx & Turborepo)
  • Evaluating Monolith, Polyrepo, and Monorepo trade-offs through the lens of Conway's Law
  • Setting up workspaces with pnpm, Turborepo, and Nx task pipelines and dependency graphs
  • Accelerating CI with Local/Remote Computation Caching, affected graph execution, and enforcing module boundary lint rules
Micro Frontend Composition Patterns and Module Federation
  • Comparing build-time packages, server-side composition, iframes, Web Components, and runtime integration
  • Deep dive into Module Federation (Webpack / Rspack / Vite): configuring Host (Shell) and Remote containers
  • Managing shared dependencies (singleton, strictVersion, version negotiation) and dynamic remote manifests
Cross-MFE Routing, Communication, and Shared Design Systems
  • Orchestrating top-level App Shell routing alongside autonomous micro-application sub-routers
  • Loosely coupled state and event patterns: URL state, browser CustomEvents, and shared authentication contexts
  • Preventing CSS collisions and governing a shared UI Design System library across teams
Fault Isolation, Performance Monitoring, and Independent CI/CD Pipelines
  • Isolating failing remotes with granular Error Boundaries and resilient fallback UIs
  • Preventing duplicate vendor chunks, preloading critical remotes, and monitoring federated Core Web Vitals
  • Designing independent CI/CD pipelines, immutable CDN deployments, runtime version switching, and contract testing

Other Courses in This Category

  • State Management with Redux Toolkit

    Manage complex application state using Redux Toolkit (RTK), RTK Query, normalized state schemas, memoized selectors, and modern React state patterns.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • TypeScript for Modern Application Development

    Develop scalable, bug-free TypeScript applications using strict typing, generics, utility types, discriminated unions, and type-safe API layers.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Modern Web Development with React and Next.js

    Build high-performance web applications with React 19, Server and Client Components, Next.js App Router, SSR/SSG/ISR strategies, Server Actions, and caching.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Modern Single Page Application (SPA) Architecture and Libraries

    Master modern SPA architecture, client-side routing, server-state management with TanStack Query, Vite tooling, and bundle optimization techniques.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View
  • Enterprise Frontend Development with Angular

    Build enterprise Angular applications using Standalone Components, Angular Signals, RxJS, Reactive Forms, modular architecture, and OnPush optimization.

    Web Development – Frontend Corporate
    Live Course
    4 modules
    View

Get in touch