Micro Frontends

extending the microservice idea to frontend development

What we are learning today

  • What is Micro frontend
  • Problem with Monolithic architecture
  • Micro Frontend with multiple techs and teams
  • Benefits
  • Integration Approaches
  • Cross-application communication
  • Examples

I heard about Micro services

Now, what is Micro frontend ??

"An approach to developing web application as a composition of small frontend apps"

Instead of writing a large monolith frontend application, the application is broken down into domain specific micro frontends, which are self-contained and can be developed and deployed independently.

Monolithic Frontend apps

M/F apps

Different tech stacks for building M/F apps

Benefits

Incremental Updates
Simple, decoupled codebases
Independent deployment
Autonomous teams

Integration Approaches

Server side composition
Run time via iframes
Run-time via JavaScript

Cross-application communication

Custom Events 

            element.addEventListener(
              'myEvent',
              (msg, data) => { /* ... */ }
            );
            element.dispatchEvent(
              new CustomEvent('myEvent')
            );
PUB-SUB design pattern

Examples

DCF

Saxo Trader GO

  • React Modules
  • Angular Modules
  • Asp.Net Web forms

Queries