Destructuring Frontend monoliths with MicroFrontends

Is your frontend monolith slowing you down? Discover how microfrontends enable parallel development and give your teams true autonomy.

#1about 2 minutes

Understanding the problems of frontend monoliths

Frontend monoliths suffer from increasing code complexity, inter-team dependencies, and slow development cycles.

#2about 2 minutes

Introducing the micro-frontend architectural pattern

Micro-frontends break a large application into smaller, independent, and separately deployable apps to enable parallel development.

#3about 2 minutes

Structuring an e-commerce site with micro-frontends

An e-commerce application can be structured with a central "App Shell" that consumes different pages, like homepage or cart, as individual micro-frontends.

#4about 3 minutes

Using an App Shell to manage shared business logic

The App Shell centralizes shared functionalities like login state, user data, tracking, system configuration, and routing to avoid code duplication.

#5about 3 minutes

Choosing a communication pattern between components

Communication can be handled via props when using the same tech stack or through technology-agnostic custom DOM events for different stacks.

#6about 5 minutes

Using Webpack 5 Module Federation for implementation

Webpack's Module Federation allows a host application to reference and load remote modules that are not available at compile time.

#7about 5 minutes

Live demo of a host consuming a remote component

A practical demonstration shows a host application dynamically loading a remote component and passing its local state as props.

#8about 2 minutes

Solving design inconsistency with a shared UI kit

A centralized UI kit provides a collection of reusable components to ensure design consistency across all micro-frontends.

#9about 4 minutes

Automating new micro-frontend setup with templates

A templating engine automates the creation of new micro-frontends, including all necessary configuration for CI/CD, Docker, and Kubernetes.

#10about 3 minutes

Strategies for decoupling code from the monolith

Gradually migrate from a monolith by extracting UI components into a design system and moving shared static logic into internal NPM packages.

#11about 2 minutes

Building an efficient local development environment

A Docker-based setup allows developers to run the App Shell with remote micro-frontends from a staging environment while running only their target micro-frontend locally.

#12about 2 minutes

Q&A: Sharing types between host and remotes

Types are shared between the host and micro-frontends using a dedicated NPM package that exports all necessary TypeScript interfaces.

#13about 2 minutes

Q&A: Managing UI kit versions and dependencies

Micro-frontends can either fall back to the UI kit version shared by the App Shell or bundle their own newer version if needed.

#14about 3 minutes

Q&A: Performance comparison and data integrity

Performance is comparable to code-splitting in a monolith, and data integrity is maintained through a strict unidirectional data flow from the App Shell.

#15about 3 minutes