title: Micro frontend architecture advice
body: <p>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, these are our options for implementation:</p>
  <ol>
  <li>Using the single-spa open source framework: <a href="https://github.com/CanopyTax/single-spa" rel="nofollow noreferrer">https://github.com/CanopyTax/single-spa</a></li>
  <li>Using Iframes (friendly Iframes) the hosting application (the shell) and loading each application according to the current url.</li>
  <li>Writing our own Javascript framework</li>
  <li>Other?</li>
  </ol>
  <p>The current state is a monolith FE application that consumes the other child-application as internal 3rd party packages.
  This approach is not scalable for us, because the hosting application is building all the products together, and nothing is really separated.</p>
  <p>Our requirements are the usual requirements for micro-frontend:</p>
  <ol>
  <li><p>Independent development -
  Each team can choose their own frameworks and build their products regardless the other products.</p>
  </li>
  <li><p>Independent deployment -
  Each application can be upgraded in production without downtime and without interfering the other applications.</p>
  </li>
  <li><p>Shared components -
  We're using Angular4 in our applications, and we have a proprietary 3rd party library (shared components and logic) that we've already wrote that should be shared among all of the products for similar look and feel.</p>
  </li>
  <li><p>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.</p>
  </li>
  </ol>
  <p>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.</p>
  <p>The issues we have using the single-spa are:</p>
  <ol>
  <li>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).</li>
  <li>We still don't know how to handle global styling for all applications (We use sass for styling and it must be complied together with the local styles for each application)</li>
  <li>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).</li>
  <li>We have to implement a different bundling for development other side the hosting application (the shell).</li>
  </ol>
  <p>When we think about the Iframe (using friendly Iframe) solution, we visualize a full separation between all child-application, and tend to believe this is a more suitable approach for us.</p>
  <p>Are there any pitfalls for using Iframes?</p>