Low-code tool compatible with multiple technical frameworks

Abstract

The invention discloses a low-code tool compatible with multiple technical frameworks, and relates to the technical field of low-code development platforms, the tool adopts a front-end low-code technology, follows a setup protocol schema specification, and specifically comprises a designer used for visual arrangement of a page so as to generate a schema file for describing a page structure and logic by dragging, dropping and configuring interface elements; the renderer is used for analyzing the schema file during operation and dynamically generating a corresponding page view; the cross-platform component API is used for respectively providing unified standardized interfaces for the designer and the renderer and is used for defining, editing and managing schema files of pages and ensuring that page structures generated by the designer can be seamlessly transmitted to the renderer; and the sandbox isolation layer ensures that a low-code tool has compatibility in different front-end frames by virtue of a Web Compenent technology and a ShadowRoot technology thereof, so that sandbox isolation is realized. The device can be integrated into an existing project in a component mode, and large-scale adaptation work is not needed.

Description

Technical Field

[0001] The present invention relates to the technical field of low-code development platforms, and specifically, it is a low-code tool that is compatible with multiple technical frameworks. Background Art

[0002] With the advancement of digital transformation, there is an extremely urgent need for the rapid delivery of software projects in aspects such as improving the efficiency of government services, promoting social digital development, coping with market competition, and pursuing business innovation. However, due to the long development cycle and high cost of traditional software development models, it has become difficult to adapt to today's fast-paced business environment.

[0003] To address this challenge, low-code development platforms have gradually emerged as an effective means to accelerate application development. By providing a visual development environment, low-code platforms lower the development threshold, enabling business personnel to also participate in the construction of applications, thereby significantly improving development efficiency. Nevertheless, existing low-code platforms often rely on specific technology stacks or frameworks, which makes it difficult to integrate them with projects of different technical architectures. Usually, in order to introduce a low-code platform into an existing project, developers need to perform a large amount of adaptation work, and may even use the performance-inefficient iframe nesting method, which not only limits the flexibility of the application but also may lead to a poor user experience. Summary of the Invention

[0004] In view of the current technical development needs and deficiencies, the present invention provides a low-code tool that is compatible with multiple technical frameworks. This tool can be integrated into existing projects in the form of components without large-scale adaptation work, and through optimized technical means, it ensures efficient and stable operation under various technical architectures.

[0005] For a low-code tool that is compatible with multiple technical frameworks of the present invention, the technical solutions adopted to solve the above technical problems are as follows:

[0006] A low-code tool that is compatible with multiple technical frameworks adopts front-end low-code technology, follows the schema specification of the construction protocol, has good integratability, and specifically includes the following structure:

[0007] A designer that encapsulates complex layout and interaction logics for visual arrangement of pages, facilitating users to generate a schema file describing the page structure and logic by dragging and dropping and configuring interface elements;

[0008] A renderer that is independent of the designer and is used to parse the schema file at runtime and dynamically generate corresponding page views according to different rendering contexts;

[0009] The cross-platform component API provides unified standardized interfaces for the designer and the renderer respectively, which are used to define, edit, and manage the schema file of the page, ensuring that the page structure generated by the designer can be seamlessly passed to the renderer;

[0010] The sandbox isolation layer ensures the compatibility of the low-code tool in different front-end frameworks by means of Web Component technology. At the same time, it uses its ShadowRoot technology to encapsulate the styles, scripts, and DOM structure of the low-code tool in an independent Shadow DOM subtree to achieve sandbox isolation;

[0011] The memory optimization module is used to use the build tool plugin in the development environment to load the core dependencies of the low-code tool into the memory, thereby improving the compilation and hot update speed.

[0012] Optionally, the initialization process of the involved designer is as follows:

[0013] The loading processes of built-in materials and remote materials, the registration process of the low-code engine plugin system, and the initialization of the designer system parameter configuration are all encapsulated in the Editor method, and the Editor method is registered in the Window global variable;

[0014] Finally, the initialization of the designer can be achieved by simply calling Window.Editor(params).

