System and method based on web application development

Abstract

The invention provides a system and method based on web application development, the system comprises a development platform and an operation platform, the development platform provides rich UI components, interaction information and a built-in API of data processing logic, and codes are expanded and executed through a dynamic context management system; the operation platform compiles and executes the structured data generated by the development platform so as to perform web application operation; according to the method, UI layout and interactive logic design are carried out through a visual interface, and a page structure and logic are generated; data processing, interaction logic and event binding are realized by utilizing an API (Application Program Interface) built in the platform; a context management system is used for transmitting states, events and methods in three levels of global, page and component, and data flow management is simplified; converting a page and logic designed by a user into structured DSL (Digital Subscriber Line) data, including component layout, event processing logic and a data transmission mechanism; the DSL data is analyzed through the operation platform, executable front-end codes are generated, and rendering and interaction of the Web application are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of web applications, and in particular to a system and method based on web application development. Background Art

[0002] As the scale and complexity of Web applications continue to increase, traditional development methods require a large number of developers to invest, and during the development cycle, it is difficult to efficiently achieve synchronization between UI design and code implementation, resulting in long development cycles, high costs, and complex updates and maintenance. Although some existing low-code platforms provide visual development methods, they have obvious limitations in interactive logic processing, code scalability and flexibility, and are difficult to cope with the flexibility and freedom of developers in quickly building complex applications and frequently updating needs. This has greatly restricted the capabilities and efficiency of developers. For this reason, the applicant proposes a system and method based on web application development, which greatly shortens the development cycle through built-in APIs and context management mechanisms. Developers can complete the development of a Web page with complex interactive logic in a few hours through visual drag-and-drop operations and rich event interaction protocols. Compared with traditional development methods, the development time is reduced by more than 70%. Summary of the invention

[0003] To solve the above technical problems, the present invention proposes a system and method based on web application development. The system provides rich UI components, interactive information, and built-in APIs for data processing logic through a development platform, and the code is expanded and executed through a dynamic context management system; the running platform compiles and executes the structured data generated by the development platform to run the web application; the method performs UI layout and interactive logic design through a visual interface to generate page structure and logic; uses the platform's built-in API to implement data processing, interactive logic, and event binding; uses the context management system to transfer states, events, and methods at three levels: global, page, and component, to simplify data flow management; converts user-designed pages and logic into structured DSL data, including component layout, event processing logic, and data transmission mechanism; parses DSL data through the running platform and generates executable front-end code to implement rendering and interaction of Web applications; the system and method greatly shorten the development cycle and improve efficiency.

[0004] To achieve the above object, the technical solution adopted by the present invention is:

[0005] A system and method based on web application development, including a development platform and an operation platform; the characteristics are as follows: the system based on web application development is that the development platform provides a rich set of UI components, interactive information, and built-in APIs for data processing logic, and developers can quickly build page layouts and interactive logic through the platform's visual interface; the code is extended and executed through a dynamic context management system, providing dynamic transmission of global, page, and component three-level states and methods, and supporting event binding and data processing; developers do not need to manually manage complex states and logics, and can achieve efficient development through the built-in API; the platform converts the code written by the user into structured DSL data, and through the operation platform compilation and execution, realizes efficient rendering and interaction of Web applications; the operation platform compiles and executes the structured data produced by the development platform to run the web application.

[0006] Furthermore, the state transfer algorithm in the component state update process of the computing context system in the system based on web application development is:

[0007] S_{n+1}(t)=S_n(t)+ΔS(t)

[0008] Where: S_n(t) represents the current state of the component at time t

[0009] ΔS(t) represents the state change caused by event triggering, which can be calculated based on different event types and current component states;

[0010] S_{n+1}(t) represents the updated state.

[0011] Furthermore, the algorithm for data transmission between components and global context in the system based on web application development is: C_{global}=[S_{page1},S_{page2},\dots,S_{componentN}]

[0012] Where: C_{global} represents the data state set in the global context;

[0013] S_{page1} represents the status of each page;

[0014] S_{componentN} represents the status of each component.

[0015] Furthermore, when the status of a component in the system developed based on the web application changes, the algorithm for updating the status is as follows:

[0016] C_{global}^{new}=C_{global}+ΔC

[0017] Among them: ΔC represents the change of local state, which may be caused by the state update of a component. It can be the state increment of the component or the change of data.

[0018] Furthermore, the event processing algorithm in the system based on web application development is:

