IP Library Granted Patent US 12,401,725
Granted Patent B2
US 12,401,725 · App. 18/460,272 · Granted Aug 26, 2025

Communication system for micro-frontends of a web application

Inventors: Alexandre Porcelli Bakos (Westford, MA); Tiago Fernandes (Campinas, BR); Eder Ignatowicz (Cambridge, MA)
Assignee: Red Hat, Inc.
H04L67/147H04L67/02H04L67/51
View Patent ↗
Loading inventors, assignments & file history…
Monitor This Case
Get email alerts when status or documents change.
Order Certified Copies
Most orders are placed with the USPTO same day — all within 24 business hours.
Order via The Patent Place →
Pre-filled with this patent's details
Quick Facts
Patent No.
US 12,401,725
App. No.
18/460,272
Granted
Aug 26, 2025
Kind
B2
Abstract

A communication system for a micro-frontend architecture can include a first message handler associated with a requestor of data and a second message handler associated with a requestee. The requestor can be a wrapper application or a micro-frontend, and the requestee can the other of the wrapper application or the micro-frontend. In response to receiving a data request from the requestor, the first message handler can transmit a request message via a communication channel to the second message handler, where the request message includes a unique identifier assigned to the request. Thereafter, the first message handler can receive a response message from the second message handler via the communication channel, where the response message includes the data and the unique identifier. Based on the unique identifier in the response message, the first message handler can provide the data to the requestor in a response to the request.

Claims (92)

1. A server comprising:

a processor; and

a memory including program code that is executable by the processor for causing the processor 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.

2. The server of claim 1 , wherein the first message handler is further configured to:

extract a message handler identifier (MHI) from the response message;

determine whether the MHI corresponds to the first message handler; and

in response to determining that the MHI corresponds to the first message handler, provide the data in the response message to the wrapper application.

3. The server of claim 2 , wherein the MHI is a first MHI, the response message is a first response message, and the first message handler is further configured to:

receive a second response message via the communication channel;

extract a second MHI from the second response message; and

in response to determining that the second MHI does not correspond to the first message handler, ignore the second response message.

4. The server of claim 1 , wherein the first message handler is configured to:

receive the request from the wrapper application;

generate the unique identifier for the request;

generate and return a browser object to the wrapper application based on the request;

generate a mapping that includes a correlation between the browser object and the unique identifier; and

subsequent to receiving the response message via the communication channel:

extract the unique identifier from the response message;

determine that the browser object corresponds to the response message based on the correlation in the mapping; and

in response to determining that the browser object corresponds to the response message, resolve the browser object with the data to provide the wrapper application with the data.

5. The server of claim 1 , wherein the communication channel is a messaging bus.

6. The server of claim 1 , wherein the request is in a first format, and wherein the request message is in a second format that is different from the first format.

7. The server of claim 1 , wherein the first message handler is separate from the wrapper application.

8. The server of claim 1 , wherein the second message handler is separate from the micro-frontend.

9. 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.

10. The method of claim 9 , wherein the first message handler is further configured to:

extract a message handler identifier (MHI) from the response message;

determine whether the MHI corresponds to the first message handler; and

in response to determining that the MHI corresponds to the first message handler, provide the data in the response message to the wrapper application.

11. The method of claim 10 , wherein the MHI is a first MHI, the response message is a first response message, and the first message handler is further configured to:

receive a second response message via the communication channel;

extract a second MHI from the second response message; and

in response to determining that the second MHI does not correspond to the first message handler, ignore the second response message.

12. The method of claim 9 , wherein the wrapper application is configured to communicate with a plurality of micro-frontends in the browser window via a plurality of message handlers, wherein the plurality of micro-frontends including a first micro-frontend that is executable in a first context of the browser window and a second micro-frontend that is executable in a second context of the browser window, the second context being distinct from the first context.

13. The method of claim 12 , wherein the first context is an iFrame and the second context is external to the iFrame.

14. The method of claim 9 , wherein the first message handler is configured to:

receive the request from the wrapper application;

generate the unique identifier for the request;

generate and return a promise object to the wrapper application based on the request;

generate a mapping that includes a correlation between the promise object and the unique identifier; and

subsequent to receiving the response message via the communication channel:

