Micro frontends with model-based state

Patent metadata

Field	Value
Publication number	US-11216602-B2
Application number	US-202016902931-A
Country	US
Kind code	B2
Filing date	Jun 16, 2020
Priority date	Dec 20, 2019
Publication date	Jan 4, 2022
Grant date	Jan 4, 2022

Abstract

This document describes a computing architecture that enables users to develop applications using building blocks that include micro frontends. In one aspect, a method includes providing a configuration user interface that enables a user to select and arrange building block user interface elements in a layout for a page. Data specifying a layout of one or more building block user interface elements that each include a micro frontend and corresponding backend logic is received from the configuration user interface. Each micro frontend includes one or more user interface components and a store that manages a model that represents a state of the one or more user interface components of the micro frontend. The corresponding backend for each micro frontend includes a function that updates the model of the micro frontend based on a previous model of the micro frontend and an action. User interface data is generated.

First claim

What is claimed is:

1. A method performed by one or more data processing apparatus, the method comprising:
providing a configuration user interface that enables a user to select and arrange building block user interface elements in a layout for a page;
receiving, from the configuration user interface, data specifying a layout of building block user interface elements that each include a micro frontend and corresponding backend logic, wherein:
each micro frontend includes one or more user interface components that are displayed on the page when the page is rendered and a store that manages a model that represents a state of the one or more user interface components of the micro frontend; and
the corresponding backend logic for each micro frontend includes a function that is configured to (i) update the model of the micro frontend based on a previous model received from the micro frontend and an action received from the micro frontend and (ii) provide the updated model to the micro frontend; and

generating user interface data that, when processed by an application, causes the application to generate the page that presents the one or more user interface components of each of the building block user interface elements in the layout specified by the received data, the generating comprising:
generating, based at least in part on the layout of the building block user interface elements, (i) respective declarative bindings between each micro frontend and the corresponding backend logic for the micro front end and (ii) respective declarative bindings between micro frontends of each group of two or more building blocks that are configured, by the user, to communicate with each other micro frontend in the group when the page is rendered.

2. The method of claim 1 , further comprising:
receiving data specifying that a first building block user interface element is a subscriber to messages generated by a second building block user interface element; and
generating a declarative binding between the first building block user interface element and the second building block user interface element.

3. The method of claim 1 , wherein the corresponding backend logic of each building block user interface element comprises one or more reducer functions.

4. The method of claim 3 , wherein a given user interface component of each building block user interface element comprises a corresponding action that is bound to a corresponding reducer function of the corresponding backend logic of the building block user interface element.

5. The method of claim 4 , wherein the store of each micro frontend is configured to send a current model maintained by the store and action data specifying a detected action to the corresponding reducer function in response to detecting the action.

6. The method of claim 5 , wherein each reducer function is configured to generate an updated model based on the current model and action data and provide the updated model to the store.

7. The method of claim 1 , wherein each of the one or more user interface components is bound to a respective attribute of the model.

8. The method of claim 7 , further comprising updating the one or more user interface components in response to receiving an updated model that includes updated attributes.

9. The method of claim 1 , further comprising receiving data defining custom business logic for the user interface.

10. The method of claim 1 , wherein generating the user interface data comprises:
detecting, in the layout of the building block user interface elements, a connection between a first building block user interface element and a second building block user interface element; and
in response to detecting the connection between the first building block user interface element and the second building block user interface element, enabling communication between the first building block user interface element and the second building block user interface element by generating a declarative binding between a first micro frontend of the first building block user interface element and a second micro frontend of the second building block user interface element.

11. The method of claim 1 , wherein the corresponding backend logic for at least one micro frontend included in the layout of building block user interface elements runs on a different server than the corresponding backend logic for at least one other micro frontend included in the layout of building block user interface elements.

12. A system, comprising:
one or more computers; and
one or more computer memory devices interoperably coupled with the one or more computers and having tangible, non-transitory, machine-readable media storing one or more instructions that, when executed by the one or more computers, perform operations comprising: providing a configuration user interface that enables a user to select and arrange building block user interface elements in a layout for a page;
receiving, from the configuration user interface, data specifying a layout of building block user interface elements that each include a micro frontend and corresponding backend logic, wherein:
each micro frontend includes one or more user interface components that are displayed on the page when the page is rendered and a store that manages a model that represents a state of the one or more user interface components of the micro frontend; and
the corresponding backend logic for each micro frontend includes a function that is configured to (i) update the model of the micro frontend based on a previous model received from the micro frontend and an action received from the micro frontend and (ii) provide the updated model to the micro frontend; and

generating user interface data that, when processed by an application, causes the application to generate the page that presents the one or more user interface components of each of the building block user interface elements in the layout specified by the received data, the generating comprising:
generating, based at least in part on the layout of the building block user interface elements, (i) respective declarative bindings between each micro frontend and the corresponding backend logic for the micro front end and (ii) respective declarative bindings between micro frontends of each group of two or more building blocks that are configured, by the user, to communicate with each other micro frontend in the group when the page is rendered.

13. The system of claim 12 , wherein the corresponding backend logic of each building block user interface element comprises one or more reducer functions.

14. The system of claim 13 , wherein a given user interface component of each building block user interface element comprises a corresponding action that is bound to a corresponding reducer function of the corresponding backend logic of the building block user interface element.

15. The system of claim 14 , wherein the store of each micro frontend is configured to send a current model maintained by the store and action data specifying a detected action to the corresponding reducer function in response to detecting the action.

16. The system of claim 15 , wherein each reducer function is configured to generate an updated model based on the current model and action data and provide the updated model to the store.

17. The system of claim 12 , wherein each of the one or more user interface components is bound to a respective attribute of the model.

18. The system of claim 17 , wherein the operations comprise updating the one or more user interface compone

Assignees

• Accenture Global Solutions Ltd

Inventors

• Bourhani Milad
• Bucci Fabio
• Lazzarini Marco

Classifications

• G06F3/0482

  Interaction with lists of selectable items, e.g. menus · CPC title

• G06F3/0483

  Interaction with page-structured environments, e.g. book metaphor · CPC title

• G06F8/34 Primary

  Graphical or visual programming · CPC title

• G06F8/35

  model driven · CPC title

• G06F3/0486

  Drag-and-drop · CPC title