3

I have an old legacy app built in AngularJS (Angular 1), making framework changes or any other major changes is not feasible at this point.

There is new app built using newer stack and its standalone app in itself. I need to render this new app in old legacy app.

I could achieve this using iframe- 

<div id="i-am-old-app">
    <iframe src="www.mynewapp.com/index.html"></iframe>
</div>

I could use custom web component.

<div id="i-am-old-app">
    <my-new-app-web-component></my-new-app-web-component>
</div>

What are other best possible approaches I could use ? Main aim is to have performant app, and no new deployment in old app should be needed if new app has code update.

Don
  • 1,334
  • 1
  • 10
  • 18

1 Answers1

1

You can try using one of the following approaches

  1. https://martinfowler.com/articles/micro-frontends.html
  2. https://single-spa.js.org/

The second one is a framework for the micro-frontend architecture. The first one is a approach of implementing micro-frontends by yourself. It is well explained and it has a really cool example which is really helpful at the beggining :)

AdamKniec
  • 1,607
  • 9
  • 25