Page rendering method, execution engine and page construction method

Abstract

The invention provides a method, a device, equipment and a medium for page rendering, an execution engine and a page construction method. According to the method, events in modules and linkage between the modules and other modules are analyzed by utilizing logic configuration of each module generated together with each module forming a page, and for each module in page rendering, a user interface in the module is bound with the events according to the logic configuration of the module. And events associated with linkage between the modules are monitored, so that real-time dynamic responsive rendering of the page is realized. By means of the method, the logic configuration used for describing the incidence relation between all the parts in the module can be generated while each module is generated, so that event triggering, method defining and linkage configuration in the module are managed in a unified mode, and the incidence relation between all the modules in a page is connected in series through the linkage configuration; therefore, the modules are in communication cooperation with each other.

Description

Technical Field

[0001] The present disclosure relates to the field of cloud technology, and more specifically, to a method, apparatus, device and medium for page rendering, as well as an execution engine and a page construction method. Background Art

[0002] In modern front-end development, developers have always faced problems such as long development cycles and difficulty in reusing various parts of development. For example, in low-code engines, improving reusability, improving execution efficiency, and improving the low-code development experience has always been a difficult problem. Parts such as modules, logic (actions), user interfaces (UI), events, and linkages have always been difficult to connect in a good way. Due to the strong coupling and mutual dependence between the various parts, reusability and flexibility have not been well improved.

[0003] Therefore, a page rendering method is needed that can connect modules, logic, UI, events, linkage and other parts in series. Summary of the invention

[0004] In order to solve the above problems, the present invention renders the modules by using the logical configuration of each module included in the page when rendering the page, wherein the module's UI is connected in series with the module's events and linkages according to the logical configuration to achieve monitoring-based responsive rendering of the user interface.

[0005] Embodiments of the present disclosure provide a method, apparatus, device and medium for page rendering, as well as an execution engine and a page construction method.

[0006] An embodiment of the present disclosure provides a method for page rendering, wherein the page includes multiple modules, each of which includes one or more user interfaces, and the method includes: obtaining a logical configuration of the page, the logical configuration including a logical configuration of each module in the multiple modules, wherein the logical configuration of each module is generated together with the module and is used to describe events in the module and the linkage between the module and other modules; for each of the multiple modules, based on the logical configuration of the module, monitoring events associated with the linkage in the module, and binding one or more events to one or more user interfaces of the module; and for each of the multiple modules, rendering one or more user interfaces of the module based on monitoring events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module.

[0007] An embodiment of the present disclosure provides an execution engine, which is configured in a module for building a page, wherein the module includes one or more user interfaces, and the execution engine is configured to: obtain a logical configuration of the module, wherein the logical configuration of the module is generated together with the module and is used to describe events in the module and the linkage between the module and other modules; based on the logical configuration of the module, monitor events associated with the linkage in the module, and bind one or more events to one or more user interfaces of the module; and render one or more user interfaces of the module based on the monitoring of events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module.

[0008] An embodiment of the present disclosure provides a page construction method, comprising: a page builder selects one or more modules from a module set generated by a module generator, each of the one or more modules is configured with an execution engine as described above, and each of the one or more modules includes a logic configuration and one or more user interfaces, wherein the logic configuration of each module is generated together with the module by the module generator and is used to describe events in the module and the linkage between the module and other modules; and the page builder constructs a page based on the selected one or more modules.

[0009] An embodiment of the present disclosure provides a device for page rendering, wherein the page includes multiple modules, each of which includes one or more user interfaces, and the device includes: a configuration acquisition component, configured to acquire a logical configuration of the page, wherein the logical configuration includes a logical configuration of each module in the multiple modules, wherein the logical configuration of each module is generated together with the module and is used to describe events in the module and the linkage between the module and other modules; an association configuration component, configured to monitor, for each module in the multiple modules, events associated with the linkage in the module based on the logical configuration of the module, and bind one or more events to one or more user interfaces of the module; and a page rendering component, configured to render, for each module in the multiple modules, one or more user interfaces of the module based on the monitoring of events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module.

[0010] An embodiment of the present disclosure provides a device for page rendering, comprising: one or more processors; and one or more memories, wherein a computer executable program is stored in the one or more memories, and when the computer executable program is executed by the processor, the method for page rendering as described above is performed.

[0011] An embodiment of the present disclosure provides a computer-readable storage medium having computer-executable instructions stored thereon, and the instructions are used to implement the method for page rendering as described above when executed by a processor.

[0012] The embodiment of the present disclosure provides a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. A processor of a computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device performs a method for page rendering according to an embodiment of the present disclosure.

[0013] The method provided by the embodiment of the present disclosure parses the events in the module and the linkage between the module and other modules by utilizing the logical configuration of each module generated together with each module constituting the page, so that in the rendering of the page, for each module, the user interface in the module is bound to the event according to the logical configuration of the module, and the events associated with the linkage between the modules are monitored to achieve real-time dynamic responsive rendering of the page. The method of the embodiment of the present disclosure can generate a logical configuration for describing the association relationship between the various parts in the module while generating each module, so as to uniformly manage the triggering of events in the module, the definition of methods, and the configuration of linkage, and the association relationship between the various modules in the page is connected in series through the linkage configuration, so that the modules communicate and cooperate with each other, and finally complete the dynamic rendering of the entire page. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some exemplary embodiments of the present disclosure, and a person of ordinary skill in the art can obtain other drawings based on these drawings without creative work.

[0015] Figure 1 is a schematic diagram showing a scenario for implementing an interactive operation between a user and a user terminal according to an embodiment of the present disclosure;

[0016] Figure 2 is a flow chart showing a method for page rendering according to an embodiment of the present disclosure;

[0017] Figure 3A is a schematic block diagram showing an execution rendering process and a trigger linkage process according to an embodiment of the present disclosure;

[0018] Figure 3B is a schematic block diagram showing a process of executing a triggering event according to an embodiment of the present disclosure;

[0019] Figure 4 is a flow chart showing event communication in an execution engine according to an embodiment of the present disclosure;

[0020] Figure 5 is a schematic diagram showing a logical configuration of an example lottery module according to an embodiment of the present disclosure;

[0021] Figure 6 is a schematic diagram showing data acquisition and change monitoring through an event bus according to an embodiment of the present disclosure;

[0022] Figure 7 is a schematic flowchart showing reactive UI rendering for a module to be rendered according to an embodiment of the present disclosure;

[0023] Fig. 8A is a schematic flow chart showing loading cache for actions according to an embodiment of the present disclosure;

[0024] Figure 8B is a schematic flowchart illustrating delayed loading of actions according to an embodiment of the present disclosure;

[0025] Fig. 9 is a diagram showing a system architecture for page rendering according to an embodiment of the present disclosure;

[0026] Fig.10 is a schematic diagram showing the construction and application of a page according to an embodiment of the present disclosure;

[0027] Fig.11 is a schematic diagram showing a device for page rendering according to an embodiment of the present disclosure;

[0028] Fig.12 A schematic diagram showing a device for page rendering according to an embodiment of the present disclosure; and

[0029] Fig.13 A schematic diagram illustrating the architecture of an exemplary computing device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0030] In order to make the purpose, technical solution and advantages of the present disclosure more obvious, the exemplary embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all the embodiments of the present disclosure, and it should be understood that the present disclosure is not limited to the exemplary embodiments described here.

[0031] In this specification and the accompanying drawings, substantially the same or similar steps and elements are represented by the same or similar reference numerals, and repeated descriptions of these steps and elements will be omitted. At the same time, in the description of the present disclosure, the terms "first", "second", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance or ranking.

[0032] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which the present disclosure pertains. The terms used herein are only for the purpose of describing the embodiments of the present invention and are not intended to limit the present invention.

[0033] To facilitate description of the present disclosure, concepts related to the present disclosure are introduced below.

[0034] The method for page rendering disclosed in the present invention may be based on cloud technology. Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network in a wide area network or a local area network to realize the calculation, storage, processing, and sharing of data. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, application technology, etc. based on the cloud computing business model application, which can form a resource pool, which is used on demand and is flexible and convenient. Cloud computing technology will become an important support. The background services of the technical network system require a large amount of computing and storage resources, such as video websites, picture websites, and more portal websites. With the high development and application of the Internet industry, in the future, each item may have its own identification mark, and all need to be transmitted to the background system for logical processing. Data of different levels will be processed separately, and all kinds of industry data require strong system backing support, which can only be achieved through cloud computing.

