Communication Mechanisms and Domain Events

Communication mechanisms

In a micro front-end application, we will need to have some sort of communication mechanism between each of the front-ends. The mechanism we use for this communication will be different based on which micro front-end solution we choose to proceed with.

As an example of front-end-to-front-end communication, how does our application know when to show the list of products and when to show the shopping cart? How does each front-end know whether the user is a registered user or not?

Iframe-based micro front-ends can use the postMessage method to send messages across an iframe boundary. As discussed earlier, this method needs to ensure that messages are not susceptible to cross-site scripting attacks, and as such, each frontend domain must be known and trusted by the other domains that may wish to send or receive messages.

The postMessage method of communication allows any data to be sent as part of the message itself. As long as the origin of the message is trusted, we can send complete JavaScript objects across the iframe boundary to be interpreted by the receiving iframe as they see fit.

JavaScript-based micro front-end mechanisms tend to use URL paths for communication between front-ends. This means that each front-end must understand what is required of it to display when a specific URL is encountered.

This technique is fairly simple to implement, as most JavaScript frameworks are able to interpret routes easily and respond accordingly. The use of URL paths, however, is fairly coarse-grained and is a limited mechanism for effective communication.