[0015] Further optionally, the built-in materials and remote materials of the involved designer allow users to customize. The material scripts customized by users are unpredictable. The following specific measures are taken to prevent the unpredictability of the material scripts:

[0016] i) Use MutationObserver to monitor DOM changes: When loading the material script, use MutationObserver in the Web API to monitor the changes of the DOM in real time;

[0017] ii) Move scripts and styles to the sandbox shadowRoot: Once it is monitored that new scripts and styles are dynamically generated in the DOM, the newly generated scripts and styles are moved from the header to the isolated sandbox shadowRoot;

[0018] iii) Remove the monitoring: After the page rendering is completed, use the nextTick method to remove the monitoring of DOM changes in the first rendering frame after the page rendering is completed.

[0019] Further optionally, during the operation of the involved renderer, first, the rendering logic, as well as the script loading and processing logic, are encapsulated in the Preview method. Then, the Preview method is mounted to the Window global object to provide a unified entry for external calls to the page rendering function;

[0020] When page rendering is required, simply call Window.Preview(schema), and the renderer will dynamically generate and complete the page rendering according to the rules and data defined by the incoming schema parameter. Among them, the schema parameter is the parameter passed to the Preview method, which contains the structural and data information required for page rendering. The Preview method will execute the corresponding rendering and processing logic according to the schema parameter to achieve the correct rendering of the page.

[0021] Optionally, in the cross-platform low-code development scenario, the involved cross-platform component API has the following functions:

[0022] (1) Support the mixed use of low-code components and source code components, allowing users to freely add custom components in the designer while maintaining compatibility with the existing framework;

[0023] (2) Support a flexible callback mechanism, allowing developers to specify the functions to be executed when certain events occur, facilitating users to save the page state in real time. At the same time, it allows data interaction with the background system, so that seamless communication with the background system can be achieved through preset callback functions when the page needs to obtain background data or send data to the background;

[0024] (3) Provide a plugin mechanism, allowing users to add custom functions to the designer and renderer to further expand the functions of the low-code tool;

[0025] (4) Rely on the native property listener attributeChangedCallback provided in the Web API to monitor the property changes of Web custom components, and automatically trigger the property listener attributeChangedCallback when the properties of Web custom components change, thereby automatically triggering corresponding operations to achieve component re-rendering or state change;

[0026] (5) Responsible for managing the lifecycle of components.

[0027] Optionally, the specific implementation process of the involved memory optimization module using a build tool plugin in the development environment to load the core dependencies of the low-code tool into memory to improve the compilation and hot update speed:

[0028] (1) Middleware parameter configuration: In the server configuration of the development environment, first perform parameter configuration on the relevant middleware;

[0029] (2) Loading static resources into memory: Use the build tool plugin to pre-load the core dependencies of the low-code tool into memory;

[0030] (3) Intercepting low-code tool static resources: When a request in the development environment reaches the server, intercept the static resource requests of the low-code tool according to the configured middleware rules;

[0031] (4) For the intercepted static resource requests of the low-code tool, directly obtain the loaded resources from memory through the proxy mechanism;

[0032] (5) Reading memory data: After the proxy request, the server reads the corresponding low-code tool static resource data from memory;

[0033] (6) Rewriting the request header: Rewrite the request header information according to the actual situation of the resources read from memory;

[0034] (7) Low-code tool static resources: Return the low-code tool static resources read from memory and processed with the request header to the requester; after the requester receives the returned resources, it can use the functions of the low-code tool normally.

[0035] Further optionally, when performing the above steps (1)-(7) and initially loading and writing the core dependencies of the low-code tool into memory, the build tool parses the core dependency relationships of the low-code tool according to the entry file, and loads, parses, and writes them into memory in the order of dependencies;

[0036] After the initial loading is completed, the build tool continuously monitors changes in the file system. When it detects that the code of a certain module in the low-code tool has changed, through the hot module replacement mechanism, it updates the module code that has changed in memory, and initializes and inserts the updated module code into the application to achieve the update of the application state and interface without reloading the entire page.

