Communication system for micro-frontends of a web application

A method comprising:

• receiving, by a server system, a webpage request from a client device;
• and
• in response to receiving the webpage request:
• providing, by the server system, wrapper application code and micro-frontend code to the client device, the wrapper application code being for a wrapper application executable in a browser window of the client device, and the micro-frontend code being for a micro-frontend executable in the browser window of the client device;
• and
• providing, by the server system, first message-handler code and second message-handler code to the client device, wherein the first message-handler code is for a first message handler executable in the browser window and the second message-handler code is for a second message handler executable in the browser window, the first message handler being associated with the wrapper application and configured to:
• receive a request for data from the wrapper application, wherein the data is to be provided by a 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 the 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 non-transitory computer-readable medium comprising program code that is executable by one or more processors for causing the one or more processors to:

• receive a webpage request from a client device;
• and
• in response to receiving the webpage request:
• provide wrapper application code and micro-frontend code to the client device, the wrapper application code being for a wrapper application executable in a browser window of the client device, and the micro-frontend code being for a micro-frontend executable in the browser window of the client device;
• and
• provide first message-handler code and second message-handler code to the client device, wherein the first message-handler code is for a first message handler executable in the browser window and the second message-handler code is for a second message handler executable in the browser window, the first message handler being associated with the wrapper application and configured to:
• receive a request for data from the wrapper application, wherein the data is to be provided by a 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 the 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.