extract the unique identifier from the response message;

determine that the promise object corresponds to the response message based on the correlation in the mapping; and

in response to determining that the promise object corresponds to the response message, resolve the promise object with the data to provide the wrapper application with the data.

15. The method of claim 9 , wherein the request specifies a function to be executed by the micro-frontend, and wherein the micro-frontend is configured to:

obtain the data by executing the function; and

return the data to the second message handler for communication to the first message handler.

16. 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.

17. The non-transitory computer-readable medium of claim 16 , wherein the first message handler is configured to:

receive the request from the wrapper application;

generate the unique identifier for the request;

generate and return a promise object to the wrapper application based on the request;

generate a mapping that includes a correlation between the promise object and the unique identifier; and

subsequent to receiving the response message via the communication channel:

extract the unique identifier from the response message;

determine that the promise object corresponds to the response message based on the correlation in the mapping; and

in response to determining that the promise object corresponds to the response message, resolve the promise object with the data to provide the wrapper application with the data.

18. The non-transitory computer-readable medium of claim 16 , wherein the request message specifies a function name and arguments for a function to be executed by the micro-frontend, and wherein the micro-frontend is configured to:

obtain the data by executing the function based on the function name and arguments specified in the request message; and

return the data to the second message handler for communication to the first message handler.

19. The non-transitory computer-readable medium of claim 16 , wherein the second message handler is configured to:

receive the data from the micro-frontend; and

generate the response message based on the data; and

transmit the response message to the first message handler via the communication channel.

20. The non-transitory computer-readable medium of claim 16 , wherein the wrapper application is configured to communicate with a plurality of micro-frontends in the browser window via a plurality of message handlers, wherein the plurality of micro-frontends including a first micro-frontend that is executable in a first context of the browser window and a second micro-frontend that is executable in a second context of the browser window, the second context being distinct from the first context.