[0037] Optionally, the build tool plugins involved adopt the DllPlugin plugin and HardSourceWebpackPlugin plugin of the build tool Webpack, the vite-plugin-optimize-persist plugin of the build tool Vite, or the rollup-plugin-caching plugin of the build tool Rollup.

[0038] Optionally, the designer involved includes a visual layout tool that supports drag-and-drop operations, and users can intuitively design the page layout through the graphical interface.

[0039] Optionally, the low-code tool involved supports multi-page design and provides a routing system that allows users to manage and design the layout and navigation of multiple pages in the designer;

[0040] The low-code tool can load remote components and source code components, and supports users to load third-party components through the network and use them in the designer;

[0041] The low-code tool is compatible with multiple front-end frameworks, including Vue, React, Angular, and H5, and can be seamlessly integrated and run in the aforementioned front-end frameworks.

[0042] A low-code tool compatible with multiple technical frameworks of the present invention has the following beneficial effects compared with the prior art:

[0043] 1. The low-code tool of the present invention adopts front-end low-code technology, follows the building protocol schema specification, can be integrated into existing projects in the form of components without large-scale adaptation work, and through optimized technical means, ensures efficient and stable operation under various technical architectures;

[0044] 2. The present invention realizes compatibility with multiple technical frameworks, improves the operation efficiency, enables developers to quickly deliver projects in an efficient workflow, and is applicable to multiple application scenarios. Description of the Drawings

[0045] Att Figure 1 is a schematic diagram of the structural connection of the low-code tool in the embodiment of the present invention;

[0046] Att Figure 2 is a workflow diagram of the memory optimization module in the embodiment of the present invention. Detailed Embodiments

[0047] To make the technical solutions, technical problems solved, and technical effects of the present invention clearer and more understandable, the following combines specific embodiments to clearly and completely describe the technical solutions of the present invention.

[0048] Embodiment:

[0049] Refer to Att Figure 1 In this embodiment, a low-code tool compatible with multiple technical frameworks is proposed. It adopts front-end low-code technology, follows the building protocol schema specification, has good integratability, and specifically includes the following structure:

[0050] A designer that encapsulates complex layout and interaction logics for visual arrangement of pages, facilitating users to generate a schema file describing the page structure and logic by dragging and dropping and configuring interface elements;

[0051] A renderer, independent of the designer, is used to parse the schema file at runtime and dynamically generate corresponding page views according to different rendering contexts;

[0052] Cross-platform component API provides unified standardized interfaces for the designer and the renderer respectively, which are used to define, edit and manage the schema file of the page, ensuring that the page structure generated by the designer can be seamlessly passed to the renderer;

[0053] Sandbox isolation layer, by means of Web Component technology, ensures the compatibility of low-code tools in different front-end frameworks. At the same time, using its ShadowRoot technology, the styles, scripts and DOM structures of low-code tools are encapsulated in an independent Shadow DOM subtree to achieve sandbox isolation;

[0054] Memory optimization module is used to use the build tool plugin in the development environment to load the core dependencies of low-code tools into memory, thereby improving the compilation and hot update speed.

[0055] In this embodiment, the initialization process of the involved designer is as follows:

[0056] The loading processes of built-in materials and remote materials, the registration process of the low-code engine plugin system, and the initialization of the designer system parameter configuration are all encapsulated in the Editor method, and the Editor method is registered to the Window global variable; finally, the designer can be initialized by simply calling Window.Editor(params).

[0057] The built-in materials and remote materials of the designer allow users to customize. The user-defined material scripts have unpredictability. The following specific measures are taken to prevent the unpredictability of material scripts:

[0058] i) Use MutationObserver to monitor DOM changes: When loading the material script, use MutationObserver in the Web API to monitor the changes of the DOM in real time;

[0059] ii) Move scripts and styles to the sandbox shadowRoot: Once new scripts and styles are dynamically generated in the DOM, move the newly generated scripts and styles from the header to the isolated sandbox shadowRoot;