[0019] E(t)\rightarrow f(S_n)=S_{n+1}

[0020] Where: E(t) represents the event triggered at time t;

[0021] f(S_n) represents the impact function of the event on the current state S_n; different types of events will modify the state of the component in different ways, generating a new state S_{n+1}.

[0022] Furthermore, the algorithm for generating DSL data in the system based on web application development is:

[0023] DSL_{output}=M(S_{components}, A_{actions})

[0024] Where: M represents the mapping function, which maps component states and interaction actions into DSL data;

[0025] S_{components} represents the state set of each component in the page;

[0026] A_{actions} represents the set of interaction actions of a component.

[0027] Furthermore, the algorithm for context state transformation in the system based on web application development is:

[0028] frac{dS}{dt}=f(E(t),S(t))

[0029] Among them: frac{dS}{dt} represents the rate of change of state over time;

[0030] E(t) represents the triggering of the event at time t;

[0031] S(t) represents the state of the system at time t;

[0032] f represents the impact function of the event on the state.

[0033] Furthermore, the algorithm for calculating the coordinate value after rotation designed in the visual interaction process in the system developed based on the web application is:

[0034] x'=(x_0-x_c)*\cos(\theta)-(y_0-y_c)*\sin(\theta)+x_c

[0035] y'=(x_0-x_c)*\sin(\theta)+(y_0-y_c)*\cos(\theta)+y_c

[0036] Among them: (x_0, y_0) is the coordinate of the point before rotation;

[0037] (x_c, y_c) is the center of rotation;

[0038] theta is the rotation angle, unit: radian;

[0039] (x', y') are the new coordinates after rotation.

[0040] Furthermore, the algorithm for detecting whether the rotated rectangles collide in the system based on web application development is: first, the normal vector calculation formula needs to be calculated as follows:

[0041] n=(y j -y i , x i -x j )

[0042] Where: (x i ,y i ) and (x j ,y j ) are the two endpoints of the side of the rectangle. ;

[0043] n is a vector perpendicular to the edge, serving as the separating axis for subsequent projections;

[0044] The projection formula is:

[0045]

[0046] Where: (x k ,y k ) are the coordinates of the projection point;

[0047] (x i ,y i ) and (x j ,y j ) are the two endpoints of the side length.

[0048] The denominator represents the magnitude of the normal vector, i.e. the length of the vector;

[0049] Interval overlap judgment:

[0050] For rectangle A and rectangle B, compare their projection intervals on each separating axis; if the projection intervals on any axis do not overlap, it means that rectangle A and rectangle B will not collide; the judgment formula for interval overlap is that if max(P_A)<min(P_B) or max(P_B)<min(P_A), no collision occurs; P_A and P_B represent the projection intervals of rectangle A and rectangle B on a certain separating axis respectively.

[0051] A system method based on web application development, the specific steps of the system and method based on web application development are:

[0052] Step 1: Design UI layout and interaction logic through a visual interface to generate page structure and logic;

[0053] Step 2: Use the platform's built-in API to implement data processing, interaction logic, and event binding;

[0054] Step 3: Use the context management system to pass states, events, and methods at the global, page, and component levels to simplify data flow management;

[0055] Step 4: Convert the user-designed pages and logic into structured DSL data, including component layout, event processing logic, and data transmission mechanism;

[0056] Step 5: Parse DSL data through the running platform and generate executable front-end code to realize the rendering and interaction of Web applications.

[0057] The benefits of this application are:

[0058] 1. The system and method based on web application development are not limited to the development framework, and what is generated is structured data, which can update the rendering engine in a timely and targeted manner;

[0059] 2. Systems and methods based on web application development can consume the ecosystem produced by traditional development and access various packaged functions without having to generate platform-limited components again;

[0060] 3. The system and method based on web application development are not limited to specific business scenarios. Large screens, background management, etc. can all be developed. At the same time, traditional codes are provided for auxiliary development;

[0061] 4. The system and method based on web application development greatly shortens the development cycle through built-in API and context management mechanism. Developers can complete the development of a web page with complex interactive logic within a few hours through visual drag-and-drop operations and rich event interaction protocols. Compared with traditional development methods, the development time is reduced by more than 70%;

[0062] 5. The built-in context management system based on the system and method for web application development can automatically transmit the global, page and component status information and event handling methods, reducing the complexity of developers manually managing data flows;

