A method and system for building single-page applications with low code based on state-driven

Abstract

The present invention discloses a method and system for constructing a single-page application based on state-driven low-code, which relates to the technical field of constructing a single-page application based on low-code. The method includes: following the state-driven strategy, decomposing the single-page application into multiple visual units, data adapters, and interoperators that cooperate with each other, and defining the state spaces of page initialization, visual units, data adapters, and interoperators; implementing visual unit, data adapter, and interoperator plugins; implementing a single-page application editor to guide the user to complete the single-page configuration, complete the orchestration of complex business functions, and save and generate the single-page application. By separating the state layer and view layer of the single-page application and driving the view, data, and interaction based on a unified state control logic, the single-page application constructed by the present invention has richer functions, can face complex business scenarios, and has strong applicability.

Description

Technical Field

[0001] The present invention relates to the technical field of constructing single-page applications based on low-code, and in particular to a method and system for constructing single-page applications based on state-driven low-code. Background Art

[0002] The technical solution adopted by the prior art for constructing single-page applications with low-code is that through the page choreography process of allowing users, i.e., page developers, to select components, layout components, bind data, handle events, etc., the limited functions provided by the low-code platform are combined to construct a single-page application. In the component selection stage, developers will select appropriate components from the component library provided by the low-code platform according to page requirements and adjust the layout settings of the components. Subsequently, developers need to associate the components with the data sources of the backend to ensure that the components can correctly display data.

[0003] Event handling is the key to realizing user interaction. Developers set the event handling logic of components in a graphical way, such as performing a certain operation after clicking a button, which enables non-professional developers to easily implement user interaction logic.

[0004] In the above process, the low-code platform adopts a procedural programming strategy, that is, by implementing the code of each component, the data sources and interaction types that the components can accept are determined, and developers can only choreograph the page within the provided function range of the components.

[0005] The disadvantages of the prior art include: (1) The procedural strategy causes the components to only provide limited rendering logic, data source interfaces, and interaction logic interfaces that have been implemented by code to page developers. When these limited functions cannot meet the complex interaction logic of single-page applications, it will lead to additional R & D and time costs for custom development, and the advantages of the low-code architecture cannot be fully utilized; (2) The data source and interaction logic control also face the same problems as the component functions. Usually, the implementation and control logic of the data source and interaction logic are different from those of the components, resulting in difficulties for page developers to understand or fully utilize and explore the functions, so that they cannot choreograph pages that meet the requirements of complex business scenarios; (3) When existing low-code architectures try to make up for the lack of flexibility brought by the procedural underlying architecture, they all adopt the method of increasing the code writing for page developers, which increases the application threshold for page developers and raises the implementation cost.

[0006] The patent document with the application number 202310024519.2 discloses a method for quickly constructing a low-code application, which includes the following steps: data preparation, application construction, application release, and construction completion, and finally generates an application module. First, data preparation is carried out to obtain the construction resource data required for application construction, compress and upload it to the construction module, and then the construction module decompresses the data and designs the application functions through the visual construction page, business logic, and data structure in a drag-and-drop manner. Through this method, non-professionals can also directly build the application modules they need, improving the application construction speed and user-friendliness. However, this method also has the problem that it adopts a procedural strategy and cannot fully utilize the advantages of the low-code architecture. Summary of the Invention

[0007] In view of the above problems, the object of the present invention is to provide a method and system for constructing a single-page application with low code based on state-driven, and construct a single-page application with complex business functions based on a unified state control logic.

[0008] The embodiments of the present invention provide a method and system for constructing a single-page application with low code based on state-driven.

[0009] First aspect: A method for constructing a single-page application with low code based on state-driven, including:

[0010] S1. Follow the state-driven strategy, decompose the single-page application into multiple visual units, data adapters, and interoperators that cooperate with each other, separate the state layer from the view layer, and define the page initialization, visual unit, data adapter, and interoperator state spaces in the state layer;

[0011] S2. Implement visual unit, data adapter, and interoperator plugins according to the state spaces defined in S1;