[0060] iii) Remove the monitoring: After the page rendering is completed, use the nextTick method to remove the monitoring of DOM changes in the first rendering frame after the page rendering is completed.

[0061] In this embodiment, during the operation of the renderer, the rendering logic, as well as the script loading and processing logic, are encapsulated in the Preview method. Then, the Preview method is mounted on the Window global object to provide a unified entry for external calls to the page rendering function.

[0062] When page rendering is required, simply call Window.Preview(schema), and the renderer will dynamically generate and complete the page rendering according to the rules and data defined by the incoming schema parameter. Here, the schema parameter is the parameter passed to the Preview method, which contains the structure and data information required for page rendering. The Preview method will execute the corresponding rendering and processing logic based on the schema parameter to achieve the correct rendering of the page.

[0063] In this embodiment, in the cross-platform low-code development scenario, the cross-platform component API has the following functions:

[0064] (1) Support the mixed use of low-code components and source code components, allowing users to freely add custom components in the designer while maintaining compatibility with the existing framework.

[0065] (2) Support a flexible callback mechanism, allowing developers to specify the functions to be executed when certain events occur, facilitating users to save the page state in real time. At the same time, it allows data interaction with the background system, so that seamless communication with the background system can be achieved through preset callback functions when the page needs to obtain background data or send data to the background.

[0066] (3) Provide a plugin mechanism, allowing users to add custom functions to the designer and renderer to further expand the functions of the low-code tool.

[0067] (4) Rely on the native attribute listener attributeChangedCallback provided in the Web API to monitor the property changes of Web custom components, and automatically trigger the attribute listener attributeChangedCallback when the properties of the Web custom components change, thereby automatically triggering the corresponding operations to achieve component re-rendering or status change.

[0068] (5) Responsible for managing the component lifecycle. Call the connectedCallback function when the component is first added to the DOM, and execute the disconnectedCallback function when the component is unloaded from the DOM.

[0069] In this embodiment, refer to the appendix Figure 2, the specific implementation process of the memory optimization module involved in loading the core dependencies of the low-code tool into memory using a build tool plugin in the development environment to improve the compilation and hot update speed:

[0070] (1) Middleware parameter configuration: In the server configuration of the development environment, first configure the parameters of the relevant middleware; for example, configure the middleware parameters for handling static resource interception and proxy, set information such as interception rules and proxy target addresses. The configuration of these parameters will determine the subsequent processing method of the low-code tool's static resources;

[0071] (2) Loading static resources into memory: Use the build tool plugin to pre-load the core dependencies of the low-code tool into memory;

[0072] (3) Interception of low-code tool static resources: When a request in the development environment reaches the server, intercept the static resource requests of the low-code tool according to the configured middleware rules; for example, intercept requests for static resources such as JavaScript files and CSS files of the low-code tool's core dependencies; identify static resource requests belonging to the low-code tool through specific matching conditions such as file paths and file name suffixes;

[0073] (4) For the intercepted low-code tool static resource requests, directly obtain the loaded resources from memory through the proxy mechanism; for example, proxy the request for the low-code tool's core library file to the cached copy of this file in memory;

[0074] (5) Reading memory data: After the proxy request, the server reads the corresponding low-code tool static resource data from memory; for example, reads the content of the loaded JavaScript library file of the low-code tool from memory and prepares to return it to the request side;

[0075] (6) Rewriting the request header: Rewrite the request header information according to the actual situation of the resource read from memory; for example, set the correct Content-Type (such as text / javascript for JavaScript files), Content-Length and other request header fields according to the actual situation of the resource read from memory, so as to ensure that the browser or client can correctly identify and process the returned resources;

[0076] (7) Low-code tool static resources: Return the low-code tool static resources read from memory and with the request header processed to the request side; after receiving the returned resources, the request side can use the functions of the low-code tool normally.

[0077] It should be added that when the core dependencies of the low-code tool are initially loaded and written into memory by performing the above steps (1)-(7), the build tool parses the core dependency relationships of the low-code tool according to the entry file, and loads, parses, and writes them into memory in the order of dependencies;

