0

We have a set of microservices which all perform a specific function. To configure, operate and monitor these services, we have a single web application. This is currently still a monolith.

The microservices are deployed at our customers, but not all of them are needed by every customer. This means that the web application contains a lot of functionality which is not used by a customer and must be hidden from view.

We want to break up the web application, so that we can deploy only those UI components which a customer needs or for which he has a license.

For that we have been looking into micro frontends. However, none of the examples I've come across sofar touch upon the subject of multi tenancy and dynamic components.

Our application is currently written in React. I've been looking into Next.js, System.JS, Piral and Single-SPA as options for our solution, but cannot figure out if these tools can help with what we want to achieve.

So does anyone know of ways to create a container application which dynamically loads UI components of the deployed microservices backend?

Pieter
  • 3,339
  • 5
  • 30
  • 63
  • Add a permission microservice, and load the components if the logged in user has the permission present? – LoXatoR Sep 06 '21 at 12:20
  • That would be an option an part of the solution, but how does the frontend "know" which components are available? Would this work like a service registry? Tools like webpack need to know this compiletime (which is too early) and except for Piral (which is not at version 1 yet) I have not seen a tool which can use a configuration file, service etc. to load this dynamically. At least, I haven't seen documentation or examples explaining how if it is possible. – Pieter Sep 06 '21 at 12:46
  • The idea I mentioned won't work during compile time, at least not to my knowledge. We had a similar scenario where certain types of users could do certain things. So we would toggle the UI components based on a permission array that we would receive from the backend. I believe I used React Permissible to achieve this. So, the backend would have permissions mapped to each user, then once received it would be added to the redux store, so the whole front end app would have access to it and use it accordingly. – LoXatoR Sep 06 '21 at 18:01

1 Answers1

0

One of the strongest cases for microservices is to deploy and change them with strong isolation, so that:

  1. Easier to deploy new microservices dynamically.
  2. Easier to change existing ones without side-effects.
  3. Easier to remove services when necessary.

To apply microservices in frontend I think seeing whether these 3 points also apply is important in verifying we benefit from such architectures (as it is not as easy as just building a monolith).

I don't think "micro-frontends" are really a thing today but here are some ideas I have on how to implements them:

  1. Multi frontends - The application is divided into multiple frontends that look and feel like they are the same application. To make sure they all look the same you need some sort of library that all frontends use (or better - a single CDN where these resources such as css can be stored to allow dynamic changes to styling).
  • One example of this is AWS, each "aws service" has its own frontend (you can find this out by looking at the address). AWS looks like a unified application, but is divided to seprately maintained micro-frontends.
  1. Master frontend - A single application is given to the client, but this application embeds micro-frontends by using iframes. Again to make every micro-frontend look the same you need some sort of library. This method fits some applications better than others, since it has the big pro of having a single frontend. However this comes at a cost, as iframes are not perfect (https://www.ostraining.com/blog/webdesign/against-using-iframes/).
  • I suppose you could implement a Master frontend using next.js without iframes but I'm afraid its quite complicated as opposed to method #1.
Gonnen Daube
  • 197
  • 7