[0063] 6. The DSL data structure generated by the system and method platform based on web application development is highly modularized and can be updated by simply modifying the component configuration, greatly reducing maintenance costs; the built-in API and UI component library also support high code reuse, reducing repeated development workload and improving development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0064] Figure 1 It is a schematic diagram of the collection of UI components, interaction information, and coding information of the present invention;

[0065] Figure 2 A flowchart of DSL data compilation and execution according to the present invention. DETAILED DESCRIPTION

[0066] The present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments:

[0067] like Figure 1-2 As shown, a system and method based on web application development are shown, including a development platform and an operating platform; the characteristics are: the system based on web application development is that the development platform provides a rich set of UI components, interactive information, and built-in APIs for data processing logic, and developers can quickly build page layouts and interactive logic through the platform's visual interface; the code is expanded and executed through a dynamic context management system, providing dynamic transmission of global, page, and component three-level states and methods, and supporting event binding and data processing; developers do not need to manually manage complex states and logic, and can achieve efficient development through built-in APIs; the platform converts the code written by the user into structured DSL data, and compiles and executes it through the operating platform to achieve efficient rendering and interaction of Web applications; the operating platform compiles and executes the structured data produced by the development platform to run the web application.

[0068] The state transfer algorithm in the process of updating the component state in the computing context system in the system based on web application development is shown as follows:

[0069] S_{n+1}(t)=S_n(t)+ΔS(t)

[0070] Where: S_n(t) represents the current state of the component at time t

[0071] ΔS(t) represents the state change caused by event triggering, which can be calculated based on different event types and current component states;

[0072] S_{n+1}(t) represents the updated state.

[0073] The algorithm for data transfer between components and the global context in the system based on web application development is shown as follows:

[0074] C_{global}=[S_{page1}, S_{page2}, \dots, S_{componentN}]

[0075] Where: C_{global} represents the data state set in the global context;

[0076] S_{page1} represents the status of each page;

[0077] S_{componentN} represents the status of each component.

[0078] When the status of a component in a system developed based on a web application changes, the algorithm for updating the status is as follows:

[0079] C_{global}^{new}=C_{global}+ΔC

[0080] Among them: ΔC represents the change of local state, which may be caused by the state update of a component. It can be the state increment of the component or the change of data.

[0081] The algorithm for event processing in the system based on web application development is shown as follows:

[0082] E(t)\rightarrow f(S_n)=S_{n+1}

[0083] Where: E(t) represents the event triggered at time t;

[0084] f(S_n) represents the impact function of the event on the current state S_n; different types of events will modify the state of the component in different ways, generating a new state S_{n+1}.

[0085] The algorithm for generating DSL data in the system based on web application development is shown as follows:

[0086] DSL_{output}=M(S_{components}, A_{actions})

[0087] Where: M represents the mapping function, which maps component states and interaction actions into DSL data;

[0088] S_{components} represents the state set of each component in the page;

[0089] A_{actions} represents the set of interaction actions of a component.

[0090] The algorithm for context state transformation in the system based on web application development is shown as follows:

[0091] frac{dS}{dt}=f(E(t),S(t))

[0092] Among them: frac{dS}{dt} represents the rate of change of state over time;

[0093] E(t) represents the triggering of the event at time t;

[0094] S(t) represents the state of the system at time t;

[0095] f represents the impact function of the event on the state.

[0096] The algorithm for calculating the coordinate value after rotation designed in the visual interaction process in the system developed based on the web application is as follows:

[0097] x'=(x_0-X_c)*\cos(\theta)-(y_0-y_c)*\sin(\theta)+X_c

[0098] y'=(x_0-X_c)*\sin(\theta)+(y_0-y_c)*\cos(\theta)+y_c

[0099] Among them: (x_0, y_0) is the coordinate of the point before rotation;

[0100] (x_c, y_c) is the center of rotation;

[0101] theta is the rotation angle, unit: radian;

[0102] (x', y') are the new coordinates after rotation.

[0103] The algorithm for detecting whether the rotated rectangles collide in the system developed based on the web application is as follows:

[0104] First, we need to calculate the normal vector:

[0105] n=(y j y i , x i -x j )

[0106] Where: (x i ,y i ) and (x j ,y j) are the two endpoints of the side of the rectangle. ;

[0107] n is a vector perpendicular to the edge, serving as the separating axis for subsequent projections;

[0108] The projection formula is:

[0109]

[0110] Where: (x k ,y k ) are the coordinates of the projection point;

[0111] (x i ,y i ) and (x j ,y j ) are the two endpoints of the side length.

