Hackforge Academy

Explanation

Micro Frontend Architecture divides a large frontend application into smaller, independently developed and deployed frontend applications. Each micro frontend typically represents a specific business domain.

Code:

E-Commerce Application
│
├── Product Micro Frontend
├── Cart Micro Frontend
├── Payment Micro Frontend
└── Account Micro Frontend

Explanation

The shell or container application acts as the main application. It provides the common layout, navigation, authentication, and loads the required micro frontends.

Code:

Shell Application
│
├── Header
├── Navigation
├── Product App
├── Cart App
└── Payment App

Explanation

Each micro frontend can have its own codebase, development team, testing process, and deployment pipeline while still appearing as part of one application.

Code:

Product Team  → Product App  → Deploy
Cart Team     → Cart App     → Deploy
Payment Team  → Payment App  → Deploy

Explanation

Micro frontends may need to communicate with each other. Common approaches include custom browser events, shared state, URL parameters, or shared APIs.

Code:

Product App
    │
    │ Custom Event
    ↓
Cart App

window.dispatchEvent(
  new CustomEvent('cartUpdated')
);

Explanation

A typical micro frontend architecture combines a shell application, independently deployed micro frontends, shared services, and backend APIs to create one unified user experience.

Code:

                    Shell Application
                           │
          ┌────────────────┼────────────────┐
          ↓                ↓                ↓
     Product App       Cart App        Payment App
          │                │                │
          └────────────────┼────────────────┘
                           ↓
                      Backend APIs
                           ↓
                       Database