Monolithic application is designed to be self-contained; components of the program are interconnected and interdependent

Frontend Monolith

Microfrontend architecture is a design pattern where a monolithic Frontend app is destructured into small independent(?) apps. These micro apps are stitched together as a single page on the fly.

Standalone system

Remote 1

HOST

Remote 2

Remote 3

HEADER

FOOTER

Home Page

Product Listing

Page

Product Details

Page

Payments

and

Checkout

Cart

Appshell

Shared business Logic

COMMUNICATION

Custom DOM Events

Some Traditional Approaches

MODULE FEDERATION

Remote 1

Remote 2

Remote 3

HOST

Main.jsx

Remote config

Host config

Host App

DEMO TIME

DESIGN CONSISTENCY

Initializing new MicroFrontend

Decoupling code from Appshell