Systems and methods for presenting web application content

Patent metadata

Field	Value
Publication number	US-11080354-B2
Application number	US-201916555971-A
Country	US
Kind code	B2
Filing date	Aug 29, 2019
Priority date	Aug 29, 2019
Publication date	Aug 3, 2021
Grant date	Aug 3, 2021

Abstract

Methods, systems, and computer-readable medium are disclosed for presenting web application content. For example, a computer-readable medium may include instructions executable by one or more processors to perform operations including: executing a parent application using a web browser, the parent application being a single page application configured to display a web page element in the web browser; identifying a child application requested by a user action; obtaining, from a server system, child application code of the identified child application, the child application code defining a micro-frontend in a first programming language; transpiling the child application code from the first programming language to a second programming language executable by the web browser, to obtain a transpiled child application code renderable by the web browser; and rendering the transpiled child application code so that the micro-frontend is displayed in the web browser.

First claim

What is claimed is:

1. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computer system, cause the one or more processors to perform operations for presenting web application content, the operations including:
executing a parent application using a web browser, the parent application being a single page application configured to display a web page element and one or more of a plurality of child applications in the web browser;
registering, by a navigation framework library, a child application of the plurality of child applications with the parent application such that the parent application and the child application identify and/or communicate with one another, wherein the parent application includes one or more shared interface components for each of the plurality of child applications;
identifying the child application requested by a user action;
obtaining, from a server system, child application code of the identified child application, the child application code defining a micro-frontend in a first programming language;
transpiling the child application code from the first programming language to a second programming language executable by the web browser, to obtain a transpiled child application code renderable by the web browser;
replacing existing child application code in a document object model of the parent application with the transpiled child application code such that the transpiled child application code is incorporated into the web page element; and
rendering the transpiled child application code and the web page element using the web browser, so that the micro-frontend is displayed in the web browser as part of the web page element.

2. The non-transitory computer-readable medium of claim 1 , wherein
the user action is indicative of a URL including a child application identifier, and
the identifying the child application includes identifying the child application based on the child application identifier.

3. The non-transitory computer-readable medium of claim 2 , wherein the user action is a command to navigate the web browser to the URL.

4. The non-transitory computer-readable medium of claim 2 , wherein the parent application includes a correspondence between the child application and the child application identifier.

5. The non-transitory computer-readable medium of claim 2 , wherein the obtaining the child application code includes:
based on the child application identifier, determining a child application URL corresponding to the child application; and
sending, to the child application URL, an asynchronous request requesting the child application code.

6. The non-transitory computer-readable medium of claim 1 , wherein
the micro-frontend is a first micro-frontend, and
the operations further include:
identifying, using the parent application, a second child application requested by a second user action, the second child application being associated with a second micro-frontend; and
displaying the second micro-frontend in the web browser as part of the web page element.

7. The non-transitory computer-readable medium of claim 6 , wherein the operations further include:
receiving, from the server system, second child application code of the second child application, the second child application code defining the second micro-frontend in a third programming language;
transpiling the second child application code from the third programming language to the second programming language, to obtain a transpiled second child application code renderable by the web browser;
replacing the first child application code in the document object model of the parent application with the transpiled second child application code such that the transpiled second child application code is incorporated into the web page element; and
rendering the transpiled second child application code and the web page element using the web browser, so that the second micro-frontend is displayed in the web browser as part of the web page element.

8. The non-transitory computer-readable medium of claim 7 , wherein
the first programming language is an ECMAScript-based language, and
the third programming language is an ECMAScript-based language different from the first programming language.

9. The non-transitory computer-readable medium of claim 1 , wherein the parent application is configured to display, in the web browser, a navigation graphical interface enabling a user of the web browser to request the child application to be displayed.

10. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computer system, cause the one or more processors to perform operations for presenting web application content, the operations including:
executing a parent application using a web browser, the parent application being a single page application configured to display a web page element and one or more of a plurality of child applications in the web browser;
registering, by a navigation framework library, each of a plurality of child applications with the parent application such that the parent application and each of the plurality of child applications identify and/or communicate with one another based on a registered correspondence between the plurality of child applications and a plurality of child application identifiers, wherein the parent application includes one or more shared interface components for each of the plurality of child applications;
upon detection, by the web browser, of a user command indicative of a first child application identifier, identifying, from the plurality of child applications, a first child application corresponding to the first child application identifier based on the registered correspondence;
transpiling child application code of the first child application from a first programming language to a second programming language executable by the web browser, to obtain a transpiled child application code;
replacing existing child application code in a document object model of the parent application with the transpiled first child application code such that the transpiled child application code is incorporated into the web page element; and
rendering the transpiled child application code and the web page element using the web browser, so that a micro-frontend is displayed in the web browser as part of the web page element.

11. The non-transitory computer-readable medium of claim 10 , wherein the user command is indicative of a URL including the first child application identifier.

12. The non-transitory computer-readable medium of claim 11 , wherein each of the plurality of child applications is stored in the computer system prior to the transpiling the child application code of the first child application.

13. The non-transitory computer-readable medium of claim 11 , wherein the operations further include:
based on the first child application identifier, determining a child application URL corresponding to the first child application;
sending, to the child application URL, an asynchronous request requesting the first child application code; and
receiving the first child application code, sent by a server system in response to the asynchronous request.

14. The non-transitory computer-readable medium of claim 10 , wherein
the micro-frontend is a first micro-frontend, and
the operations further include:
identifying, using the parent application, a second child application of the plurality of child applications requested by a second user action, the second child application being

Assignees

• Capital One Services Llc

Inventors

• Chugh Ashwani
• Abiraman Karthick

Classifications

• G06F16/9577

  Optimising the visualization of content, e.g. distillation of HTML documents · CPC title

• G06F40/14

  Tree-structured documents (parsing G06F40/205; validation G06F40/226) · CPC title

• G06F9/45529

  Embedded in an application, e.g. JavaScript in a Web browser · CPC title

• G06F8/51

  Source to source · CPC title

• G06F8/38

  for implementing user interfaces · CPC title