Micro frontend architecture advice

Question

We have several web applications that we wish to present under one single page application. We are looking for a micro-frontend architecture/framework to use. As we see it,

Answer 1

You can look at ShadowDom v1.1 as an alternative to Iframe. I recently work & deploy banking app using this technique to isolate the styling of parent app (which is a stateful application with jsp server-side template) But this only give you styling isolation.

It's better to have different code base for each child application. That way, you can develop them independently, migrate to different Angular version, and deploy seperately. Shared component & proprietary 3rd party library can be published as node_module where you can import it into each child applications. (I imagine that you should have private/internal artifactory respository setup)

Inter communication between child app can be done with localStorate/sessionStorage. You can further wrap them up as a shared service & again publish as node_module dependency.

** Setup

yourcompany.com --> parent app

yourcompany.com/app1.html --> child app 1 - bootstrap application with bundled js files & css yourcompany.com/app2.php --> child app 2 - bootstrap application with bundled js files & css yourcompany.com/app3.jsp --> child app 3 - bootstrap application with bundled js files & css

** or using sub domain

yourcompany.com --> parent app

app.yourcompany.com --> child app 1

blog.yourcompany.com --> child app 2

home.yourcompany.com --> child app 3