Communication system for micro-frontends of a web application

A system comprising:

• a processor;
• and
• a memory that is communicatively coupled to the processor, the memory including:
• wrapper application code for a wrapper application that is executable in a browser window;
• micro-frontend code for a micro-frontend that is executable in the browser window such that the micro-frontend is a child of the wrapper application in a document object model (DOM) hierarchy;
• and
• message handler code for a first message handler that is executable in the browser window, the first message handler being configured to:
• receive a request for data from a requestor, wherein the requestor is the wrapper application and the data is to be provided by the micro-frontend;
• generate a request message based on the request, the request message including a unique identifier of the request;
• transmit the request message via a communication channel to a second message handler associated with the micro-frontend;
• receive a response message from the second message handler via the communication channel, wherein the response message includes the data and the unique identifier, the second message handler being configured to generate the response message based on the data from the micro-frontend;
• and
• based on the unique identifier in the response message, provide the data to the wrapper application in a response to the request.

A method comprising:

• receiving, by a first message handler executing in a browser window of a computing device, a request for data from a requestor, wherein the requestor is a wrapper application and the data is to be provided by a micro-frontend, and wherein the wrapper application and the micro-frontend are executing in the browser window;
• generating, by the first message handler, a request message based on the request, the request message including a unique identifier of the request;
• transmitting, by the first message handler, the request message via a communication channel to a second message handler associated with the micro-frontend, wherein the second message handler is executing in the browser window;
• receiving, by the first message handler, a response message from the second message handler via the communication channel, wherein the response message includes the data and the unique identifier, the second message handler being configured to generate the response message based on the data from the micro-frontend;
• and
• based on the unique identifier in the response message, providing, by the first message handler, the data to the wrapper application in a response to the request.