Destructuring Frontend monoliths with MicroFrontends

Hi, I am Trishul

🤖

 

👨‍💻

 

Monoliths

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

Frontend Monolith

All the code in a single place

Increased inter-team dependency

Slow development to deploy cycle

Increasing size of repo everyday

Only as strong as weakest link

MICROFRONTENDS

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

Independent Repository

Independent CI Pipelines

Independent Deployments

Parallel development cycle

ARCHITECTURE

Remote 1

HOST

Remote 2

Remote 3

HEADER

FOOTER

Home Page

Product Listing

Page

Product Details

Page

Payments

and

Checkout

Cart

MicroFrontend

Appshell / Host

Appshell

Shared business Logic

Login

Tracking

System config

Routing

COMMUNICATION

Same tech stack

Share via props

Different tech stack

Custom DOM events

Custom DOM Events

HOW?

Some Traditional Approaches

Node modules

IFrames

MODULE FEDERATION

Remote 1

Remote 2

Remote 3

HOST

Main.jsx

Remote config

Host config

Host App

DEMO TIME

CHALLENGES

DESIGN CONSISTENCY

Initializing new MicroFrontend

Templating engine

Tenpureto

Moving components to design system

Sharing logic between Micro Frontends

Building an efficient developer experience

Decoupling code from Appshell

THANK YOU

REFERENCES

  • https://webpack.js.org/concepts/module-federation/

  • https://github.com/module-federation/module-federation-examples

MicroFrontends | React Brussels

By Trishul Goel

MicroFrontends | React Brussels

Destructuring Frontend Monoliths with MicroFrontends

  • 730