Communication between fragments
gAllegr opened this issue · 5 comments
I'm trying to use Tailor to build a microfrontend with 5-6 Angular 7 application.
I managed to compose the single page with all apps and I'm now trying to make them communicate.
What I'm trying to do
One application has a button that, when clicked, would send some information to another application.
What I've already tryed
HTML5 WebStorage API, but it doesn't work because applications are on the same window/tab.
Custom Event, but it seems that the event created in one Angular application is not passed to the container page (the one that compose all Angular apps).
I read this issue
Regarding passing data to fragments the only way is through the headers as you have already implemented.
There is no way to pass data between fragments composed on the same page?
If there is no way, will Skipper help with that communication handling?
Create custom events on the browser window object, this is the natural way to pass events within the browser.
https://developer.mozilla.org/en-US/docs/Web/API/Window/event
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
Example with native Custom events (redux aspect can be ignored)
Like microservices on the backend, microservices on the frontend can expose an API that other app can use. However, it comes with complexity and it often gives an unwanted effect where the apps become tightly coupled.
A better approach would be to let each app talk to an HTTP backend and have the other listen on that backend. That will keep the logic on the backend and contained, and will not tightly coupled the frontend.
I have answered to similar question here - #142 (comment).
We have used this extensively in our frontend and it worked out for us. We had a proper namespace for all event categories and documented them for teams use.
Thanks all for your answers.
I tried again using Custom Events, I was coding them in an improper way. Fragments now communicate correctly.