Technology agnostic UI microservices

Patent metadata

Field	Value
Publication number	US-11170065-B2
Application number	US-202016785096-A
Country	US
Kind code	B2
Filing date	Feb 7, 2020
Priority date	Feb 7, 2020
Publication date	Nov 9, 2021
Grant date	Nov 9, 2021

Abstract

Described embodiments provide systems and methods for providing a web application composed of micro-frontends. The systems and methods can receive a request to access a micro-frontend of a user interface for a web-application from a client application executing on a client device. The systems and methods can retrieve one or more user interface specifications corresponding to a micro-service that provides the micro-frontend. The systems and methods can identify a plurality of resources used by the micro-service corresponding to the user interface specification. The systems and methods can add a plurality of tags to a web page based on the plurality of resources. The systems and methods can load the plurality of resources to establish data objects for the micro-service, in response to adding the plurality of tags to the web page, to construct a document object model for rendering via the client application executing on the client device.

First claim

We claim:

1. A method of providing a web application composed of micro-frontends, comprising:
receiving, by a layout service executing on one or more processors from a client application executing on a client device, a request to access a micro-frontend of a user interface for a web application composed of a plurality of micro-frontends provided via a plurality of heterogeneous micro-services;
retrieving, by the layout service responsive to the request, one or more user interface specifications corresponding to a micro-service of the plurality of heterogeneous micro-services that provides the micro-frontend;
identifying, by the one or more processors, a plurality of resources used by the micro-service of the plurality of heterogeneous micro-services corresponding to the one or more user interface specifications;
adding, by the layout service, a plurality of tags to a web page based on the plurality of resources identified for the micro-service of the plurality of heterogeneous micro-services; and
loading, by the layout service responsive to the addition of the plurality of tags to the web page, the plurality of resources to establish data objects for the micro-service of the plurality of heterogeneous micro-services in a JavaScript used by a framework to construct a document object model for rendering, via the client application executing on the client device, the micro-frontend of the user interface of the web application composed of the plurality of micro-frontends established by the plurality of heterogeneous micro-services.

2. The method of claim 1 , comprising onboarding, by the layout service using the one or more user interface specifications, the plurality of heterogeneous micro-services in a cache and a content delivery network that is accessible by the layout service during runtime.

3. The method of claim 1 , comprising:
storing, in cache accessible by the layout service, the one or more user interface specifications corresponding to the plurality of heterogeneous micro-services;
parsing the one or more user interface specifications to identify the plurality of resources associated with the plurality of heterogeneous micro-services; and
downloading, via a public network or using a default authentication policy, the plurality of resources for storage in a content delivery network by the layout service.

4. The method of claim 1 , comprising:
onboarding a first micro-service of the plurality of heterogeneous micro-services during a first release cycle; and
onboarding a second micro-service of the plurality of heterogeneous micro-services during a second release cycle different from the first release cycle, wherein the first micro-service and the second micro-service are used to provide the plurality of micro-frontends that compose the user interface of the web application.

5. The method of claim 1 , comprising:
receiving an update to a subset of the plurality of heterogeneous micro-services; and
onboarding the subset of the plurality of heterogeneous micro-services to provide the user interface of the web application composed of the plurality of micro-frontends established by the plurality of heterogeneous micro-services comprising the updated subset of the plurality of heterogeneous micro-services.

6. The method of claim 1 , wherein the plurality of heterogeneous micro-services are constructed using a plurality of different frameworks comprising at least two of React, AngularJS, or VueJS.

7. The method of claim 1 , comprising loading a plurality of cascade style sheets corresponding to the plurality of micro-frontends established by the plurality of heterogeneous micro-services to compose the user interface of the web application.

8. The method of claim 1 , comprising:
resolving conflicts between the plurality of heterogeneous micro-services; and
de-duplicating, during loading, the data objects used by the plurality of micro-frontends.

9. The method of claim 1 , comprising:
rendering at least two of the plurality of micro-frontends; and
communicating information between the rendered at least two of the plurality of micro-frontends using a JavaScript properties variable or a JavaScript context variables.

10. The method of claim 1 , wherein the user interface of the web application composed of the plurality of micro-frontends is rendered without an inline frame.

11. A system to provide a web application composed of micro-frontends, comprising:
one or more hardware processors executing a layout service configured to:
receive, from a client application executed on a client device, a request to access a micro-frontend of a user interface for a web application composed of a plurality of micro-frontends provided via a plurality of heterogeneous micro-services;
retrieve, responsive to the request, one or more user interface specifications corresponding to a micro-service of the plurality of heterogeneous micro-services that provides the micro-frontend;
identify a plurality of resources used by the micro-service of the plurality of heterogeneous micro-services corresponding to the one or more user interface specifications;
add a plurality of tags to a web page based on the plurality of resources identified for the micro-service of the plurality of heterogeneous micro-services; and
load, responsive to the addition of the plurality of tags to the web page, the plurality of resources to establish data objects for the micro-service of the plurality of heterogeneous micro-services in a JavaScript used by a framework to construct a document object model rendered, via the client application executing on the client device, the micro-frontend of the user interface of the web application composed of the plurality of micro-frontends established by the plurality of heterogeneous micro-services.

12. The system of claim 11 , wherein the layout service is further configured to onboard, using the one or more user interface specifications, the plurality of heterogeneous micro-services in a cache and a content delivery network that is accessible by the layout service during runtime.

13. The system of claim 11 , wherein the layout service is further configured to:
store, in cache accessible by the layout service, the one or more user interface specifications corresponding to the plurality of heterogeneous micro-services;
parse the one or more user interface specifications to identify the plurality of resources associated with the plurality of heterogeneous micro-services; and
download, via a public network or using a default authentication policy, the plurality of resources for storage in a content delivery network by the layout service.

14. The system of claim 11 , wherein the layout service is further configured to:
onboard a first micro-service of the plurality of heterogeneous micro-services during a first release cycle; and
onboard a second micro-service of the plurality of heterogeneous micro-services during a second release cycle different from the first release cycle, wherein the first micro-service and the second micro-service are used to provide the plurality of micro-frontends that compose the user interface of the web application.

15. The system of claim 11 , wherein the layout service is further configured to:
receive an update to a subset of the plurality of heterogeneous micro-services; and
onboard the subset of the plurality of heterogeneous micro-services to provide the user interface of the web application composed of the plurality of micro-frontends established by the plurality of heterogeneous micro-services comprising the updated subset of the plurality of heterogeneous micro-serv

Assignees

• Citrix Systems Inc

Inventors

• Tank Nagendra
• Khillar Shiv Prasad
• Shaik Saifulla
• Jaisinghani Kapil

Classifications

• G06F16/9574 Primary

  of access to content, e.g. by caching · CPC title

• G06F16/972

  Access to data in other repository systems, e.g. legacy data or dynamic Web page generation · CPC title

• G06F16/986

  Document structures and storage, e.g. HTML extensions · CPC title

• G06F16/9577 Primary

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