[0035] Specifically, the method for page rendering disclosed in the present invention can be based on artificial intelligence cloud services. Artificial intelligence cloud services are generally also referred to as AIaaS (AI as a Service, Chinese for "AI as a Service"). This is a mainstream service mode of an artificial intelligence platform. Specifically, the AIaaS platform will split several common AI services and provide independent or packaged services in the cloud. This service model is similar to opening an AI theme mall: all developers can access one or more artificial intelligence services provided by the platform through API interfaces, and some senior developers can also use the AI ​​framework and AI infrastructure provided by the platform to deploy and operate their own cloud artificial intelligence services. For example, in the method for page rendering disclosed in the present invention, a logical configuration for describing the association between UI, events, methods, linkages and logic in the module can be generated synchronously during the generation phase of the page module, and provided together with the module to operators for deployment and management of web page services.

[0036] The method for page rendering disclosed in the present invention can be based on a low-code engine. A low-code engine is a software development tool designed to help developers build applications in a faster and simpler way. Traditional application development usually requires a lot of manual coding and technical knowledge, while a low-code engine enables developers to create applications using drag and drop, configuration, and a small amount of coding by providing a visual development interface and predefined components. The main features of a low-code engine may include: 1. Visual development interface: The low-code engine provides an intuitive and easy-to-use visual interface. Developers can build the user interface and logic of the application by dragging and dropping components, setting properties, and configuring rules; 2. Predefined components and templates: Low-code engines usually provide a wealth of predefined components and templates, including forms, reports, workflows, database integration, etc. Developers can directly use these components to quickly build applications; 3. Automated code generation: The low-code engine can automatically generate the underlying code of most applications, thereby reducing the workload of manual coding. Developers only need to focus on customized development of business logic and specific needs; 4. Rapid iteration and deployment: The low-code engine enables developers to quickly iterate and modify applications, and functional changes can be achieved through simple configuration and adjustment. At the same time, the low-code engine also provides a simplified deployment and release process, enabling applications to be quickly launched and delivered. The method for page rendering disclosed in the present invention can be an improved method for the low-code engine, in which the modules, logic, UI, events, methods, linkages, etc. in the low-code engine are connected in series.

[0037] The method for page rendering disclosed in the present invention can be based on a domain-specific language (Domain-Specific Language, DSL). DSL is a programming language designed specifically for a specific field or problem domain. Compared with general programming languages ​​(such as Java, Python), DSL is more focused on solving problems in specific fields, providing more advanced and concise syntax and expression capabilities, and is closer to the concepts and needs of specific fields. The design goal of DSL is to enable domain experts to directly use programming languages ​​to describe and solve problems without having to deeply understand the underlying programming details. In the method for page rendering disclosed in the present invention, the complex association relationships and logic of modules can be expressed in a more intuitive and readable way based on DSL, so that operators can more easily understand and manage the relationships between various parts, thereby improving development efficiency and code maintainability, and can more accurately execute the corresponding logic according to the relationships defined by DSL at runtime.

[0038] Some concepts involved in the method for page rendering disclosed in the present invention are described below. First, the UI (user interface), events, methods, linkages and logic mentioned in the method for page rendering disclosed in the present invention are independent concepts from each other, but there are certain connections between them.

[0039] UI (User Interface): UI can refer to the interface that users see and operate when interacting with software. It includes various visual elements such as buttons, text boxes, drop-down menus, etc. The definition of UI is usually implemented through front-end technologies such as HTML, CSS and JavaScript.

[0040] Event: An event can refer to an action triggered when a user performs an operation on the UI (such as clicking a button, entering text, etc.). Events can be predefined or custom. For example, a "click" event is triggered when a button is clicked, or an "input" event is triggered when content is entered into an input box. Events can usually be responded to and handled by adding an event listener.

[0041] Method: A method is a piece of executable code that performs a specific function or operation. Methods are usually encapsulated in functions or classes so that they can be called when needed. Methods can be predefined or custom. For example, a method that calculates the sum of two numbers can be defined as a function.

[0042] Action: An action can refer to a specific operation or task performed in an application. It represents an event or request triggered by the user or the system to perform certain functions or trigger specific behaviors. Actions can be interactive operations on the user interface or tasks processed in the background. Actions can be predefined or custom. For example, an action is performed when a button is clicked, which can be such as showing a pop-up window, sending a network request, etc.

[0043] Interactivity: Interactivity can refer to the interaction and influence between different UI elements. When the state or value of a UI element changes, it may trigger changes or operations in other UI elements. For example, when selecting an option in a drop-down menu, it may cause the content of other related UI elements to be updated or operations to be performed.

[0044] To sum up, the solutions provided by the embodiments of the present disclosure involve cloud technology, artificial intelligence cloud services, low-code engines, domain-specific languages ​​and other technologies. The embodiments of the present disclosure will be further described below in conjunction with the accompanying drawings.

[0045] Figure 1The diagram is a schematic diagram showing a scenario for implementing an interactive operation between a user and a user terminal according to an embodiment of the present disclosure.

[0046] like Figure 1 As shown, the user can perform interactive operations with the user terminal. Among them, the user can trigger a specific event in the page on the user terminal by performing a specific operation (for example, including but not limited to a click operation, an input operation, etc.) on the user terminal, and the triggered event can be transmitted to the server through the network, so that the server can perform corresponding response processing on the triggering event, for example, generate corresponding page rendering data. Subsequently, the server can return the generated page rendering data to the user terminal through the network, thereby performing corresponding rendering operations on the page on the user terminal. Optionally, the user terminal may specifically include a smart phone, a tablet computer, a laptop computer, a desktop computer, a vehicle-mounted terminal, a wearable device, etc., but is not limited thereto. The user terminal can also be a client that installs a browser or various applications (including system applications and third-party applications). Optionally, the network can be an Internet of Things (IoT) based on the Internet and / or telecommunication network, which can be a wired network or a wireless network, for example, it can be a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a cellular data communication network, and other electronic networks that can realize information exchange functions, and the user terminal and the server can be directly or indirectly connected by wired or wireless communication, which is not limited in this application. The server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms.

[0047] In modern front-end development, long development cycles and difficulty in reusing various parts have always been challenges faced by developers. These problems mainly stem from the multiple aspects involved in front-end development, including UI design, front-end logic, data processing, event processing, etc., and the connection and collaboration between these aspects require developers to manually write a lot of code and logic.

[0048] In traditional front-end development, developers need to manually write code to define page structure, style, and behavior. This approach has problems such as long development cycle (due to the need to manually write a lot of code, the front-end development cycle is relatively long, especially for complex applications), partial difficulty in reuse (due to the lack of unified components and modular mechanisms, some parts of front-end development are difficult to reuse, resulting in code redundancy and maintenance difficulties), and difficulty in connection (the association and collaboration between different aspects involved in front-end development (such as UI, logic, events, etc.) is difficult to express and implement in a concise and clear way).

[0049] In low-code engines, developers can use concepts such as templates, modules, logic, UI, events, methods, linkage, etc. to describe and organize the various parts of the application. However, in low-code engines, the connection between these parts is still challenging. Due to the flexibility and customizability of low-code engines, different engines may use different ways to define and implement the association between these parts. This makes it difficult to connect these parts in a universal and concise way, so that developers still need to face complex configurations when using low-code engines.

[0050] In response to the above problems, the existing technical solutions usually implement interaction and action response between components by having users add events to each component (module). Users can add different trigger conditions (such as click, double-click, long press, etc.) to the components to trigger corresponding actions. These actions are usually developed in advance and published to the material library used by the components, or another component can be selected to link component events to respond to the triggered actions. Users can select existing actions from the action list, or define new actions through custom code. Finally, users use DSL (domain-specific language) to describe the association between these events and actions, and build them into the renderer for execution.

[0051] However, in the above technical solution, there are the following problems:

[0052] 1. The above technical solution is based on adding events at the component level, and it is difficult to add actions at the more fine-grained DOM (Document Object Model) level within the component: The above technical solution usually triggers actions by adding events to components, but for more fine-grained DOM elements within components, it is often impossible to add events directly, and it needs to be implemented through component encapsulation and exposed interfaces. This method increases the complexity of development and the cost of maintenance;