[0078] After the initial loading is completed, the build tool continuously monitors changes in the file system. When it detects that the code of a certain module in the low-code tool has changed, through the hot module replacement mechanism, it updates the module code that has changed in memory, and initializes and inserts the updated module code into the application to achieve the update of the application state and interface, without having to reload the entire page.

[0079] It should be added that:

[0080] a) The build tool plugins can adopt the DllPlugin plugin and HardSourceWebpackPlugin plugin of the build tool Webpack, the vite-plugin-optimize-persist plugin of the build tool Vite, or the rollup-plugin-caching plugin of the build tool Rollup.

[0081] b) The designer includes a visual layout tool that supports drag-and-drop operations, and users can intuitively design the page layout through the graphical interface.

[0082] c) The low-code tool supports multi-page design and provides a routing system, allowing users to manage and design the layouts and navigations of multiple pages in the designer; the low-code tool can load remote components and source code components, and supports users to load third-party components through the network and use them in the designer.

[0083] d) The low-code tool is compatible with multiple front-end frameworks, including Vue, React, Angular, and H5, and can be seamlessly integrated and run in the above-mentioned front-end frameworks.

[0084] In summary, by using a low-code tool that is compatible with multiple technical frameworks according to the present invention, it can be integrated into an existing project in the form of components without large-scale adaptation work, and through optimized technical means, it can ensure efficient and stable operation under various technical architectures.

[0085] The above application specific examples have elaborated in detail the principle and implementation manner of the present invention. These embodiments are only used to help understand the core technical content of the present invention. Based on the above specific embodiments of the present invention, those skilled in the art of this technology, without departing from the principle of the present invention, any improvements and modifications made to the present invention shall fall within the scope of patent protection of the present invention.

Claims

1. A low-code tool compatible with multiple technical frameworks, characterized by: The low-code tool adopts front-end low-code technology, follows the construction protocol schema specification, has good integrability, and specifically includes the following structure: The designer encapsulates complex layout and interaction logic for visual arrangement of pages, allowing users to generate schema files that describe page structure and logic by dragging and dropping and configuring interface elements; The renderer is independent of the designer and is used to parse the schema file at runtime and dynamically generate corresponding page views according to different rendering contexts; The cross-platform component API provides a unified and standardized interface for designers and renderers to define, edit and manage page schema files, ensuring that the page structure generated by the designer can be seamlessly passed to the renderer. The sandbox isolation layer uses Web Component technology to ensure the compatibility of low-code tools in different front-end frameworks. At the same time, it uses its ShadowRoot technology to encapsulate the style, script, and DOM structure of low-code tools in an independent ShadowDOM subtree to achieve sandbox isolation. A memory optimization module is used to load the core dependencies of low-code tools into memory in a development environment using build tool plug-ins, thereby increasing compilation and hot update speeds.

2. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: The initialization process of the designer is as follows: Encapsulate the loading process of built-in materials and remote materials, the registration process of the low-code engine plug-in system, and the initialization of the designer system parameter configuration in the Editor method, and register the Editor method to the Window global variable; Finally, the designer can be initialized by simply calling Window.Editor(params).

3. A low-code tool compatible with multiple technical frameworks according to claim 2, characterized in that: The designer's built-in materials and remote materials allow users to customize them. User-defined material scripts are unpredictable. The following measures are taken to prevent the unpredictability of material scripts: i) Use MutationObserver to monitor DOM changes: When loading material scripts, use MutationObserver in the Web API to monitor DOM changes in real time; ii) Move scripts and styles to the sandbox shadowRoot: Once new scripts and styles are dynamically generated in the DOM, move the newly generated scripts and styles from the header to the isolated sandbox shadowRoot; iii) Remove monitoring: After the page is rendered, use the nextTick method to remove the monitoring of DOM changes in the first rendering frame after the page is rendered.

