Try to access/change DOM from within an MFE(react based)

Micro Frontends
#1

What is the best possible way to make amendments/changes to template DOM elements from inside and MFE. For our use case it’s an React based MFE. We are using window event bus for inter-MFE communication, which works fine but unsure on how to change the DOM(which we have defined as part of Page template) properties using an MFE.

It’s not a recommended way to change DOM elements from directly inside a React App.

#2

Hi Anubhav,
can you explain better which is your need / use case? Entando has currently no apis that allow you to change external DOM elements. But I’m not sure to have catch your needs correctly.

#3

Hi @germanogiudici,
So basically the use case is to be able to show/hide the MFE’s or better more to be able to do some layout changes. For instance given a page with two MFE’s, now on click on some button/some action performed on the first MFE should hide the second MFE on the page.

I know we can use an event bus(pub/sub) model and achieve this by showing and hiding the MFE using it’s tag name and changing it’s style like below

let x = document.getElementsByTagName(“my-xyz-widget”);
x[0].style.display = “none”;

But was wondering that is it the right way or a correct approach to do the same?
Or is there any better way to achieve the same.
Imagine scaling this to 100 MFEs.
Won’t a library or API’s will be better to achieve something like this?
Please let me know your thoughts on above. Thanks in advance.

#4

Hey, @anubhav.

@germanogiudici will likely have his own take on this but the short story is that right now we leave that up to the MFE developer. We see teams use Entando in a variety of ways - single page applications, pages constructed using the App Builder with a single MFE, and pages with multiple MFEs. If you use the Entando blueprint (skeleton of a project with spring boot backend and react MFE frontend) then you’ll see an example of the last kind, multiple MFEs on a page communicating via events. Our Standard Banking Demo (https://dev.entando.org/v6.3.2/tutorials/samples/install-standard-demo.html, especially the Dashboard page) favors that pattern.

We’ve discussed providing a library or utility to help with the problem you’ve described. We’re actually working on a next generation composition layer, more dynamic than our current Freemarker-based model, which will have elements of that but we don’t have a firm ETA on it yet.

Cheers,
Nathan

1 Like
#5

Hi anubhav, if you need something like that you have two paths:

  1. go with a father MF managing the layout and use the other MF inside of it. Be aware that in that case you will loose part of the benefit of the low code composition that is out of the box with entando.
  2. If you need something simpler you can create some javascript simple apis (using for example the dom apis as your example) and insert it in the pages using UX fragments

Cheers

#6

Thanks @nathan.shaw & @germanogiudici,
Point 2 is exactly what we are planning to implement for now.