[0053] 2. The linkage between components is difficult to maintain and reuse: In the above technical solutions, the linkage between components is usually achieved through manual configuration and coding. This method is difficult to maintain and reuse, especially when the complexity of the application increases. A lot of code needs to be written to handle the interaction logic between components, which increases the difficulty and workload of development;

[0054] 3. The number of actions in the action list is small or there may be compatibility issues: In the above technical solutions, the action list provided is usually limited and there may be compatibility issues. For some specific business scenarios, it may not be possible to find suitable actions to meet the needs, and developers need to develop and configure them by themselves. In addition, since different browsers and devices have different levels of support for actions, there may be compatibility issues, and the configuration personnel need to understand whether they are compatible;

[0055] 4. The deployment and maintenance costs of the renderer are high, which is not conducive to the rapid update and iteration of other functions: In the above technical solution, the renderer is the core component for implementing action execution, but the deployment and maintenance of the renderer requires certain costs and resource investment. When it is necessary to update, iterate or expand other functions, the renderer may need to be modified and redeployed, which increases the complexity of development and operation and maintenance;

[0056] 5. Insufficient support and flexibility for action trigger parameters, making it difficult to support complex business scenarios: In the above technical solutions, the support for action trigger parameters is limited, and actions can often only be triggered by simple trigger conditions. For some complex business scenarios, more flexible and rich trigger parameters may be required to achieve this. In addition, the above technical solutions often lack support for action triggering sequence and conditions, making it difficult to meet some complex interaction requirements.

[0057] Based on this, the present disclosure provides a method for page rendering, which renders the modules by using the logical configuration of each module included in the page when rendering the page, wherein the UI of the module is connected in series with the events and linkages of the module according to the logical configuration to achieve monitoring-based responsive rendering of the user interface.

[0058] The method provided by the embodiment of the present disclosure parses the events in the module and the linkage between the module and other modules by utilizing the logical configuration of each module generated together with each module constituting the page, so that in the rendering of the page, for each module, the user interface in the module is bound to the event according to the logical configuration of the module, and the events associated with the linkage between the modules are monitored to achieve real-time dynamic responsive rendering of the page. The method of the embodiment of the present disclosure can generate a logical configuration for describing the association relationship between the various parts in the module while generating each module, so as to uniformly manage the triggering of events in the module, the definition of methods, and the configuration of linkage, and the association relationship between the various modules in the page is connected in series through the linkage configuration, so that the modules communicate and cooperate with each other, and finally complete the dynamic rendering of the entire page.

[0059] Figure 2 is a flow chart illustrating a method 200 for page rendering according to an embodiment of the present disclosure.

[0060] Figure 3A 3 is a schematic block diagram showing an execution rendering process 300 and a trigger linkage process 310 according to an embodiment of the present disclosure. Figure 3B 3 is a schematic block diagram showing an execution trigger event process 320 according to an embodiment of the present disclosure. Figure 4 is a flow chart showing event communication in an execution engine according to an embodiment of the present disclosure.

[0061] The following will refer to Figure 3A-Figure 4 Come to Figure 2 The method for page rendering shown is described.

[0062] In executing Figure 2 Before the steps shown, Figure 3A As shown in the figure mark 301 in the figure, a global data storage warehouse (store) for page rendering can be initialized first. Optionally, the data storage warehouse can refer to a system or component for storing and managing data, which can provide a structured way to store and retrieve data, and also provide some additional functions, such as data backup, data recovery, data access control, etc.

[0063] In the embodiments of the present disclosure, Figure 4As shown, a global event bus (401) can be created for the page while the page is loading, and used as a global data storage warehouse, that is, the event bus is used to initialize the data storage warehouse (402) for storing data required for all subsequent operations. Therefore, according to an embodiment of the present disclosure, the method for page rendering may also include a step of creating an event bus for the page before the following steps S201-S203, and the event bus can be used to monitor the triggering of events in the page (this will be referred to below). Figure 6 for explanation).

[0064] like Figure 2 As shown, in step S201, the logical configuration of the page can be obtained, and the page may include multiple modules, each module may include one or more user interfaces, and the logical configuration may include the logical configuration of each module in the multiple modules, wherein the logical configuration of each module is generated together with the module and is used to describe events in the module and the linkage between the module and other modules.

[0065] In an embodiment of the present disclosure, when executing page rendering, the logical configuration of the page can be obtained (302), and the obtained logical configuration can be parsed (303) to obtain the event, method and linkage configuration of each module in the page, wherein the logical configuration of the page can include the logical configuration of each module in the page. It should be noted that the logical configuration of each module is generated together with the corresponding module. That is to say, in an embodiment of the present disclosure, when generating each module for constituting a page, a logical configuration for describing the relationship such as event triggering and linkage configuration in the corresponding module can be generated synchronously, and the logical configuration can be used to parse various association relationships of the corresponding module during the page rendering stage.

[0066] Further, in the embodiments of the present disclosure, the page rendering in the browser environment can be taken as an example. The method for page rendering disclosed in the present disclosure can perform page rendering when the browser is running. Therefore, the main logic of page rendering can be executed in the runtime layer, where the runtime layer can refer to the runtime environment of the software system, which is an intermediate layer between the operating system and the application program, and is used to provide a series of runtime services and resource management functions to support the execution and operation of the application program. Of course, it should be understood that the page rendering in the above-mentioned browser environment is only used as an example and not a limitation in the present disclosure, and the method for page rendering disclosed in the present disclosure can also be applied to page rendering tasks in other situations.

[0067] Optionally, the logical configuration of a module may refer to configuring and controlling the behavior of a module according to specific requirements and conditions when an application (e.g., a browser) is running. In this case, each module may have a specific configuration to define events, methods, linkages, etc. therein according to its specific functions and logic.

[0068] As an example, the logical configuration of each module can be specifically used to describe the association relationship between modules such as UI, events, methods, linkages and actions. Among them, an event can refer to a specific interactive operation that a module can respond to or a specific event that is triggered. By configuring an event, the operation or logic that a module should perform under specific conditions can be defined. A method can refer to a specific function or operation that a module can call. By configuring a method, a specific action or logic that a module can perform can be defined. Linkage can refer to the mutual association and interaction between modules. By configuring linkage, dependencies and interaction rules between modules can be defined to achieve more complex functions and interactive effects. For example, linkage can include interactions and influences between different UI elements involved in different modules. By providing an independent logical configuration for each module, the behavior of the module can be controlled and customized more flexibly, and different modules can define events, methods, linkages, etc. according to their own needs and logic to achieve more precise and personalized functions, thereby making the interaction between modules more flexible and scalable.

[0069] In the embodiments of the present disclosure, in order to realize the real-time dynamic rendering of the entire page, it is necessary to configure the linkage between modules in the logical configuration of each module. As an example, in the method for page rendering disclosed in the present disclosure, the following linkage configurations can be considered: ① User interface linkage: When the user operates on the user interface, different modules can influence and change each other according to the user's input. For example, when the user enters data in a form, other related fields can be automatically filled or updated according to the input content; ② Event-driven linkage: Different modules or components in a software system (e.g., a browser) can achieve linkage through event triggering and processing. For example, when a button is clicked, an event can be triggered, and then other components can perform corresponding operations or updates according to the event; ③ Data linkage: Different data sources or data modules can be linked to maintain data consistency and synchronization. For example, when the value of a data module changes, other modules or components that depend on the value can be automatically updated; ④ System linkage: Different software systems or services can be linked to achieve data sharing, function expansion or collaborative work. For example, two systems can exchange and share data through an API interface, or one system can call the function of another system to complete a specific task.

[0070] As described above, linkage configuration is very important in the logical configuration of each module, which enables the software system (e.g., browser) to respond and update in real time according to different inputs and events. Through linkage configuration, a better user experience can be provided, the flexibility and interactivity of the software system can be increased, and the efficiency and usability of the system can be improved. Of course, it should be understood that the several linkage configurations provided above are only used as examples and not limitations in this disclosure, and the method for page rendering disclosed in this disclosure can also adopt other linkage configurations.