[0112] The denominator represents the magnitude of the normal vector, i.e. the length of the vector;

[0113] Interval overlap judgment:

[0114] For rectangle A and rectangle B, compare their projection intervals on each separating axis; if the projection intervals on any axis do not overlap, it means that rectangle A and rectangle B will not collide; the judgment formula for interval overlap is that if max(P_A)<min(P_B) or max(P_B)<min(P_A), no collision occurs; P_A and P_B represent the projection intervals of rectangle A and rectangle B on a certain separating axis respectively.

[0115] A system method based on web application development, characterized in that: the system and method based on web application development have the following specific steps:

[0116] Step 1: Design UI layout and interaction logic through a visual interface to generate page structure and logic;

[0117] Step 2: Use the platform's built-in API to implement data processing, interaction logic, and event binding;

[0118] Step 3: Use the context management system to pass states, events, and methods at the global, page, and component levels to simplify data flow management;

[0119] Step 4: Convert the user-designed pages and logic into structured DSL data, including component layout, event processing logic, and data transmission mechanism;

[0120] Step 5: Parse DSL data through the running platform and generate executable front-end code to realize the rendering and interaction of Web applications.

[0121] The development platform shown in the figure can directly build pages visually based on existing resources. For resources that are not available on the platform, they can be imported and used in the form of pictures, codes, and materials, and finally a series of structured data can be generated and stored in the database; then the operation platform can be directly embedded in the business or the operation platform engine can be integrated to render and run the web application. It does not limit the development framework, but generates structured data, which can update the rendering engine in a timely and targeted manner; it can consume the ecology produced by traditional development, access various packaged functions, and does not need to generate platform-limited available components again; it is not limited to specific business scenarios, and large screens, background management, etc. can all be developed, while providing traditional code for auxiliary development; the built-in API and context management mechanism greatly shorten the development cycle. Developers can complete the development of a Web page with complex interactive logic in a few hours through visual drag-and-drop operations and rich event interaction protocols. Compared with traditional development methods, the development time is reduced by more than 70%. At the same time, the built-in context management system can automatically transmit global, page and component status information and event handling methods, reducing the complexity of developers manually managing data flows; the DSL data structure generated by the platform is highly modular, and updates can be completed by simply modifying the component configuration, greatly reducing maintenance costs; the built-in API and UI component library also support high code reuse, reducing repetitive development workload and improving development efficiency.

[0122] like Figure 1 As shown in the figure, it shows a collection of UI components, interaction information, and encoding information. The platform converts this information into structured DSL data and generates executable front-end code from this data through the rendering engine. The entire process relies on the built-in event protocol and context management system. Developers can use these mechanisms to flexibly write and manage interaction logic in a visual interface, greatly improving development efficiency.

[0123] like Figure 2 As shown in the figure, it shows the process of DSL data compilation and execution. The platform first parses the DSL data and determines whether it contains built-in API logic. If so, it directly calls the API for processing. Otherwise, it enters the compilation process, converts the page and component interaction logic in the DSL data into executable code, and calls the component's life cycle function to ensure that the application can render and interact as expected.

[0124] When using it, users obtain UI materials according to Web business needs and upload them to the material library of the development platform, and use the platform's built-in UI components and interactive logic tools to build pages; developers can use the built-in code editor to write business logic or call Restful data interfaces. The written code is automatically bound to the status and events of the page components and generates structured DSL data; these DSL data describe in detail the component layout, linkage logic, data transmission, user interaction and other information of the Web page; the generated data can be exported locally or stored in a database, and the running platform is responsible for compiling this data and generating the final executable Web application. Users can view the final application effect through the running platform or embedded Web plug-in.

[0125] The above description is only a preferred embodiment of the present invention and does not constitute any other form of limitation to the present invention. Any modification or equivalent change made based on the technical essence of the present invention still falls within the scope of protection required by the present invention.

Claims

1. A system based on web application development, including a development platform and an operation platform; characterized in that: The system based on web application development is a development platform that provides rich UI components, interactive information, and built-in APIs for data processing logic. Developers can quickly build page layouts and interactive logic through the platform's visual interface; the code is expanded and executed through a dynamic context management system, which provides dynamic transmission of global, page, and component three-level states and methods, and supports event binding and data processing; developers do not need to manually manage complex states and logic, and can achieve efficient development through built-in APIs; the platform converts the code written by the user into structured DSL data, and compiles and executes it through the running platform to achieve efficient rendering and interaction of Web applications; the running platform compiles and executes the structured data produced by the development platform to run the web application.