4. A low-code tool compatible with multiple technical frameworks according to claim 2, characterized in that: During the operation of the renderer, the rendering logic and script loading and processing logic are first encapsulated in the Preview method, and then the Preview method is mounted to the Window global object to provide a unified entry for external calls to the page rendering function; When page rendering is required, just call Window.Preview(schema), and the renderer will dynamically generate and complete the page rendering work according to the rules and data defined by the passed schema parameter; the schema parameter is the parameter passed to the Preview method, which contains the structure and data information required for page rendering. The Preview method will execute the corresponding rendering and processing logic according to the schema parameter to achieve correct rendering of the page.

5. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: In the cross-platform low-code development scenario, the cross-platform component API has the following functions: (1) Supports the mixed use of low-code components and source code components, allowing users to freely add custom components in the designer while maintaining compatibility with existing frameworks; (2) Support flexible callback mechanisms, allowing developers to specify functions to be executed when certain events occur, making it easier for users to save page states in real time. At the same time, it allows data interaction with the backend system, so that when the page needs to obtain background data or send data to the backend, it can achieve seamless communication with the backend system through preset callback functions; (3) Provide a plug-in mechanism that allows users to add custom functions to designers and renderers, further extending the functionality of low-code tools; (4) Relying on the native attribute listener attributeChangedCallback provided in the Web API, monitor the attribute changes of the Web custom component, and automatically trigger the attribute listener attributeChangedCallback when the attribute of the Web custom component changes, and then automatically trigger the corresponding operation to achieve component re-rendering or state change; (5) Responsible for managing the life cycle of components.

6. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: The memory optimization module uses a build tool plug-in in the development environment to load the core dependencies of the low-code tool into memory, thereby improving the specific implementation process of compilation and hot update speed: (1) Middleware parameter configuration: In the server configuration of the development environment, first configure the parameters of the relevant middleware; (2) Load static resources into memory: Use the build tool plug-in to pre-load the core dependencies of the low-code tool into memory; (3) Low-code tool static resource interception: When a request in the development environment reaches the server, the static resource request of the low-code tool is intercepted according to the configured middleware rules; (4) For intercepted static resource requests from low-code tools, the loaded resources are directly obtained from the memory through the proxy mechanism; (5) Reading memory data: After the proxy request, the server reads the corresponding low-code tool static resource data from the memory; (6) Rewrite the request header: rewrite the request header information according to the actual situation of the resource read from the memory; (7) Low-code tool static resources: The low-code tool static resources with the request header read from the memory and processed are returned to the requesting end; After the requester receives the returned resources, it can use the functions of the low-code tool normally.

7. A low-code tool compatible with multiple technical frameworks according to claim 6, characterized in that: Execute the above steps (1)-(7) to load and write the core dependencies of the low-code tool into the memory for the first time. The build tool parses the core dependencies of the low-code tool according to the entry file, and loads, parses and writes them into the memory in the order of dependencies. After the initial loading is completed, the build tool continues to monitor changes in the file system. When it detects that the code of a module in the low-code tool has changed, it updates the changed module code in memory through the hot module replacement mechanism, and initializes and inserts the updated module code into the application to update the application status and interface without reloading the entire page.

8. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: The build tool plug-in adopts the DllPlugin plug-in and the HardSourceWebpackPlugin plug-in of the build tool Webpack, the vite-plugin-optimize-persist plug-in of the build tool Vite, or the rollup-plugin-caching plug-in of the build tool Rollup.

9. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: The designer includes a visual editing tool that supports drag-and-drop operations, and the user can intuitively design the page layout through a graphical interface.

10. A low-code tool compatible with multiple technical frameworks according to claim 1, characterized in that: The low-code tool supports multi-page design and provides a routing system that allows users to manage and design the layout and navigation of multiple pages in the designer; The low-code tool can load remote components and source code components, and supports users to load third-party components through the network and use them in the designer; The low-code tool is compatible with multiple front-end frameworks, including Vue, React, Angular and H5, and can be seamlessly integrated and run in the aforementioned front-end frameworks.

Images