How to load web applications on runtime?

Question

I'm going through the concept of Micro frontends for the past few days. In Micro frontends, we create bundles of all applications wherein each bundle represents a separate web application and finally we write logic to communicate with these bundles in our base application.

For e.g., let's say we have APP 1, APP 2, and APP 3 are our Micro frontends which we bundled and used in BASE APP.

Is there any way to dynamically load these apps at runtime and without having to create a bundle of individual applications?

I'm aware that we can use iFrame but it doesn't allow cross-origin access to iFrames

This is heavily dependent on context. Loading an app, can be as simple as dynamically adding a script element to the webpage, or as complex as figuring out shared components, lifecycle events, communication protocols, etc. The question of cross-origin (and other security mechanisms like CSP) certainly matters, but do you really need to cross origin? You tagged you question with “angular” – should we assume all apps us it? Or is just the base app in Angular and child apps use different setup? How are the apps build? What serves the HTML page, where is compiled JavaScript hosted? — F4-Z4, May 02 '21 at 16:34
Even this is just the tip of the ice berg. If you’re starting with a new project, don’t start with microfrontends. If you want to optimise code delivery, just use code splitting or some other technique. If you really need microfrontends (the only reason I can think of is organisational complexity of multiple teams working on the same code – any other reason hardly justifies the complexity or performance impact). Check out the extensive intro article from one of the originators of the idea, Cam Jackson: https://martinfowler.com/articles/micro-frontends.html. Bundling and loading is covered. — F4-Z4, May 02 '21 at 16:45

score 0 · Answer 1 · answered May 04 '21 at 16:09

Their are few things that can help with this, the best know is Single SPA, which allows you to load them all into the same page without using iFrames.

https://single-spa.js.org

If you want to use iFrames, then you will have to use the PostMessageAPI to communicate between them to get around the cross-domain issues.

There are other options, in 2019 Martin fowler wrote an overview of these that is going to be more useful than anything more I might add here.

https://martinfowler.com/articles/micro-frontends.html#IntegrationApproaches

score 0 · Answer 2 · edited May 09 '21 at 03:12

I think this resource should be more helpful for you:

https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/

The key search term here is "Angular Module Federation", which was introduced I think in version 11 for this particular reason to be able to load Angular Modules on runtime.

I've read throug it and it's very promising to be able to built a mircofrontend like thing with angular.

Edit:

And maybe also this npm package: https://www.npmjs.com/package/@angular-architects/module-federation

Module Federation allows loading separately compiled and deployed code
(like micro frontends or plugins) into an application. This plugin makes
Module Federation work together with Angular and the CLI.

How to load web applications on runtime?

2 Answers2