Assignments (2)
CHANGE OF NAME Recorded Mar 3, 2026
From: RED HAT, INC.
To: RED HAT, LLC
Reel/Frame 074913/0759 →
ASSIGNMENT OF ASSIGNOR'S INTEREST Recorded Sep 1, 2023
From: BAKOS, ALEXANDRE PORCELLI; FERNANDES, TIAGO; IGNATOWICZ, EDER
To: RED HAT, INC.
Reel/Frame 064778/0976 →
Continuity (2)
Continuation 17372783 · Jul 12, 2021
Related Publication 20230412694A1 · Dec 21, 2023
References Cited (53)
US 6766333B1 · Wu et al. · 2004 [cited by applicant]
US 9430808B2 · Fortini et al. · 2016 [cited by applicant]
US 9971748B2 · Kim et al. · 2018 [cited by applicant]
US 9971826B1 · Belmar · 2018 [cited by applicant]
US 11042209B2 · Stoffel et al. · 2021 [cited by applicant]
US 11778045B2 · Bakos · 2023 [cited by examiner]
US 12067429B2 · Fernandes · 2024 [cited by examiner]
US 20060013367A1 · Sawyer et al. · 2006 [cited by applicant]
US 20070198907A1 · Degala et al. · 2007 [cited by applicant]
US 20080177994A1 · Mayer · 2008 [cited by applicant]
US 20110179040A1 · Bessonov et al. · 2011 [cited by applicant]
US 20110289404A1 · Fleur et al. · 2011 [cited by applicant]
US 20120278698A1 · Hu et al. · 2012 [cited by applicant]
US 20140241216A1 · Cheng et al. · 2014 [cited by applicant]
US 20150256504A1 · Beausoleil et al. · 2015 [cited by applicant]
US 20180121217A1 · Jarabek · 2018 [cited by examiner]
US 20180314308A1 · Savidis et al. · 2018 [cited by applicant]
US 20210064675A1 · Chugh et al. · 2021 [cited by applicant]
US 20210247882A1 · Norman et al. · 2021 [cited by applicant]
US 20210279403A1 · Strimpel et al. · 2021 [cited by applicant]
US 20210365290A1 · Zhang et al. · 2021 [cited by applicant]
US 20230009811A1 · Bakos · 2023 [cited by examiner]
US 20230066058A1 · Yadav et al. · 2023 [cited by applicant]
US 20230297444A1 · Fernandes · 2023 [cited by examiner]
US 20230412694A1 · Bakos · 2023 [cited by examiner]
CN 111209104A · 2020 [cited by applicant]
CN 111694633A · 2020 [cited by applicant]
CN 112217671A · 2021 [cited by applicant]
CN 112363857B · 2021 [cited by applicant]
CN 113254050A · 2021 [cited by applicant]
CN 113434034A · 2021 [cited by applicant]
CN 113626124A · 2021 [cited by applicant]
CN 113783929A · 2021 [cited by applicant]
KR 20210157246A · 2021 [cited by applicant]
U.S. Appl. No. 17/698,687, “Final Office Action”, Sep. 21, 2023, 17 pages. [cited by applicant]
Nadamoto, et al., “A Comparative Web Browser (CWB) for Browsing and Comparing Web Pages”, WWW '03: Proceedings of the 12th international conference on World Wide Web, May 2003, pp. 727-735. [cited by applicant]
U.S. Appl. No. 17/698,687, “Notice of Allowance”, Apr. 16, 2024, 10 pages. [cited by applicant]
Rosli, et al., “Clustering Analysis for Malware Behavior Detection Using Registry Data”, International Journal of Advanced Computer Science and Applications, vol. 10, https://thesai.org/Downloads/Volume10No12/Paper_13-C… [cited by applicant]
U.S. Appl. No. 17/698,687, “Advisory Action”, Nov. 30, 2023, 3 pages. [cited by applicant]
U.S. Appl. No. 17/698,687, “Non-Final Office Action”, Jan. 5, 2024, 19 pages. [cited by applicant]
Tasaka, et al., “A Web Synchronization Method for Supporting Real and Non-real-time Web Communication”, Institute of Electrical and Electronics Engineers, 2013. [cited by applicant]
“6 Steps to your Angular-Based Microfrontend Shell”, ANGULAR Architects, Available Online at: https://www.angulararchitects.io/en/aktuelles/6-steps-to-your-angular-based-microfrontend-shell/, Nov. 22, 2019, pp. 1-15. [cited by applicant]
“Gracefully Scaling Web Applications with Micro-Frontends: Part II”, Collective Health, Available Online at: https://eng.collectivehealth.com/gracefully-scaling-web-applications-with-micro-frontends-part-ii-8fa730d05b14… [cited by applicant]
“These are Chat Archives for Angular/Angular”, Gitter, Available Online at: https://gitter.im/angular/angular/archives/2018/01/12?at=5a58ae79ae53c15903dc3168, Jan. 12, 2018, 1 page. [cited by applicant]
“Using Channel Messaging”, Web APIs, MON Web Docs, Available Online at: https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging, Accessed from Internet on Jul. 15, 2021, pp. 1-14. [cited by applicant]
U.S. Appl. No. 17/372,783, “Non-Final Office Action”, Sep. 22, 2022, 16 pages. [cited by applicant]
U.S. Appl. No. 17/372,783, “Notice of Allowance”, Jun. 5, 2023, 10 pages. [cited by applicant]
U.S. Appl. No. 17/372,783, “U.S. Patent Application No.”, Jul. 12, 2021, 72 pages. [cited by applicant]
U.S. Appl. No. 17/698,687, “Non-Final Office Action”, Apr. 12, 2023, 13 pages. [cited by applicant]
Mehta, et al., “WattsApp: Power-Aware Container Scheduling”, Association for Computing Machinery, Available Online at: https://arxiv.org/pdf/2006.00342.pdf, May 30, 2020, pp. 1-13. [cited by applicant]
Mezzalira, “Building Micro-Frontends, Chapter 4. Discovering Micro-Frontend Architectures”, O'Reilly Media, Inc., Nov. 17, 2021, 50 pages. [cited by applicant]
Miao, et al., “Supporting Concurrent Design by Integrating Information Sharing and Activity Synchronization”, GMD—German National Research Center for Information Technology, Jan. 1999, 10 pages. [cited by applicant]
Peltonen, et al., “Motivations, Benefits, and Issues for Adopting Micro-Frontends: A Multivocal Literature Review”, Information and Software Technology, vol. 136, Aug. 2021, pp. 1-18. [cited by applicant]