Micro frontend application - node.js

Question

I have 1 project which is divided into multiple SPA, I have 5 SPA, written in 2 in Angular, 2 in react and 1 in vue js. Now I have an integrated server which will serve the different files as per routing. I need to share the data from one app to another with least interaction of database. This is a scenario of micro frontends. Hope this clears my problem.
Any help will be appreciated.

Answer 1

There are three ways with which you can share data:
URL: Query Params/Path Params (Only for small data like ID, filters, etc.)
Session Storage: Use this only if you are not navigating to other tab/window
Local Storage: Most convenient and preferred way
Of course, if you are persisting state to Local Storage, then you have to handle flushing of the state by yourself when the user logs out.
This is a bit painful process to handle. You will have to write code to manage serialization and deserialization of JSON to Local Storage. To ease this, it is better if you have the same state management solution across all micro-apps. I recommend the use of Redux/MobX to do this. But if you are using Redux for React, Ng-Rx for Angular and Vuex for Vue, then you will not have any ready-made solution.
Also, when you are saving the state to Local Storage, either debounce it or do it lazily with little delay for performance reasons.
We are using micro-frontends for last two years and we use the mix of Local and Session storage to do our things. Luckily, for all the apps we use Redux, even with Vue, and that allows us to use redux-localstorage.
You can also use Cookies but it is generally better to avoid them.

Answer 2

1st, Custom element creation
I have worked for micro-front-end elements base architecture with #Angular/element module. As I worked, I used bellow flow
For code, I have followed build-a-micro-frontend-application-using-angular-elements.
Here it will provide you elements like native html elements.
2nd, Another good approach is to use library feature in angular. You can write your components, directive or pipe, then publish them or use them into other project directly. In this approach again you can reuse the same code.
3rd, We can use i-frame, but now days it is causing lot of security issues from browser.

Answer 3

Another option is to use a frontend event bus like EEV. Your application shell would be responsible for creating a shared event listener. Then each micro-frontend could emit events on that shared channel.
You could also use an RxJS Subject as a message bus within your App Shell and subscribe to it in the Micro Frontend Applications. Here's an example
I hope that gives you a couple additional ideas.

Answer 4

I came across same scenario where i have to pass the data from one micro-app to another.
and after lot of R&D i found that event based communication is the best , where i transfer the data in form on Event Objects.
here is some Example:
For sending data:
var event = new CustomEvent('userData', { "detail": { "id": id, ...rec } });
window.dispatchEvent(event);
and for receiving the data on other app is:
window.addEventListener("userData", function (e: CustomEvent) {
this.id = e.detail.id;
this.country = e.detail.country;
this.contact = e.detail.contact;
this.company = e.detail.company;
this.changeDetectorRef.detectChanges();
}.bind(this));
This approach does not need the DB communication.
Hope this will resolve your query!!!
Happy Coding!!!