Micro frontend architecture advice

I would like to add my 2¢ to the topic of possible architectural solutions for frontend's microservices:

1. OpenComponents used by OpenTable – https://github.com/opentable/oc
2. Mosaic by Zalando – https://www.mosaic9.org/

Hope you find them useful.

Since your question is somewhat broad, I will only address your inquiries about the usage of Iframes, since advising you on architecture is pointless, without knowing the circumstances (target group?, mobile?, what are the KPIs? (performance, initial load, development costs, re-usability, ...)

Iframes are good for "total" isolation (code + style), no other approach will give you this, however because of this, they have a lot of drawbacks:

• sharing data between iframes needs orchestration in the outer AND the inner SPAs, that involves setting up additional security measures (because each SPAs is exposed)
• styling your inner SPAs by the outer one, will only work, when they are on the same domain and needs additional JS code
• sharing cookies only works, if the inner SPAs are on the same domain as the outer SPAs
• performance-wise each Iframe needs to load everything by itself; re-using assets, libraries etc. is very difficult and involves meddling with the tooling of each SPA.

Usually, if you have everything under your control going with a real micro frontend approach is the better solution than Iframes.

You might try PuzzleJs. It is designed to be framework solution to micro frontends architecture for both gateway and storefront. It is being used on production of our high traffic e-commerce website. You should really check it out.

It actually covers almost all of your requirements.

• Independent Deployments
• Independent Source Code
• Independent Technologies

And about the iframe solution, it might get hard to manage things like CORS and communication with other iframes.

But micro frontends solution is not still perfect. There are lots of complexities when you really dive deep into it.

Some assets will try to declare same variable in global scope and sometimes they will have different versions that will cause error. So teams won't be fully independent from each other.

Logging and monitoring gets extreme hard. Tools like New Relic will help you but it won't be enough. You should implement custom monitoring and error reporting tools.

Keeping applications dockerized and auto-scale friendly is really important. With this architecture if you have 4 gateways and a storefront it can be tricky.

Initial cost of implementing micro-frontends architecture is quite high. You should consider your time and developer resource carefully

Performance is the most important thing. You don't want to download react or other libraries for more than one time because multiple teams are using them. You should implement DllPluginn to remove duplicated codes. And it will make everything harder.

And there are lots of other problems that I couldn't remember. If you don't have more than 50 developers working on same storefront project, micro front-ends is an overkill decision.