We have several web applications(angular 7+) 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, these are our options for implementation:
Using the single-spa open-source framework: https://github.com/CanopyTax/single-spa Using Iframes (friendly Iframes) the hosting application (the shell) and loading each application according to the current URL. Using web components. Other? The current state is a monolith FE application that consumes the other child-application as internal applications via IFRAME (This approach is not scalable for us, because the hosting application is building all the products together, and nothing is really separated.)
Our requirements are the usual requirements for micro-frontend: Independent development - Each team can work on their own repo and build their products regardless of the other products.
Independent deployment - Each application can be upgraded in production without the downtime and without interfering with the other applications.
Shared components - We're using Angular7 in our applications, and we have a proprietary 3rd party library (shared components and logic) that we've already written that should be shared among all of the products for similar look and feel.
We would like to have the ability to upgrade each application's framework (Angular, RXjs, Typescript, etc and also for our proprietary component library) without caring about the other applications.
We tried to use the single-spa framework but we have some issues and we are currently found our-self thinking if this is the right approach for us, or should we try a different approach.
The issues we have using the single-spa are:
- Assets loading is problematic. (We must have the assets files on the root folder of the hosting application, and we suffer from assets conflicts when switching to another application).
- We still don't know how to handle global styling for all applications (We use sass for styling and it must have complied together with the local styles for each application)
- Upgrade angular framework (or all other frameworks) is not possible for one application, it's all or nothing (since we have one instance of angular).
- We have to implement a different bundling for development another side of the hosting application (the shell).
When we think about the Iframe (using friendly Iframe) solution, we visualize a full separation between all child-application. Communication is via a post message alone. In this approach can we separate UI Code out of this and make APIS alone to work via IFRAME
Are there any pitfalls for using Iframes?
A more general implementation was to create a web component with a custom element, but we need to support IE11 and Edge which do not support native encapsulation, so we would need to test our app in every site where it is used, to make sure they are not breaking our styles, also I don't know whether a web component can manage child routes or not.
The ideal solution should allow our PARENT application to request the child applications via routes without any coupling between them in terms of resources and assets and should be independent in these terms. Another major feature we need is these applications should have a notification mechanism across them.
Thanks in Advance.
