I would like to ask a question about the cross framework state sharing. In the above example you demonstrate state sharing in multiple React applications and thus you have no problem between them. In my opinion this is pointless and actually a waste of time and effort because you could achieve the exact same thing with a decent component structure inside one React application without having the need for single-spa.
My question is in the concept of micro frontends where you mix 2 or more different frameworks, such as React and Angular, how will you solve the state sharing issue in this scenario ?
Trying to implement the utility module pattern is not enough because in the case you are using Angular and React. One is JavaScript oriented and the other Typescript. One is built on top of RxJS and the other isn't. This is not, by any means, an issue to avoid or neglect.
Also need to remember that in the example above you used galactic state for global state with hooks. This may work perfectly with React but sure as hell won't with Angular. Will be glad if you also could share a utility that can work cross framework
I'm also wondering how in a Single Spa project that has a React Project and an Angular project would you share components from an Utility Module. I think the developer would be forced to implement both frameworks in the same Utility Module or create several utility modules? Will be honesty a pain in either way.
In my organization we just tried to use Single Spa because we thought the microservices idea in the frontend would be right for us. But we are seeing the ugly faces of it already.
I personally don't think microservices in the frontend are a good idea, at least just yet. In my very personal opinion a UI needs it's sections talking each other in a dynamic way, unless you are doing something very very custom and unique with very specific purpose. If that is the case and Single-Spa and this frameworks are only used in those weird unique cases, this entire micro frontends architecture will eventually fail and be forgotten.
We are seeing cases already of big companies like Trulia, leaving this architecture because in the long run became for them hard to maintain, it became the very thing they were running away from by adopting the micro frontend architecture in the very first place.
But back to your question, if you go down to a Single Spa project with React and Angular mfes, and need some Global State solution, which by the way, is according to them an anti pattern, because you are going against the decoupling of micro services. But if you just need it, you should be able to get what you want maybe with the Pub Sub pattern, I haven't try though, but it should work, as you are just publishing events in the DOM and subscribing to those events...
Thanks mate. This is exactly what i had in mind. It is still a mystery with mfe architecture and until someone comes with a battle tested approach we can only experiment trial and error all by ourselves. :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Ronaldo, thanks for the article.
I would like to ask a question about the cross framework state sharing. In the above example you demonstrate state sharing in multiple React applications and thus you have no problem between them. In my opinion this is pointless and actually a waste of time and effort because you could achieve the exact same thing with a decent component structure inside one React application without having the need for single-spa.
My question is in the concept of micro frontends where you mix 2 or more different frameworks, such as React and Angular, how will you solve the state sharing issue in this scenario ?
I've read the official docs and the official faqs and couldn't grasp the solution for this scenario.
Trying to implement the utility module pattern is not enough because in the case you are using Angular and React. One is JavaScript oriented and the other Typescript. One is built on top of RxJS and the other isn't. This is not, by any means, an issue to avoid or neglect.
Also need to remember that in the example above you used galactic state for global state with hooks. This may work perfectly with React but sure as hell won't with Angular. Will be glad if you also could share a utility that can work cross framework
Thank you,
waiting on your response.
You are 100 % correct.
I'm also wondering how in a Single Spa project that has a React Project and an Angular project would you share components from an Utility Module. I think the developer would be forced to implement both frameworks in the same Utility Module or create several utility modules? Will be honesty a pain in either way.
In my organization we just tried to use Single Spa because we thought the microservices idea in the frontend would be right for us. But we are seeing the ugly faces of it already.
I personally don't think microservices in the frontend are a good idea, at least just yet. In my very personal opinion a UI needs it's sections talking each other in a dynamic way, unless you are doing something very very custom and unique with very specific purpose. If that is the case and Single-Spa and this frameworks are only used in those weird unique cases, this entire micro frontends architecture will eventually fail and be forgotten.
We are seeing cases already of big companies like Trulia, leaving this architecture because in the long run became for them hard to maintain, it became the very thing they were running away from by adopting the micro frontend architecture in the very first place.
But back to your question, if you go down to a Single Spa project with React and Angular mfes, and need some Global State solution, which by the way, is according to them an anti pattern, because you are going against the decoupling of micro services. But if you just need it, you should be able to get what you want maybe with the Pub Sub pattern, I haven't try though, but it should work, as you are just publishing events in the DOM and subscribing to those events...
Thanks mate. This is exactly what i had in mind. It is still a mystery with mfe architecture and until someone comes with a battle tested approach we can only experiment trial and error all by ourselves. :)