DEV Community

Discussion on: Communication Between Micro Frontends

Collapse
vuesomedev profile image
Gábor Soós

Most of the time communications can be done with a WebComponent, properties/attributes and custom events or a method on the WebComponent...not with global window magic

Collapse
florianrappl profile image
Florian Rappl Author

I think you misunderstood the point.

Unfortunately, if you use WebComponents you already introduce "global window magic" as these need to be registered globally. That's actually far more worse as you'll need to have a proper naming scheme here. For instance, you cannot register the same name twice. So two microfrontends cannot register a custom element my-dropdown. Going beyond web components your custom events (as outlined in the article) are placed somewhere, too. Where do you add the listener here?

If you need decoupling you'll need a way to decouple. window (or any global) is one way - not the recommended way, but certainly a possibility and easy to illustrate.

Also if you have a web component from microfrontend A hosted at #mife-a and another web component from microfrontend B hosted at #mife-b how should they reach each other? They don't know each other and as such one component cannot determine the attributes of the other.

I think your comment is rather reflects that you did not really get in touch with the subject in full detail.

Collapse
vuesomedev profile image
Gábor Soós

Why do you think passing down props and listening to events is not decoupling? It is an interface and you listen to the events on the custom element itself. Clear and straightforward. How can you even communicate if you don't know the interface of the other one?

Name collision is an issue with any of the aforementioned solutions...you need a naming convention...if you have the same names, it hurts any of them.

Why seeing something as over architected makes me look as I haven't done micro frontends before?

Thread Thread
florianrappl profile image
Florian Rappl Author • Edited

You cannot pass down props (or attributes) because they are both in different areas and don't know each other (otherwise see the aggregator component - there you can do exactly what you want to do but in a safe and decoupled way).

Thread Thread
vuesomedev profile image
Gábor Soós

Sry I've meant attributes. You can get really far with attributes and events if the teams can agree upon the interface and doesn't change it often.

Some comments have been hidden by the post's author - find out more