[0012] S3. Implement a single-page application editor, guide the user to complete the single-page configuration, add visual unit, data adapter, and interoperator plugins in the single-page application, complete the orchestration of complex business functions, and save and generate the single-page application.

[0013] Further, the state-driven strategy includes the following steps:

[0014] S11. Render a visual unit, render the data in the current state space of the visual unit to the page, and the user operates the visual unit interface to trigger parameter data changes;

[0015] S12. The interoperator monitors that the data state has changed, and updates the changed data to the state of the data adapter;

[0016] S13. After the data adapter monitors a change in its own state, the data adapter executes a data request and updates the request result data into its own state;

[0017] S14. The interoperability device monitors a change in the state of the data adapter and updates the changed result data into the state of the visualization unit;

[0018] S15. The change in the state of the visualization unit triggers a re-rendering from the state to the view, and the result data state is passed as a rendering parameter to the page view.

[0019] Further, in the S1, the state spaces of page initialization, visualization unit, data adapter, and interoperability device are defined in the state layer, including:

[0020] Defining the state space of the visualization unit, including layout positioning, display and hiding state, style, data, error, and event;

[0021] Defining the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request state, and request error;

[0022] Defining the state space of the interoperability device, including interoperability mode, source plugin identifier, source state path, target plugin identifier, target state path, instruction path, and data processing logic and parameters;

[0023] Defining the initial state space of the single-page application, including the visualization units, data adapters, and interoperability devices included on the page.

[0024] Further, the state space is serialized and represented using a JSON data structure and is persistently stored in a database.

[0025] According to the method for constructing a single-page application based on state-driven low-code as claimed in claim 1, wherein in the S2, implementing the visualization unit, data adapter, and interoperability device plugins includes:

[0026] Implementing the visualization unit plugin, including menu, button, text, table, directory tree, and form;

[0027] Implementing the data adapter plugin, including request adapter, routing adapter, and Cookie adapter;

[0028] Implementing the interoperability device plugin, where the interoperability device updates and replaces the data of the target state with the converted data according to the monitored change in the target state.

[0029] Further, in the S3, implementing the application management page includes creating a single-page application, or editing or deleting the created application.

[0030] Further, guiding the user to complete the single-page configuration in S3 includes the steps of:

[0031] S31. The user creates or modifies a single-page application using an application editor;

[0032] S32. The user adds various visualization units to the single-page application in the form of visual orchestration, and adds a data adapter and an interoperability device;

[0033] S33. The user changes the rendering position, size, and style of the visualization units in the single-page application, modifies the data adapter, configures the interoperability device, and orchestrates a single-page application with complex business functions according to requirements;

[0034] S34. After the single-page application is orchestrated, the application state is persistently stored in the database.

[0035] Second aspect: A system applied to the method of the first aspect, including:

[0036] A view layer, implemented as visualization units, a data adapter, and an interoperability device with different applications and functions;

[0037] A state layer, implemented as a state space held by page initialization, visualization units, a data adapter, and an interoperability device;

[0038] A low-code layer, using an application editor to create or modify a single-page application, adding visualization units, a data adapter, and an interoperability device of the view layer, and orchestrating a single-page application with complex business functions according to requirements;

[0039] An application layer, providing a single-page application.

[0040] Third aspect: An electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein when the processor executes the program, the steps of the method provided in the first aspect are implemented.

[0041] Fourth aspect: A non-transitory computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the method provided in the first aspect are implemented.

[0042] Advantages of the present invention:

[0043] 1. By separating the state layer and the view layer of the single-page application, and driving the view, data, and interaction based on a unified state control logic, the single-page application constructed by the present invention has richer functions, can face complex business scenarios, and has strong applicability.

[0044] 2. The state-driven low-code view control method and plug-in structure of the present invention have good scalability and completeness. Moreover, the system structure is simple, and the understanding and usage threshold are low. With only a small amount of basic plug-in knowledge, complex business applications can be constructed in the form of visual orchestration, which has the advantages of low customization cost and high implementation efficiency.

[0045] 3. The state-driven low-code view control method and plug-in structure for single-page applications of the present invention can customize the development of plug-ins for special business scenarios, thereby greatly simplifying the complexity of page orchestration and having strong scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 It is a schematic flowchart of the method for building a single-page application with state-driven low-code of the present invention;

