Hi, I am Trishul

🤖

 

👨‍💻

 

@trishulgoel

Destructuring Frontend monoliths with MicroFrontends

@trishulgoel

Monoliths

@trishulgoel

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

@trishulgoel

@trishulgoel

https://en.wikipedia.org/wiki/Model–view–controller

@trishulgoel

https://microservices.io/patterns/microservices.html

@trishulgoel

Frontend Monolith

@trishulgoel

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

@trishulgoel

MICROFRONTENDS

@trishulgoel

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.

@trishulgoel

Standalone system

Independent Repository

Independent CI Pipelines

Independent Deployments

Parallel development cycle

@trishulgoel

ARCHITECTURE

@trishulgoel

Remote 1

HOST

Remote 2

Remote 3

@trishulgoel

HEADER

FOOTER

Home Page

Product Listing

Page

Product Details

Page

Payments

and

Checkout

Cart

MicroFrontend

Appshell / Host

@trishulgoel

Appshell

Shared business Logic

Login

Tracking

System config

Routing

@trishulgoel

COMMUNICATION

Same tech stack

Share via props

Different tech stack

Custom DOM events

@trishulgoel

Custom DOM Events

@trishulgoel

HOW?

@trishulgoel

Some Traditional Approaches

Node modules

IFrames

@trishulgoel

MODULE FEDERATION

@trishulgoel

Remote 1

Remote 2

Remote 3

HOST

@trishulgoel

Main.jsx

@trishulgoel

Remote config

@trishulgoel

Host config

@trishulgoel

Host App

@trishulgoel

DEMO TIME

@trishulgoel

CHALLENGES

@trishulgoel

Decoupling the huge Codebase

@trishulgoel

DESIGN CONSISTENCY

@trishulgoel

SHARED FUNCTIONAL LOGIC

@trishulgoel

NPM PACKAGES

BUS FACTOR

@trishulgoel

Document Driven Development

Initializing new MicroFrontend

Templating engine

Tenpureto

@trishulgoel

@trishulgoel

An efficient developer experience

THANK YOU

@trishulgoel

REFERENCES

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

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

MicroFrontends

By Trishul Goel

MicroFrontends

Destructuring Frontend Monoliths with MicroFrontends

  • 315