What are some good ways to communicate among micro-frontend applications?

I'm currently doing some research on the viability of having a micro-frontend based architecture for a set of different frontend applications, and came across this tool for making the base application which houses other micro-apps: https://single-spa.js.org/

However, seeing some examples got me wondering what are some ways to structure the application so that the micro-apps can communicate among themselves and also with their parent/container app?

Would love to see some options and discussions for this data-sharing problem :)

Comments

[Luís Takahashi]

Hi @mahamshahid18 !

I have been struggling with this problem at my work, so I have researched a few ways to communicate between micro frontends like:

1. Custom Events
2. PostMessage
3. Custom Workers
4. Props and callbacks
5. Creating your own library <- I chose this

I have tried all of those options but I chose to create my own implementation mixing some concerns.

Looking at the microservices environment a pretty much popular communication mode is pub/sub queues just like the AWS SQS and SNS

Since every micro frontend and the container are at the window I decided using the window to hold a global communication using a pub/sub alike implementation

So I created this library mixing two concerns Pub/sub Queues and Observables

The differential is that every topic manage its own observers and events and also the listener can retrieve last events, and your unique concern is when to add a listener and a dispatcher, but there are some examples in the docs

Feel free to take a look.

github.com/luistak/windowed-observ...

npmjs.com/package/windowed-observable