Technology agnostic UI microservices
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.
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-services.
16. The system of claim 11 , wherein the plurality of heterogeneous micro-services are constructed using a plurality of different frameworks comprising at least two of React, AngularJS, or VueJS.
17. The system of claim 11 , wherein the layout service is further configured to load 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.
18. The system of claim 11 , wherein the layout service is further configured to:
resolve conflicts between the plurality of heterogeneous micro-services; and
de-duplicate the data objects used by the plurality of micro-frontends to load the plurality of resources.
19. A non-transitory computer readable medium storing program instructions for causing one or more processors 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.
20. The non-transitory computer readable medium of claim 19 , wherein the program instructions further cause the one or more processors 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 one or more processors during runtime.