2. A system based on web application development according to claim 1, characterized in that: The state transfer algorithm in the component state update process of the computing context system in the system based on web application development is: S_{n+1}(t)=S_n(t)+ΔS(t) Where: S_n(t) represents the current state of the component at time t ΔS(t) represents the state change caused by event triggering, which can be calculated based on different event types and current component states; S_{n+1}(t) represents the updated state.

3. A system based on web application development according to claim 1, characterized in that: The algorithm for data transmission between components and global context in the system based on web application development is: C_{global}=[S_{page1},S_{page2},\dots,S_{componentN}] Where: C_{global} represents the data state set in the global context; S_{page1} represents the status of each page; S_{componentN} represents the status of each component.

4. A system based on web application development according to claim 1, characterized in that: When the state of a component in the system based on web application development changes, the algorithm for the state update process is: C_{global}^{new}=C_{global}+ΔC Among them: ΔC represents the change of local state, which may be caused by the state update of a component. It can be the state increment of the component or the change of data.

5. A system based on web application development according to claim 1, characterized in that: The algorithm for event processing in the system based on web application development is: E(t)\rightarrow f(S_n)=S_{n+1} Where: E(t) represents the event triggered at time t; f(S_n) represents the impact function of the event on the current state S_n; different types of events will modify the state of the component in different ways, generating a new state S_{n+1}.

6. A system based on web application development according to claim 1, characterized in that: The algorithm for generating DSL data in the system based on web application development is: DSL_{output}=M(S_{components},A_{actions}) Where: M represents the mapping function, which maps component states and interaction actions into DSL data; S_{components} represents the state set of each component in the page; A_{actions} represents the set of interaction actions of a component.

7. A system based on web application development according to claim 1, characterized in that: The algorithm for context state transformation in the system based on web application development is: \(\frac{dS}{dt}=f(E(t),S(t))\) where \(\frac{dS}{dt}\) represents the rate of change of the state with respect to time; E(t) represents the triggering situation of the event at time t; S(t) represents the state of the system at time t; f represents the influence function of the event on the state.

8. A system based on web application development according to claim 1, characterized in that: The algorithm for calculating the coordinate values after rotation involved in the visualization interaction process in the system based on web application development is as follows: x'=(x_0 - x_c)*\cos(\theta)-(y_0 - y_c)*\sin(\theta)+x_c y'=(x_0 - x_c)*\sin(\theta)+(y_0 - y_c)*\cos(\theta)+y_c where: (x_0,y_0) are the coordinates of the point before rotation; (x_c,y_c) is the center point of rotation; theta is the rotation angle, unit: radian; (x',y') are the new coordinates after rotation.

9. A system based on web application development according to claim 1, characterized in that: The algorithm for detecting whether the rotated rectangles collide in the system based on web application development is as follows: First, it is necessary to calculate the normal vector calculation formula as follows: n=(and j -and i ,x i -x j ) where: (xi,yi) and (xi,yj) are two end points on the side of the rectangle. n is the vector perpendicular to the side, serving as the separating axis for subsequent projections; The projection formula is: Where: (x k ,y k ) are the coordinates of the projection point; (x i ,y i ) and (x j ,y j ) are the two endpoints of the side length. The denominator represents the modulus of the normal vector, that is, the length of the vector; Interval overlap judgment: For rectangle A and rectangle B, compare their projection intervals on each separating axis; if the projection intervals on any axis do not overlap, it means that rectangle A and rectangle B do not collide; the judgment formula for interval overlap is that if max(P_A)<min(P_B) or max(P_B)<min(P_A), then no collision occurs; P_A and P_B respectively represent the projection intervals of rectangle A and rectangle B on a certain separating axis.

10. A method for developing a web application system based on any one of claims 1 to 9, characterized in that: The specific steps are as follows: Step 1: Design the UI layout and interaction logic through the visualization interface to generate the page structure and logic; Step 2: Utilize the built-in APIs of the platform to implement data processing, interaction logic, and event binding; Step 3: Use the context management system to transfer states, events, and methods at the global, page, and component levels to simplify data flow management; Step 4: Convert the page and logic designed by the user into structured DSL data, including component layout, event handling logic, and data transmission mechanism; Step 5: Parse the DSL data through the running platform and generate executable front-end code to achieve the rendering and interaction of the web application.

Images