[0047] Figure 2 It is a schematic structural diagram of the system for building a single-page application with state-driven low-code of the present invention;

[0048] Figure 3 It is a schematic diagram of the state-driven strategy principle of the present invention;

[0049] Figure 4 It is a schematic structural diagram of the electronic device of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0050] The embodiments of the present invention will be described in detail below. The examples of the embodiments are shown in the drawings, where the same or similar symbols represent the same or similar elements or elements with the same or similar functions throughout. The embodiments described below with reference to the drawings are exemplary and are only used to explain the present invention and should not be construed as a limitation of the present invention.

[0051] In the existing solutions for building single-page applications using low-code, a procedural strategy is adopted, resulting in components only providing limited rendering logic, data source interfaces, and interaction logic interfaces that have been implemented in code to page developers. When these limited functions cannot meet the complex interaction logic of single-page applications, it will lead to the need to invest additional R & D and time costs for customized development, unable to fully utilize the advantages of the low-code architecture, increasing the application threshold for page developers, and raising the implementation cost.

[0052] To address the above problems, the present invention provides a method for building a single-page application with state-driven low-code. Figure 1 It is a schematic flowchart of the method for building a single-page application with state-driven low-code provided by the embodiment of the present invention. The method includes:

[0053] S1. Follow the state-driven strategy, decompose a single-page application into multiple cooperating visualization units, data adapters, and interoperators, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperability state spaces in the state layer.

[0054] As Figure 3 shown, the implementation of the state-driven strategy includes:

[0055] First, a visualization unit is rendered. The visualization unit renders the data in the current state space onto the page. User operations on the interface parameters of the visualization unit can trigger state changes. For example, changing the filtering or paging parameters of a list. At this time, the inter-operator listens for changes in the parameter state, updates the changed parameters to the state of the data adapter, and sets the data valid state of the data adapter to invalid. After the data adapter listens for changes in its own state, the data adapter starts to execute the data request logic. After the data request ends, the data adapter updates the result data to its own state space. At this time, when the inter-operator listens for changes in the state of the data adapter, it updates the changed data to the state space of the visualization unit. The state change of the visualization unit triggers a re-rendering of the state to the page view, and the state is passed as a rendering parameter to the page view component, forming a complete state migration process using the state-driven strategy.

[0056] Following the above state-driven strategy, a single-page application is decomposed into multiple cooperating visualization units, data adapters, and interoperators. The visualization units, data adapters, and interoperators are called plugins.

[0057] Define the page initialization, visualization unit, data adapter, and interoperability state spaces in the state layer, where:

[0058] Define the state space of the visualization unit, including layout positioning, visibility state, style, data, errors, and events, etc. The visualization unit realizes rendering the state onto the page.

[0059] Define the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request state, and request errors, etc. The implementation of the data adapter is responsible for executing data requests and processing data according to the state.

[0060] Define the state space of the inter-operator, including interoperability methods, source plugin identifiers, source state paths, target plugin identifiers, target state paths, instruction paths, and data processing logic and parameters, etc. The inter-operator listens for the specified state of the target plugin according to the state in the state space. When this state changes, it will trigger an update of the target plugin's state or execute the instructions of the target plugin.

[0061] Define the initial state space of a single-page application, including the visualization units, data adapters, and interoperators contained on the page. The initial state fully describes the initial view of a page application and the interaction logic between the page, the browser, external interfaces, and users.

[0062] Then, use the JSON data structure to serialize and represent the state space, enabling the single-page application to be visually orchestrated and persistently stored in a database.

[0063] S2. Implement visualization unit, data adapter, and interoperator plugins according to the state space defined above.

[0064] Among them, implementing visualization unit, data adapter, and interoperator plugins includes:

[0065] Implement visualization unit plugins, including menus, buttons, texts, tables, directory trees, and forms, etc. Define the data state space for each visualization unit. For example, the data state space of a table needs to include table data, paging parameters, currently selected rows, checked rows, etc.

