Help defining architecture - async messaging; web app as portal in web page

Question

I don't know if this is a legitimate architecture that I've been playing with. It consists of nodejs servers for services and to create web app front ends. And it is using async messaging (Redis) to communicate between services. And socket.io to implement full duplex comms between server and web apps.

So far in my example "stock portfolio" app this is working as desired (simple implementation with contrived data).

The goal of this architecture is to be fully decoupled through the use of messaging. The services follow some API / Protocol and can publish and subscribe to desired channels. Then this leads to alternative implementations of services and there will be some kind of broker to manage these situations. I'm not up to that.

I'm stuck on having multiple web apps that exist inside or alongside each other. For example there is one that is for managing the portfolio where users can enter in stocks they own. And another that manages funds. And another that displays data for all these. And another for graphs. The intention being that these are also loosely coupled.

At the moment I have one React app that displays graphs from contrived data (updated dynamically and redraw via socket.io).

How do I create such embedded web apps that need to be dynamic? If the web app server was known about before hand then you could add the url in an <iframe. But the intention is that some service would be providing the web app and it should send a message saying 'here is the url for my web app' that I want to display.

Does this sound sensible? What is the best way to achieve the multiple web apps? Are there any examples of this?

What about security issues (I've only thought about defining my own services and not allowing it open to the internet; but I might want to allow a more flexibly generalised approach)?

Answer 1

I had no traction on this question here so I asked the pure technical one at https://stackoverflow.com/questions/51172037/dynamic-portals-in-react-web-app and received an accepted reply to that - https://stackoverflow.com/a/51174869/1019307.

render() {
   const { iFrameSrc } = this.state    
   // if You have the source, return the iframe
   if (iFrameSrc) return <iframe src={iFrameSrc} />

   // if you dont have the source, render default
   return null;
}

I was also hoping for some comments on the architecture. I'll work on it a bit more first.