[0071] Optionally, the logic configuration of each module can be represented as a DSL generated when the module is generated, which can be a specific language used to describe the association relationship between various parts (e.g., events, methods, and linkages, etc.) in the module. For example, the DSL can be a custom language specifically used to describe and define the association relationship between various parts, such as dependency relationships, execution order, etc. When the page is running, the execution engine can parse and execute the rendering of the module according to the DSL of the module, including processing the logic and interaction of various parts according to the association relationship described by the DSL.

[0072] Figure 5 is a schematic diagram showing a logical configuration of an example lottery module according to an embodiment of the present disclosure.

[0073] like Figure 5 As shown, for the lottery module 500 given as an example, the logical configuration generated for the lottery module 500 may include but is not limited to association 510, association 520, association 530 and association 540. Among them, association 510 describes the association between UI, events and actions, that is, UI-lottery interface ( Figure 5 The association between the event "load event" and the action "query the number of lottery draws" indicates that the UI is bound to the "load event" and in response to the triggering of the "load event", the action "query the number of lottery draws" is executed. The association relationship 520 also describes the association between the UI, the event, and the action, i.e., the UI-lottery start button ( Figure 5 The association between the event "click event" and the action "start lottery" indicates that the UI is bound to the "click event" and the action "start lottery" is executed in response to the triggering of the "click event". Association relationship 530 describes the association between the UI and the method, that is, UI-lottery interface ( Figure 5The association between the UI and the data, i.e., the association between the UI-remaining number of draws display interface and the data-"status value of the remaining number of draws", indicates that the UI is bound to the data "status value of the remaining number of draws", that is, the value displayed by the UI is updated instantly as the data "status value of the remaining number of draws" changes. As described above, Figure 5 Some example logic configurations of the present disclosure are shown, but this should not be construed as limiting the logic configurations of the present disclosure.

[0074] Optionally, the logical configuration of each module may include, but is not limited to, events, methods, and linkages. For example, an event may include a node identifier (ID), name, type, action, and data, and the type may support the definition of events such as loading and clicking; a method may include a node ID and action, etc.; a linkage may include a node ID, a monitoring node ID (listenID), an event name (eventName), a target node ID (target ID), an action, and data. Among them, a node may correspond to a module (or a UI in the module), and each node has a unique ID for identifying the node. The ID may be a string, a number, or another type of identifier for uniquely identifying the node in the system.

[0075] That is to say, nodes can interact and communicate through events, methods, and linkages. Events, as messages between nodes, can be used to notify other nodes of a specific event or state change, while methods can be interfaces exposed by nodes to other nodes for other nodes to call the functions of the node. Linkages can provide collaboration and mutual influence between multiple nodes. The operation or state change of a node may trigger responses from other nodes. Among them, the methods exposed by the nodes are provided and maintained by the nodes themselves, so there is no need to consider compatibility issues. Therefore, the logical configuration of each module connects the entire module life cycle in series. Through these configurations, event triggering and method calls within the module, as well as linkage between modules, can be realized.

[0076] As described above, the method for page rendering disclosed in the present invention can be based on module development completed by the module generator in the module generation phase through operations such as fine-grained event binding of each UI in the module (for example, events can be added and actions can be triggered at an extremely fine granularity at the DOM level within the module) and action association. The output of the module generation phase can include module data to be rendered and the logical configuration of the module.

[0077] Therefore, when executing page rendering, for the data storage warehouse created as above, a corresponding sub-data storage warehouse (sub-store) (409) can be created for each node by using the node ID as an identifier, and a corresponding sub-event bus (410) can be created. According to an embodiment of the present disclosure, the method for page rendering of the present disclosure may also include: for each module in the multiple modules, a sub-event bus is created for the module in the event bus, which is used to separately store the state value of one or more user interfaces of the module. Optionally, the data of each node (for example, the state inside the node, the calculation result, the processed message, etc.) can be mounted on its sub-store, which, as a container for storing and managing node data, can achieve data isolation and encapsulation. Therefore, the sub-store of each node can store its own data, while other nodes can only access and operate these data by calling methods or subscribing to events, which can improve the maintainability and scalability of the system and reduce the dependencies between modules. For example, for the events, methods, and linkages in the logical configuration of each module, they can have the same ID, that is, the node ID, and these data can be mounted on the sub-store of the node. For example, the substore of each node can store the corresponding dictionary table of the node, which can store node data in the form of key-value pairs, where the key of each data has a unique standard name for identifying and retrieving values ​​through the unique key, thereby reducing data field redundancy and standardizing the use of data.

[0078] like Figure 3A As shown, in the rendering process 300 for the page, after completing the initialization of the data storage warehouse (301), obtaining the logical configuration of the module (302) and parsing the logical configuration (303), the linkage events of the modules can be monitored based on the logical configuration of each module (304).

[0079] Therefore, in step S202, for each module in the multiple modules, events associated with the linkage in the module can be monitored based on the logical configuration of the module, and one or more events can be bound to one or more user interfaces of the module.

[0080] Optionally, in order to achieve communication between multiple modules, a state manager can be used, in which the above-mentioned event bus is used as a universal carrier for data access, and the access to page data and the monitoring of data changes are achieved by monitoring events using the event bus.

[0081] According to an embodiment of the present disclosure, monitoring the events associated with the linkage in the module based on the logic configuration of the module may include monitoring the triggering of the events associated with the linkage in the module using the event bus.

[0082] Optionally, the event bus can be a mechanism for communication between different modules, which allows modules to be decoupled and interact by publishing and subscribing to events. The event bus can be seen as a central dispatcher for receiving and distributing events, where modules can publish events to the event bus, and other modules can receive and respond accordingly by subscribing to these events, thereby realizing linkage between modules.

[0083] According to an embodiment of the present disclosure, the use of the event bus to monitor the triggering of events associated with the linkage in the module may include: in response to the event associated with the linkage in the module being triggered during the execution of the action of the page, triggering the event associated with the linkage in the module in the event bus; and in response to the event bus monitoring the event associated with the linkage in the module being triggered in the event bus, executing an action corresponding to the linkage.

[0084] As an example, Figure 3A As shown, the event bus can trigger linkage events in any module (that is, actions executed in the module), such as Figure 3A As shown in the figure mark 311 in the figure), and published through the event bus (ie, triggering a linkage event on the event bus, such as Figure 3A The method further comprises monitoring an event (as shown by reference numeral 312 in the figure) (for example, the event can be of any type, and the tag can carry data and parameters), and after detecting the triggering of the event (313), executing the corresponding action (314) of the linkage, for example, sending the event to other modules that have subscribed to the event.

[0085] Figure 6 It is a schematic diagram showing the implementation of data acquisition and change monitoring through an event bus according to an embodiment of the present disclosure.

[0086] like Figure 6As shown, the event bus 600 of the present disclosure can mainly realize the monitoring function for events (for example, data access events 620 and data change events 630 mounted on the event bus 600). Optionally, the event bus of the present disclosure can respond to the triggering of the event by monitoring the triggering of the event and return the corresponding result to the triggering party of the event. For example, for the event bus 600, Figure 6 Example monitoring processes in three cases are given. For the case 601 for synchronous acquisition of values, when a data access event 620 is triggered in a module (and the trigger can be with parameters), the event bus can monitor the triggering of the data access event 620 and return the data value that the module expects to obtain to the module. For the case 602 for modifying values, when the current value of a certain data is modified in a certain module and a data change event 630 is triggered (and the trigger can be with parameters), the event bus can monitor the triggering of the data change event 630 and return the subscribers who monitor the changes of the data (for example, to notify these subscribers of the changes of the data). For the case 603 for monitoring data changes, it is desired to monitor a certain data in a certain module, and a subscription function is added to the data change event 630. The event bus 610 can also monitor the subscription of the module to the event, and add the module to the subscribers who subsequently return to monitor the changes of the data. In addition, the monitoring of the event bus 610 can also return an event clearing function to support clearing the monitoring after calling. Of course, the above-mentioned various situations of implementing data acquisition and change monitoring through the event bus are only used as examples and not limitations, and the method disclosed in the present invention can also be applied to other situations.

[0087] As described above, the state manager can implement data access and data change monitoring by mounting various events (e.g., the above-mentioned data access event 620 and data change event 630, etc.) on the event bus, wherein the above-mentioned mounting can include associating the event bus with these events so that the corresponding processing logic can be triggered when the event occurs. In addition, the processing of data access and data change monitoring through these events can be encapsulated into a data synchronization method or a hook function call in the React framework, etc., to ensure the needs of data access and responsive data change monitoring in the subsequent process.

[0088] By using the event bus to monitor events associated with linkages in modules, decoupled and loosely coupled communication can be achieved between modules, where publishers do not need to know the existence of subscribers directly, they only need to publish events, and subscribers do not need to know the specific publishers, they only need to subscribe to the events they are interested in. Therefore, the maintainability and scalability of the code can be improved, and the dependencies between modules can be reduced.

[0089] In addition, if Figure 3A As shown in the figure mark 305 in the figure, for each module in the multiple modules, one or more events can be bound to one or more user interfaces of the module based on the logical configuration of the module. Optionally, related events can be bound to each UI in the module (such as the above reference Figure 5 described loading events, click events, etc.) to achieve the corresponding association relationship.

[0090] Alternatively, if Figure 4 As shown, the execution engine may call the state manager (406) to perform event binding (408) through the state management (407). For example, by parsing the logic configuration of the module by the execution engine, the state manager may be used to mount events for the module's UI.

[0091] Next, in step S203, for each of the multiple modules, one or more user interfaces of the module can be rendered based on monitoring events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module.

[0092] Optionally, reactive rendering for modules can be implemented based on the triggering of linkage events and / or event triggering in the modules. According to an embodiment of the present disclosure, the event bus can be used as a data storage warehouse for page rendering, for storing the state value of the user interface of the page. As described above, the event bus can store the state values ​​involved in the UI in the module (for example, by storing it in a sub-store for each module) to implement reactive rendering for the UI in the module based on the monitoring of data changes by the event bus.

[0093] According to an embodiment of the present disclosure, the rendering of one or more user interfaces of the module based on the monitoring of events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module may include: in response to the event bus monitoring a state value change occurring in the event bus by executing an action corresponding to the linkage, re-rendering the corresponding user interface of the module; in response to one of the one or more events bound to one or more user interfaces of the module being triggered, executing an action corresponding to the event; and in response to the event bus monitoring a state value change occurring in the event bus by executing an action corresponding to the event, re-rendering the corresponding user interface of the module.

[0094] Optionally, rendering one or more user interfaces of the module based on monitoring events associated with linkage in the module and the one or more events bound to the one or more user interfaces of the module may include: Figure 3A The trigger linkage process 310 and Figure 3B The trigger event process 320 in the processing flow is shown respectively.

[0095] Alternatively, if Figure 3A As shown in the trigger linkage process 310, when a state value changes in the event bus due to the execution of an action (314) corresponding to the linkage, the related UIs can be re-rendered based on the changed state value to update the state value in these UIs.

[0096] Specifically, Figure 3B As shown, a specific event is triggered in any module (for example, Figure 5 After the "click event" in (321), the action corresponding to the event can be loaded and executed (for example, Figure 5 "Start the lottery" in (322, 323). For example, Figure 4 As shown, the execution engine can load the action (403) and execute the action (404). Figure 6 As described, the execution of the action can access the UI state value (405), and the execution engine can call the state manager (406) to perform state management (407) (for example, the above-mentioned mount data access event and data change event) to monitor related events (408).

[0097] Optionally, the action in the present disclosure may refer to a logic fragment, which may support returning a function for clearing side effects, so as to avoid environmental pollution caused by the execution of the action, and avoid the problem of duplicate data that may occur when the action is executed twice. Optionally, the action in the present disclosure needs to define the input and output parameters of the action before development, as well as the event that the action may trigger, so as to ensure the type safety of the action, and the strong verification of the type of the action can avoid the problems of a series of inconsistent protocols such as inconsistent types and undefined parameters. Optionally, in the development process of the action, the input and output parameters of the action can be updated by one key through the command line interface tool (Command Line Interface, CLI), and the type script (TypeScript (TS)) is automatically generated and written into the TS type file to constrain the development process of the developer, and TS type inspection is provided, so as to ensure the development quality of the action. Optionally, the action can, for example, support obtaining the event object currently triggered, support access to the dictionary table data on the current node, and support triggering the event corresponding to the current action, and the present disclosure does not limit this.

[0098] Next, if the execution of the action modifies the state value in the UI ( 324 ), and the event bus detects the change in the state value ( 325 ), the related UI may be re-rendered based on the changed state value.

[0099] The following will refer to Figure 7 A process of re-rendering a related UI in response to a UI state value being modified due to execution of an action is described in detail.

[0100] Figure 7 It is a schematic flowchart showing reactive UI rendering for a module to be rendered according to an embodiment of the present disclosure.

[0101] like Figure 7 As shown, the rendering target is to render a reactive UI for the module to be rendered 701, wherein the reactive UI may refer to a UI that can automatically change according to changes in data. Specifically, the module to be rendered 701 may include a UI to be displayed, Figure 7 The flowchart shown may include event binding and data response for the UI in the to-be-rendered module 701 .

[0102] Optionally, for event binding, first, the IDs of all UI nodes in the module can be found (702), and corresponding events can be bound to each of these nodes (703). As an example, all UI nodes of the module to be rendered can be traversed recursively, and the corresponding triggered events and event actions to be executed can be matched based on the mounted location to achieve event binding. For example, the location where the event needs to be mounted can be automatically found according to the name of the event in the logical configuration.

[0103] Optionally, for data reaction, the data state change in the substore corresponding to the module can be monitored (704), and a simple expression (705) can be calculated when the action is triggered to provide flexible parameter passing. Figure 7 Finally, the reactive UI can be rendered based on the triggering of bound events and the corresponding parameter passing.

[0104] As an example, the expression of the parameter can be parsed before executing the action, the string therein can be extracted, the string can be parsed and the expression can be calculated. After the calculation is completed, it can be spliced ​​into a new string to be passed to the action as the value of the parameter. The expression parsed here can obtain the state value of the node, and support obtaining sub-data from the state value and passing it to the action. Among them, the present disclosure can support the needs of most scenarios by simply parsing the expression by itself, and the trigger parameter supports the passing of expressions, and supports the synchronous calculation of the latest parameter value when the action is triggered, making the action configuration more flexible.

[0105] As described above, based on the logical configuration of each module, the events, methods and linkage relationships in the module can be used to achieve real-time reactive rendering of the UI in the module.

[0106] Through real-time reactive rendering of the UI in the module, when any state value of the UI in the module changes, the UI can be re-rendered to ensure that the latest data is always displayed.

[0107] As an example, considering that the method for page rendering disclosed in the present invention is mainly used on the user terminal side, its network environment may be relatively complex, and it may also be necessary to optimize or automatically retry the interface request, file download and other parts involving network operations due to the influence of network fluctuations, in the embodiment of the present invention, in order to improve the execution performance of the method, optimize the user experience, and reduce useless network bandwidth consumption, the method for page rendering disclosed in the present invention also provides a loading cache mechanism for actions. According to the embodiment of the present invention, the method for page rendering disclosed in the present invention may also include: during the rendering of the page, for an action that has been loaded, when the action is initiated again, directly reuse the loading result previously returned for the action; perform concurrent loading for different actions; and for the same action, when the loading of the action fails, perform reloading with a limited number of loading times.

[0108] Fig. 8A 1 is a schematic flow chart showing the loading cache of actions according to an embodiment of the present disclosure. In the execution process of the method for page rendering of the present disclosure, multiple actions may be loaded at the same time. When a page is loaded, multiple actions may be used at the same time. Therefore, Fig. 8A The process shown can control the loading of actions. Fig. 8A As shown, first, the action to be executed can be obtained in 801, and then, the loading cache mechanism can be executed, that is, in 802, it is determined whether the action has been loaded, and if the action has been loaded, the action is no longer repeatedly loaded, but the loading result 806 previously returned for the action is directly reused. In the case that the action has not been loaded, it can be determined in step 803 whether the action is being loaded, and in the case of "yes", the loading of the action is waited for 805, and in the case of "no", the action is written into the waiting loading queue 804, so as to perform concurrent loading of different actions, thereby improving the response performance, and the loading of these actions will not affect each other. Finally, a failure retry mechanism can also be adopted for the loading of the action, that is, if the loading of the action fails, the action can be reloaded with a limited number of times to prevent accidental loading failures due to network fluctuations.

[0109] As another example, in order to improve the user experience and ensure that the page can respond to the user's operation quickly and timely, the method for page rendering disclosed in the present invention may also use a preloading mechanism for actions. According to an embodiment of the present invention, the method for page rendering disclosed in the present invention may also include: for the page, preloading one or more actions in the page, the one or more actions have not been previously loaded and may be used, such as Figure 3A As shown in 306.

[0110] Figure 8B It is a schematic flowchart showing delayed loading of actions according to an embodiment of the present disclosure.

[0111] like Figure 8B As shown, when the user enters the user-side page 810, no matter whether a certain action is used or not, as long as the action has not been loaded and may be used (loaded) in the future, these actions can be preloaded. Therefore, the preloading mechanism can ensure instant response to the interactive operation performed by the user without delay caused by the loading of the action, making the page use smoother and bringing a better user experience.

[0112] It should be noted that the above event bus is used as a global data storage warehouse to provide the state manager with all state values, dictionary tables and other data required for subsequent operations, and the data of all events / linkages and other processes also come from the global data storage warehouse, and the input and output of the action execution are also obtained and assigned from the data storage warehouse, and the rendering of the UI is also based on the data storage warehouse to achieve reactive rendering. Therefore, as the core of the execution engine, the data storage warehouse connects the complete life cycle of the page through event publishing and subscription and state sharing, and provides each module with the ability to share data and access data individually, while also providing the UI with reactive display capabilities.

[0113] As described above, based on the above-mentioned method for page rendering, the events in the module and the linkage between the module and other modules are parsed by utilizing the logical configuration of each module generated together with each module constituting the page, so that in the rendering of the page, for each module, the user interface in the module is bound to the event according to the logical configuration of the module, and the events associated with the linkage between the modules are monitored to achieve real-time dynamic responsive rendering of the page. Through this method, a logical configuration for describing the association relationship between the various parts in the module can be generated while generating each module, so as to uniformly manage the triggering of events in the module, the definition of methods, and the configuration of linkage, and the association relationship between the modules in the page is connected in series through the linkage configuration, so that the modules communicate and cooperate with each other, and finally complete the dynamic rendering of the entire page.

[0114] Fig. 9 is a diagram showing a system architecture for page rendering according to an embodiment of the present disclosure.

[0115] like Fig. 9 As shown, in the system architecture for page rendering, a module generator 910, a page builder 920, a state manager 930, an event bus 940 and a renderer 950 may be included.

[0116] Optionally, the module generator 910 can generate new modules (and / or templates, where a template can correspond to a complete page and can include multiple modules; for example, the template can be used as a DSL generated by the super module generator 910. After the template is uploaded to the page builder 920, the operator can select the template, create their own page and edit it, such as replacing pictures, modifying text, modifying configuration, etc.), which can be uploaded to the page builder 920 for configuration after verification and testing. Through the development configuration of the module generator 910, the UI and logic can be connected in series to synchronously generate the logical configuration of the module (and / or template).

[0117] Optionally, the page builder 920 may support the creation of new pages based on the modules (and / or templates) generated by the module generator 910, and support the configuration and management of pages for personalized business needs. For example, the types of pages may include activity pages, store pages, content pages, etc. For example, operators can use the modules (and / or templates) generated by the module generator 910 in the page builder 920 to quickly configure the desired pages, and the process supports rapid preview, release of experience environments (i.e., deploying software, applications or websites from a development environment or a test environment to an environment that simulates a real user experience for user trials and feedback), release of live network environments (i.e., deploying software, applications or websites from a development environment or a test environment to an actual production environment for real users to access and use), etc.

[0118] Optionally, the present disclosure also proposes an execution engine, which is configured in a module for building a page, and the module may include one or more user interfaces. The execution engine may be configured to: obtain the logical configuration of the module, wherein the logical configuration of the module is generated together with the module and is used to describe events in the module and the linkage between the module and other modules; based on the logical configuration of the module, monitor events associated with the linkage in the module, and bind one or more events to one or more user interfaces of the module; and render one or more user interfaces of the module based on the monitoring of events associated with the linkage in the module and the one or more events bound to one or more user interfaces of the module.

[0119] As described above, the execution engine can be used to execute the above reference Figure 2 The operations described in this article can be performed by the execution engine as follows: Fig. 9 As shown, it is built into the module generated by the module generator 910 to execute the method for page rendering in the page rendering stage, for example, obtaining the association relationship (912) between UI, logic, events, actions, etc. from the logical configuration of the module for executing UI rendering, etc.

[0120] The module generated by the module generator 910 can essentially be a component that can be run by the page builder 920, but compared with other modules that can be run by the page builder 920, the difference can include that the module can include the execution engine 911 as described above. The execution engine 911 disclosed in the present invention can run stably and smoothly in various scenarios, and can also provide the module generator 910 with richer and more flexible functions. By configuring the execution engine 911 in each module generated by the module generator 910, the rendering process of all modules can be completed by using the execution engine 911 in conjunction with the state manager 930, the event bus 940 and the renderer 950, thereby improving the efficiency of module generation and page rendering.

[0121] Fig.10 It is a schematic diagram showing the construction and application of a page according to an embodiment of the present disclosure.

[0122] According to an embodiment of the present disclosure, the present disclosure also proposes a page construction method, including: a page builder selects one or more modules from a module set generated by a module generator, each of the one or more modules may be configured with an execution engine as described above, each of the one or more modules may include a logic configuration and one or more user interfaces, wherein the logic configuration of each module is generated together with the module by the module generator and is used to describe events in the module and the linkage between the module and other modules; and the page builder builds a page based on the selected one or more modules. As described above and as Fig.10 As shown, the construction of page 1040 may include the generation 1001 of a module by a module generator 1010 and the configuration 1002 of a module by a page builder 1020 .

[0123] According to an embodiment of the present disclosure, the page construction method may further include: the module generator generates the module set for the module generator, each module in the module set may include the execution engine, logic configuration and one or more user interfaces; and each module in the module set is added as a selectable component to the editor of the page builder, the editor of the page builder may include multiple selectable components for building a page, each selectable component corresponds to a module in the module set. Optionally, as Fig.10 As shown, the module generator 1010 can generate a module for the page builder 1020, which can include a UI (JSX), a logic configuration, and an execution engine. The generated module can be included in a module set for the page builder 1020, and can be added to the editor of the page builder for building pages as an optional component for building pages at the page builder 1020. In other words, the module generated by the module generator 1010 can be used as the smallest independent unit that can be added to the editor of the page builder 1020.

[0124] According to an embodiment of the present disclosure, the page builder selecting one or more modules from the module set generated by the module generator may include: the page builder selecting one or more selectable components for building a page corresponding to the predetermined task from the editor of the page builder according to a predetermined task. Optionally, at the page builder, the operator of the page builder may select components for building a page from the selectable component set according to a predetermined task, for example, by selecting one or more selectable components from the editor, wherein the predetermined task may be determined by the operator of the page builder according to personalized demand operations.

[0125] According to an embodiment of the present disclosure, building a page based on one or more selected modules by a page builder may include: the page builder arranges one or more selected selectable components according to the predetermined task to build the page. Optionally, at the page builder, the operator of the page builder can customize the page according to personalized needs. For example, the operator can freely select components in the editor according to their needs, and arrange the selected components (for example, by dragging, copying, pasting, etc.) to complete the page construction.

[0126] This page construction method can make the modules generated by the module generator 1010 more flexible and versatile, provide configuration personnel with richer functions and safer and more flexible configuration methods, and by using a unified execution engine, make page rendering safer and more stable, thereby optimizing the user experience.

[0127] Fig.11is a schematic diagram showing an apparatus 1100 for page rendering according to an embodiment of the present disclosure.

[0128] According to an embodiment of the present disclosure, the apparatus 1100 for page rendering may include a configuration acquisition component 1101 , an association configuration component 1102 , and a page rendering component 1103 .

[0129] Similarly, in addition to the above components, the apparatus for page rendering of the present disclosure may also include a component for creating an event bus for the page. The event bus can be used as a global data storage warehouse, that is, the event bus is used to initialize the data storage warehouse for storing data required for all subsequent operations. Optionally, the data storage warehouse may refer to a system or component for storing and managing data, which may provide a structured way to store and retrieve data, and also provide some additional functions, such as data backup, data recovery, data access control, etc.

[0130] The configuration acquisition component 1101 may be configured to acquire the logical configuration of the page, the logical configuration including the logical configuration of each module in the plurality of modules, wherein the logical configuration of each module is generated together with the module and used to describe events in the module and linkages between the module and other modules. Optionally, the configuration acquisition component 1101 may perform the operations described above with reference to step S201.

[0131] In an embodiment of the present disclosure, when executing page rendering, the logical configuration of the page can be obtained, and the obtained logical configuration can be parsed to obtain the event, method and linkage configuration of each module in the page, wherein the logical configuration of the page may include the logical configuration of each module in the page. It should be noted that the logical configuration of each module is generated together with the corresponding module. That is to say, in an embodiment of the present disclosure, when generating the various modules used to constitute the page, a logical configuration for describing the relationship such as event triggering and linkage configuration in the corresponding module can be generated synchronously, and the logical configuration can be used to explain the various association relationships of the corresponding modules in the page rendering stage.

[0132] Further, in the embodiments of the present disclosure, the page rendering in the browser environment can be taken as an example. The device for page rendering of the present disclosure can perform page rendering when the browser is running. Therefore, the main logic of page rendering can be executed in the runtime layer, where the runtime layer can refer to the runtime environment of the software system, which is an intermediate layer between the operating system and the application program, and is used to provide a series of runtime services and resource management functions to support the execution and operation of the application program. Of course, it should be understood that the page rendering in the above-mentioned browser environment is only used as an example and not a limitation in the present disclosure, and the device for page rendering of the present disclosure can also be applied to page rendering tasks in other situations.

[0133] Optionally, the logical configuration of a module may refer to configuring and controlling the behavior of a module according to specific requirements and conditions when an application (e.g., a browser) is running. In this case, each module may have a specific configuration to define events, methods, linkages, etc. therein according to its specific functions and logic.

[0134] For example, the logical configuration of each module can be specifically used to describe the association relationship between modules such as UI, events, methods, linkages and actions. Among them, events can refer to specific interactive operations that modules can respond to or specific events that are triggered. By configuring events, you can define the operations or logic that modules should perform under specific conditions. Methods can refer to specific functions or operations that modules can call. By configuring methods, you can define specific actions or logic that modules can perform. Linkage can refer to the mutual association and interaction between modules. By configuring linkage, you can define the dependencies and interaction rules between modules to achieve more complex functions and interactive effects. By providing independent logical configurations for each module, the behavior of the module can be controlled and customized more flexibly, and different modules can define events, methods, linkages, etc. according to their own needs and logic to achieve more precise and personalized functions, thereby making the interaction between modules more flexible and scalable.

[0135] Optionally, the logic configuration of each module can be represented as a DSL generated when the module is generated, which can be a specific language used to describe the association relationship between various parts (e.g., events, methods, and linkages, etc.) in the module. For example, the DSL can be a custom language specifically used to describe and define the association relationship between various parts, such as dependency relationships, execution order, etc. When the page is running, the execution engine can parse and execute the rendering of the module according to the DSL of the module, including processing the logic and interaction of various parts according to the association relationship described by the DSL.

[0136] Optionally, the logical configuration of each module may include, but is not limited to, events, methods, and linkages. For example, an event may include a node identifier (ID), name, type, action, and data, and the type may support the definition of events such as loading and clicking; a method may include a node ID and action, etc.; a linkage may include a node ID, a monitoring node ID (listenID), an event name (eventName), a target node ID (target ID), an action, and data. Among them, a node may correspond to a module (or a UI in a module), and each node has a unique ID for identifying the node. The ID may be a string, a number, or another type of identifier for uniquely identifying the node in the system.

[0137] Nodes can interact and communicate with each other through events, methods, and linkages. Events, as messages between nodes, can be used to notify other nodes of a specific event or state change. Methods can be interfaces exposed by nodes to other nodes, which are used by other nodes to call the functions of the node. Linkages can provide collaboration and mutual influence between multiple nodes. The operation or state change of a node may trigger responses from other nodes. Therefore, the logical configuration of each module connects the entire module life cycle in series. Through these configurations, event triggering and method calling within the module, as well as linkage between modules, can be realized.

[0138] After the configuration acquisition component 1101 completes the acquisition and analysis of the logic configuration, the linkage events of the modules can be monitored based on the logic configuration of each module.

[0139] The association configuration component 1102 may be configured to monitor, for each of the plurality of modules, events associated with the linkage in the module based on the logic configuration of the module, and bind one or more events to one or more user interfaces of the module. Optionally, the association configuration component 1102 may perform the operations described above with reference to step S202.

[0140] For example, in order to achieve communication between multiple modules, a state manager can be used, in which the above-mentioned event bus is used as a universal carrier for data access, and the access to page data and the monitoring of data changes are achieved by monitoring events using the event bus.

[0141] Optionally, the event bus can be a mechanism for communication between different modules, which allows modules to be decoupled and interact by publishing and subscribing to events. The event bus can be seen as a central dispatcher for receiving and distributing events, where modules can publish events to the event bus, and other modules can receive and respond accordingly by subscribing to these events, thereby realizing linkage between modules.

[0142] By using the event bus to monitor events associated with linkages in modules, decoupled and loosely coupled communication can be achieved between modules, where publishers do not need to know the existence of subscribers directly, they only need to publish events, and subscribers do not need to know the specific publishers, they only need to subscribe to the events they are interested in. Therefore, the maintainability and scalability of the code can be improved, and the dependencies between modules can be reduced.

[0143] Optionally, for each of the multiple modules, one or more events can be bound to one or more user interfaces of the module based on the logic configuration of the module. Optionally, related events (e.g., loading events, click events, etc.) can be bound to each UI in the module to achieve corresponding association relationships.

[0144] The page rendering component 1103 may be configured to render, for each of the plurality of modules, one or more user interfaces of the module based on monitoring of events associated with linkage in the module and the one or more events bound to the one or more user interfaces of the module. Optionally, the page rendering component 703 may perform the operations described above with reference to step S203.

[0145] For example, reactive rendering for a module can be implemented based on the triggering of a linkage event and / or an event trigger in the module. As described above, the event bus can store the state values ​​involved in the UI in the module (for example, by storing in a sub-store for each module) to implement reactive rendering for the UI in the module based on the monitoring of data changes by the event bus.

[0146] Optionally, based on the logical configuration of each module, the events, methods and linkage relationships in the module can be used to implement real-time reactive rendering of the UI in the module. By real-time reactive rendering of the UI in the module, when any state value of the UI in the module changes, the UI can be re-rendered to ensure that the latest data is always displayed.

[0147] According to yet another aspect of the present disclosure, a device for page rendering is also provided. Fig.12 A schematic diagram of a device 2000 for page rendering according to an embodiment of the present disclosure is shown.

[0148] like Fig.12 As shown, the device 2000 for page rendering may include one or more processors 2010 and one or more memories 2020. The memory 2020 stores a computer-readable code, and when the computer-readable code is run by the one or more processors 2010, the method for page rendering as described above may be executed.

[0149] The processor in the embodiments of the present disclosure may be an integrated circuit chip having signal processing capabilities. The processor may be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application may be implemented or executed. The general-purpose processor may be a microprocessor or the processor may be any conventional processor, etc., and may be an X86 architecture or an ARM architecture.

[0150] In general, various example embodiments of the present disclosure may be implemented in hardware or dedicated circuits, software, firmware, logic, or any combination thereof. Certain aspects may be implemented in hardware, while other aspects may be implemented in firmware or software that may be executed by a controller, microprocessor, or other computing device. When various aspects of the embodiments of the present disclosure are illustrated or described as block diagrams, flow charts, or using some other graphical representation, it will be understood that the blocks, devices, systems, techniques, or methods described herein may be implemented in hardware, software, firmware, dedicated circuits or logic, general purpose hardware or controllers or other computing devices, or some combination thereof as non-limiting examples.

[0151] For example, the method or device according to the embodiment of the present disclosure may also be implemented by Fig.13 The architecture of the computing device 3000 shown in FIG. Fig.13 As shown, the computing device 3000 may include a bus 3010, one or more CPUs 3020, a read-only memory (ROM) 3030, a random access memory (RAM) 3040, a communication port 3050 connected to a network, an input / output component 3060, a hard disk 3070, etc. The storage device in the computing device 3000, such as the ROM 3030 or the hard disk 3070, may store various data or files used for processing and / or communication of the method for page rendering provided by the present disclosure and program instructions executed by the CPU. The computing device 3000 may also include a user interface 3080. Of course, Fig.13 The architecture shown is only exemplary and can be omitted according to actual needs when implementing different devices. Fig.13 One or more components of a computing device are shown.

[0152] According to another aspect of the present disclosure, a computer-readable storage medium is also provided. Computer-readable instructions are stored on the computer storage medium. When the computer-readable instructions are executed by a processor, the method for page rendering according to the embodiment of the present disclosure described with reference to the above figures can be executed. The computer-readable storage medium in the embodiment of the present disclosure may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of exemplary but not limiting description, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous connection dynamic random access memory (SLDRAM), and direct memory bus random access memory (DR RAM). It should be noted that memory of the methods described herein is intended to include, but is not limited to, these and any other suitable types of memory. It should be noted that memory of the methods described herein is intended to include, but is not limited to, these and any other suitable types of memory.

[0153] The embodiments of the present disclosure also provide a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. The processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device performs the method for page rendering according to the embodiments of the present disclosure.

[0154] Embodiments of the present disclosure provide a method, apparatus, device and medium for page rendering, as well as an execution engine and a page construction method.

[0155] The method provided by the embodiment of the present disclosure parses the events in the module and the linkage between the module and other modules by utilizing the logical configuration of each module generated together with each module constituting the page, so that in the rendering of the page, for each module, the user interface in the module is bound to the event according to the logical configuration of the module, and the events associated with the linkage between the modules are monitored to achieve real-time dynamic responsive rendering of the page. The method of the embodiment of the present disclosure can generate a logical configuration for describing the association relationship between the various parts in the module while generating each module, so as to uniformly manage the triggering of events in the module, the definition of methods, and the configuration of linkage, and the association relationship between the various modules in the page is connected in series through the linkage configuration, so that the modules communicate and cooperate with each other, and finally complete the dynamic rendering of the entire page.

[0156] It should be noted that the flowcharts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, a program segment, or a part of a code, and the module, program segment, or a part of the code contains at least one executable instruction for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of boxes in the block diagram and / or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0157] In general, various example embodiments of the present disclosure may be implemented in hardware or dedicated circuits, software, firmware, logic, or any combination thereof. Certain aspects may be implemented in hardware, while other aspects may be implemented in firmware or software that may be executed by a controller, microprocessor, or other computing device. When various aspects of the embodiments of the present disclosure are illustrated or described as block diagrams, flow charts, or using some other graphical representation, it will be understood that the blocks, devices, systems, techniques, or methods described herein may be implemented in hardware, software, firmware, dedicated circuits or logic, general purpose hardware or controllers or other computing devices, or some combination thereof as non-limiting examples.

[0158] The exemplary embodiments of the present disclosure described in detail above are merely illustrative and not restrictive. It should be understood by those skilled in the art that various modifications and combinations may be made to these embodiments or their features without departing from the principles and spirit of the present disclosure, and such modifications should fall within the scope of the present disclosure.

Claims

1. A method for page rendering, wherein the page includes a plurality of modules, wherein each module includes one or more user interfaces, the method comprising: Acquire a logic configuration of the page, the logic configuration including a logic configuration of each module in the plurality of modules, wherein the logic configuration of each module is generated together with the module and is used to describe an event in the module and a linkage between the module and other modules; For each module in the plurality of modules, based on the logic configuration of the module, monitoring events associated with linkage in the module, and binding one or more events to one or more user interfaces of the module; and For each module in the plurality of modules, one or more user interfaces of the module are rendered based on monitoring events associated with linkages in the module and the one or more events bound to the one or more user interfaces of the module.

2. The method of claim 1, further comprising: Creating an event bus for the page, wherein the event bus is used to monitor the triggering of events in the page; Wherein, monitoring the events associated with the linkage in the module based on the logic configuration of the module includes monitoring the triggering of the events associated with the linkage in the module by using the event bus.

3. The method of claim 2, wherein: The monitoring of the triggering of events associated with the linkage in the modules by using the event bus includes: In response to an event associated with the linkage in the module being triggered during execution of an action of the page, triggering the event associated with the linkage in the module in the event bus; and In response to the event bus detecting the event associated with the linkage in the module being triggered in the event bus, an action corresponding to the linkage is executed.

4. The method of claim 3, wherein: The event bus is used as a data storage repository for page rendering, for storing the state value of the user interface of the page; The rendering of one or more user interfaces of the module based on monitoring events associated with the linkage in the module and the one or more events bound to the one or more user interfaces of the module includes: In response to the event bus detecting a change in a state value occurring in the event bus by executing an action corresponding to the linkage, re-rendering a corresponding user interface of the module; In response to one of the one or more events bound to one or more user interfaces of the module being triggered, executing an action corresponding to the event; and In response to the event bus detecting a change in a state value in the event bus caused by executing an action corresponding to the event, the corresponding user interface of the module is re-rendered.

5. The method of claim 4, further comprising: For each module in the plurality of modules, a sub-event bus is created for the module in the event bus, so as to separately store state values ​​of one or more user interfaces of the module.

6. The method of claim 1, further comprising: During the rendering of the page, for an action that has been loaded, when the action is initiated again, the loading result previously returned for the action is directly reused; Perform concurrent loading for different actions; as well as For the same action, if the loading of the action fails, reloading is performed with a limited number of loading times.

7. The method of claim 1, further comprising: For the page, one or more actions in the page are preloaded, the one or more actions not previously loaded and potentially usable.

8. An execution engine, configured in a module for building a page, the module comprising one or more user interfaces, the execution engine being configured to: Get the logical configuration of the module, where: The logic configuration of the module is generated together with the module and is used to describe events in the module and linkages between the module and other modules; Based on the logic configuration of the module, monitor events associated with the linkage in the module, and bind one or more events to one or more user interfaces of the module; as well as Based on monitoring events associated with linkages in the module and the one or more events bound to the one or more user interfaces of the module, one or more user interfaces of the module are rendered.

9. A page construction method, comprising: A page builder selects one or more modules from a module set generated by a module generator, each of the one or more modules being configured with the execution engine according to claim 8, and each of the one or more modules comprising a logic configuration and one or more user interfaces, wherein the logic configuration of each module is generated together with the module by the module generator and is used to describe events in the module and linkages between the module and other modules; and The page builder builds the page based on the selected module or modules.

10. The method of claim 9, further comprising: The module generator generates the module set for the module generator, each module in the module set includes the execution engine, a logic configuration and one or more user interfaces; as well as Each module in the module set is added as a selectable component to an editor of the page builder, the editor of the page builder comprising a plurality of selectable components for building a page, wherein each selectable component corresponds to a module in the module set.

11. The method of claim 10, wherein: The page builder selects one or more modules from the module set generated by the module generator, including: The page builder selects one or more selectable components from an editor of the page builder according to a predetermined task to build a page corresponding to the predetermined task.

12. The method of claim 11, wherein: Building a page based on one or more selected modules by the page builder includes: The page builder arranges the selected one or more selectable components according to the predetermined task to construct the page.

13. A device for page rendering, the page comprising a plurality of modules, each of which comprises one or more user interfaces, the device comprising: a configuration acquisition component configured to acquire a logic configuration of the page, wherein the logic configuration includes a logic configuration of each module in the plurality of modules, wherein the logic configuration of each module is generated together with the module and is used to describe an event in the module and a linkage between the module and other modules; an association configuration component configured to monitor, for each module in the plurality of modules, events associated with linkage in the module based on the logic configuration of the module, and bind one or more events to one or more user interfaces of the module; and The page rendering component is configured to render one or more user interfaces of each module in the multiple modules based on monitoring events associated with the linkage in the module and the one or more events bound to the one or more user interfaces of the module.

14. A device for page rendering, comprising: one or more processors; as well as One or more memories, wherein a computer executable program is stored, and when the computer executable program is executed by the processor, the method according to any one of claims 1 to 7 is performed.

15. A computer program product, stored on a computer-readable storage medium, and comprising computer instructions which, when executed by a processor, cause a computer device to perform the method of any one of claims 1 to 7.

16. A computer-readable storage medium having computer-executable instructions stored thereon, wherein the instructions are used to implement the method according to any one of claims 1 to 7 when executed by a processor.

Images