[0066] Visualization unit plugins can declare the states that can be listened to and changed by the interoperator and the commands that can be executed by the interoperator. The commands can implement complex visualization unit state changes, and the view components can change the rendering style in real time according to the style state in the state space.

[0067] Implement data adapter plugins, including request adapters, routing adapters, and Cookie adapters, etc.; data adapters are responsible for initiating process calls, can initiate data requests, obtain data from external environments such as browsers, communicate with external systems, or only be responsible for processing and converting internal system data.

[0068] Implement interoperator plugins. The interoperator updates and replaces the data of the target state with the converted data according to the change of the monitored target state; the interoperator is responsible for monitoring the changes of any state in the system, converting the changed data, and finally updating and replacing the data of the target state with the converted data.

[0069] The interoperator can be used to update the data obtained from the data adapter into the state space of the visualization unit, or respond to the change of the event state of the visualization unit to trigger the execution of the data adapter or the change of the style state of another visualization unit.

[0070] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperability plugins to the single-page application. At the same time, enable users to add various low-code components (such as charts, forms, business panels, etc.) to the single-page application, complete the orchestration of complex business functions, and save and generate the single-page application.

[0071] Implement an application management page, including creating a single-page application, or editing and deleting the created applications, etc.

[0072] Users use the application editor to create or modify a single-page application. Users add various visualization units to the single-page application in the form of visual orchestration, and synchronously add data adapters and interoperability components. Users change the rendering position, size, and style of the visualization units in the single-page application, modify the interface addresses and parameters of the data adapters, configure the interoperability components, change the state paths to be monitored and changed, and orchestrate a single-page application with complex business functions according to requirements. After the single-page application is orchestrated, it can be saved, and the application state is persistently stored in the database.

[0073] The present invention also discloses a system applied to the above method, as Figure 2 shown. The system includes:

[0074] A view layer, which is implemented as visualization units, data adapters, and interoperability components with different applications and functions; the visualization units are responsible for rendering data, layout information, etc. managed by the state layer onto the page.

[0075] A state layer, which is implemented as the state space held by page initialization, visualization units, data adapters, and interoperability components; the state layer is a collection of the states of various plugins, and the visualization units, data adapters, and interoperability components all have their own held states.

[0076] A low-code layer, which uses the application editor to create or modify a single-page application, add visualization units, data adapters, and interoperability components in the view layer, and orchestrate a single-page application with complex business functions according to requirements.

[0077] The application layer is used to provide a single-page application.

[0078] Through the above structural settings and method applications, it is possible to separate the state layer and view layer of the single-page application, drive views, data, and interactions based on a unified state control logic. The constructed single-page application has the advantages of rich functions and strong applicability to complex business scenarios.

[0079] The present invention also provides an electronic device, Figure 4 which is the structural schematic diagram of the electronic device provided by the embodiment of the present invention, as Figure 4As shown in the figure, the electronic device may include: a processor, a communications interface, a memory, and a communication bus. Among them, the processor, the communications interface, and the memory complete communication with each other through the communication bus. The processor may call the logical instructions in the memory to execute the following methods, for example:

[0080] S1. Follow the state-driven strategy, decompose the single-page application into multiple cooperating visualization units, data adapters, and interoperators, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state spaces in the state layer;

[0081] S2. Implement visualization units, data adapters, and interoperator plugins according to the state spaces defined in S1;

[0082] S3. Implement a single-page application editor to guide the user to complete the single-page configuration, add visualization units, data adapters, and interoperator plugins in the single-page application, complete the orchestration of complex business functions, and save and generate the single-page application.

[0083] In addition, when the logical instructions in the above-mentioned memory are implemented in the form of software functional units and sold or used as an independent product, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The foregoing storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs that can store program codes.

[0084] The embodiments of the present invention also provide a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it is implemented to execute the methods provided in the above-mentioned embodiments, for example, including:

[0085] S1. Follow the state-driven strategy, decompose the single-page application into multiple cooperating visualization units, data adapters, and interoperators, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperator state spaces in the state layer;

[0086] S2. Implement visualization units, data adapters, and interoperability plugins according to the state space defined in S1.

[0087] S3. Implement a single-page application editor to guide users to complete single-page configuration, add visualization units, data adapters, and interoperability plugins to the single-page application, complete the orchestration of complex business functions, and save and generate the single-page application.

[0088] The system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0089] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the above technical solution, in essence, or the part that contributes to the prior art can be embodied in the form of a software product, which can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0090] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments or perform equivalent replacements for some of the technical features. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of each embodiment of the present invention.

Claims

1. A method for building a single-page application with low code based on state-driven, characterized in that, Including: S1. Follow the state-driven strategy, decompose a single-page application into multiple cooperating visualization units, data adapters, and interoperators, separate the state layer from the view layer, and define the page initialization, visualization unit, data adapter, and interoperability state spaces in the state layer; S2. Implement visualization unit, data adapter, and interoperability plugins according to the state space defined in S1; S3. Implement a single-page application editor to guide the user to complete the single-page configuration, add visualization units, data adapters, and interoperability plugins to the single-page application, complete the orchestration of complex business functions, and save and generate the single-page application; The state-driven strategy includes the following steps: S11. Render a visualization unit, render the data in the current state space of the visualization unit to the page, and the user's operation on the visualization unit interface triggers parameter data changes; S12. The interoperability monitor detects a change in the data state and updates the changed data to the state of the data adapter; S13. After the data adapter detects a change in its own state, the data adapter executes a data request and updates the request result data to its own state; S14. The interoperability monitor detects a change in the state of the data adapter and updates the changed result data to the state of the visualization unit; S15. The state change of the visualization unit triggers a re-rendering from the state to the view, and passes the result data state as a rendering parameter to the page view; The guidance for the user to complete the single-page configuration in S3 includes the following steps: S31. The user uses the application editor to create or modify a single-page application; S32. The user adds various visualization units to the single-page application in the form of visual orchestration, and adds a data adapter and an interoperability unit; S33. The user changes the rendering position, size, and style of the visualization unit in the single-page application, modifies the data adapter, configures the interoperability unit, and orchestrates a single-page application with complex business functions according to requirements; S34. After the single-page application is orchestrated, persistently store the application state in the database.

2. The method for building a single-page application with low code based on state-driven according to claim 1, wherein Defining the page initialization, visualization unit, data adapter, and interoperability state spaces in the state layer in S1 includes: Define the state space of the visualization unit, including layout positioning, display / hide state, style, data, error, and events; Define the state space of the data adapter, including request path, request path parameters, request parameters, data processing logic and parameters, data, request status, and request error; Define the state space of the interoperability unit, including interoperability method, source plugin identifier, source state path, target plugin identifier, target state path, instruction path, and data processing logic and parameters; Define the initial state space of the single-page application, including the visualization units, data adapters, and interoperability units included on the page.

3. The method for building a single-page application with low code based on state-driven according to claim 2, characterized in that, The state space is serialized and represented using the JSON data structure and is persistently stored in the database.

4. The method for building a single-page application with low code based on state-driven according to claim 1, characterized in that Implementing visualization unit, data adapter, and interoperability plugins in S2 includes: Implement visualization unit plugins, including menus, buttons, text, tables, directory trees, and forms; Implement a data adapter plugin, including a request adapter, a routing adapter, and a Cookie adapter; Implement an interoperability plugin, and the interoperability plugin updates and replaces the data of the target state with the converted data according to the change of the monitored target state.

5. The method for building a single-page application with low code based on state-driven according to claim 1, wherein Implement an application management page in the S3, including creating a single-page application, or editing or deleting the created application.

6. A system based on the method according to any one of claims 1-5, characterized in that, Comprising: A view layer, which is implemented as visualization units, data adapters, and interoperability plugins with different applications and functions; A state layer, which is implemented as the state space held by page initialization, visualization units, data adapters, and interoperability plugins; A low-code layer, which creates or modifies a single-page application using an application editor, adds visualization units, data adapters, and interoperability plugins in the view layer, and arranges a single-page application with complex business functions according to requirements; An application layer, which provides a single-page application.

7. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method according to any one of claims 1 to 5.

8. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the method according to any one of claims 1 to 5.

Images