CN114510231A

CN114510231A - Application construction method, device, equipment and computer readable storage medium

Info

Publication number: CN114510231A
Application number: CN202011283824.6A
Authority: CN
Inventors: 高岗
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2020-11-17
Filing date: 2020-11-17
Publication date: 2022-05-17

Abstract

The application provides an application construction method, device, equipment and a computer readable storage medium; the method comprises the following steps: responding to page design operation performed on a page in a current application, and generating page description information of the page; wherein the page design operation comprises an editing operation on a component in the first component list area; generating a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed on a current application; generating a static resource file of the page based on the virtual DOM tree; wherein the static resource files comprise a main static resource file and at least one sub static resource file; and issuing the main static resource file and the at least one sub static resource file. By the method and the device, the flexibility and the universality of the user during application construction can be improved, and the page loading performance of the constructed application can be improved.

Description

Application construction method, device, equipment and computer readable storage medium

Technical Field

The present application relates to computer software information technologies, and in particular, to an application construction method, apparatus, device, and computer-readable storage medium.

Background

A low code platform refers to a platform that can support building applications using little or no code. Through the low-code platform, users with different development experience levels can be enabled to use a dragging component and model-driven logic to create web pages and mobile applications through a graphical interactive interface. In the related art, the flexibility and the universality are low when a user builds an application in a low-code mode. In addition, the performance of the application built by the user through the low-code platform in the related art is not high in page loading, which results in that the page loading takes a long time.

Disclosure of Invention

The embodiment of the application construction method, device and equipment and the computer readable storage medium can improve the flexibility and universality of application construction and can improve the loading performance of a page in the constructed application, so that the use experience of a user is improved.

The technical scheme of the embodiment of the application is realized as follows:

the embodiment of the application provides an application construction method, which comprises the following steps:

responding to page design operation performed on a page in a current application, and generating page description information of the page; wherein the page design operation comprises an editing operation on a component in a first component list area;

generating a virtual Document Object Model (DOM) tree of the page based on the page description information in response to an application publishing operation performed for a current application;

generating a static resource file of the page based on the virtual DOM tree; wherein the static resource files comprise a main static resource file and at least one sub static resource file;

and issuing the main static resource file and the at least one sub static resource file.

In some embodiments, the first component list area further includes a layout container, the page design operation further includes an edit operation on the layout container, and the generating the page description information of the page in response to the page design operation performed on the page in the current application includes: in response to an editing operation on the layout container, adding description information of the layout container in the page description information; in response to an editing operation on a component, adding description information of the component in description information of the layout container.

In some embodiments, the page design operation further includes an attribute configuration operation, and the generating page description information of the page in response to the page design operation performed on the page in the current application further includes: responding to attribute configuration operation on the component, in the page description information, according to the attribute configured by the attribute configuration operation, updating the description information of the component.

In some embodiments, the page design operation further includes a model binding operation, and the generating page description information of the page in response to the page design operation performed on the page in the current application further includes: in response to a model binding operation performed on a component, adding description information of a data binding relationship between a model corresponding to the model binding operation and the component in the description information of the component; and saving the data binding relation.

In some embodiments, the generating a virtual DOM tree of the page based on the page description information includes: determining a set of components contained in the page based on the page description information; globally registering each component in the set of components; and generating a virtual DOM tree of the page by adopting a self-defined tag mode based on the page description information and the registered components.

In some embodiments, the generating a static resource file for the page based on the virtual DOM tree includes: for each component in the component set, generating a sub-static resource file corresponding to the component and a dynamic loading code of the component based on the virtual DOM tree; and generating a main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

In some embodiments, the page description information is description information in a JSON Schema.

In some embodiments, the components include a base component and an integrated component, the integrated component being a combination of a plurality of base components, the method further comprising: displaying a component build interface of a target integrated component in response to a component build operation for the target integrated component; the component construction interface comprises a second component list area, and the second component list area comprises a basic component and an integrated component; generating component description information of the target integrated component in response to a component design operation performed on the integrated component; wherein the component design operation comprises an editing operation on a base component and/or an integrated component in the second component list area; saving the component description information in response to a component save operation performed for the target integrated component.

In some embodiments, the component description information is description information in a JSON Schema.

In some embodiments, the method further comprises: responding to a page loading operation aiming at the page on the current equipment, and acquiring a main static resource file and at least one sub static resource file of the page; dynamically loading a state tree and a virtual DOM tree of the page based on the main static resource file and the at least one sub static resource file; rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page; and displaying the rendered page on the current equipment.

In some embodiments, the state tree of the page includes a state tree of at least one model; rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page, wherein the rendering comprises the following steps: for each model, making a data request to a back-end service corresponding to the model, and acquiring a back-end field returned by the back-end service; determining the value of each field in the model based on the state tree of each model and the back-end field corresponding to the model; acquiring the reference relation of each component in the virtual DOM tree to the field of each model; and rendering each component in the virtual DOM tree based on the value of each field in each model and the reference relation to obtain the rendered page.

In some embodiments, the method further comprises: for each field in each model, under the condition that the field is detected to be changed, synchronizing the value of the changed field to each component which refers to the field in the virtual DOM tree to obtain an updated virtual DOM tree; and refreshing the page based on the updated virtual DOM tree.

An embodiment of the present application provides an application building apparatus, including:

the first generation module is used for responding to page design operation carried out on a page in the current application and generating page description information of the page; wherein the page design operation comprises an editing operation on a component in a first component list area;

a second generation module, configured to generate a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed for a current application;

a third generation module, configured to generate a static resource file of the page based on the virtual DOM tree; wherein the static resource files comprise a main static resource file and at least one sub static resource file;

and the issuing module is used for issuing the main static resource file and the at least one sub static resource file.

In some embodiments, the first component list area further includes a layout container therein, the page design operation further includes an edit operation on the layout container, and the first generation module is further configured to: in response to an editing operation on the layout container, adding description information of the layout container in the page description information; in response to an editing operation on a component, adding description information of the component in description information of the layout container.

In some embodiments, the page design operations further include attribute configuration operations, the first generation module is further to: responding to attribute configuration operation on the component, in the page description information, according to the attribute configured by the attribute configuration operation, updating the description information of the component.

In some embodiments, the page design operations further include a model binding operation, the first generation module further to: in response to a model binding operation performed on a component, adding description information of a data binding relationship between a model corresponding to the model binding operation and the component in the description information of the component; and saving the data binding relation.

In some embodiments, the second generating module is further configured to: determining a set of components contained in the page based on the page description information; globally registering each component in the set of components; and generating a virtual DOM tree of the page by adopting a self-defined tag mode based on the page description information and the registered components.

In some embodiments, the third generating module is further configured to: for each component in the component set, generating a sub-static resource file corresponding to the component and a dynamic loading code of the component based on the virtual DOM tree; and generating a main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

In some embodiments, the components include a base component and an integrated component, the integrated component being a combination of a plurality of base components, the apparatus further comprising: a first display module to: displaying a component build interface of a target integrated component in response to a component build operation for the target integrated component; the component construction interface comprises a second component list area, and the second component list area comprises a basic component and an integrated component; a fourth generation module to: generating component description information of the target integrated component in response to a component design operation performed on the integrated component; wherein the component design operation comprises an editing operation on a base component and/or an integrated component in the second component list area; a save module to: saving the component description information in response to a component save operation performed for the target integrated component.

In some embodiments, the apparatus further comprises: an acquisition module to: responding to a page loading operation aiming at the page on the current equipment, and acquiring a main static resource file and at least one sub static resource file of the page; a loading module to: dynamically loading a state tree and a virtual DOM tree of the page based on the main static resource file and the at least one sub static resource file; a rendering module to: rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page; a sixth display module to: and displaying the rendered page on the current equipment.

In some embodiments, the state tree of the page includes a state tree of at least one model; the rendering module is further to: for each model, making a data request to a back-end service corresponding to the model, and acquiring a back-end field returned by the back-end service; determining the value of each field in the model based on the state tree of each model and the back-end field corresponding to the model; acquiring the reference relation of each component in the virtual DOM tree to the field of each model; and rendering each component in the virtual DOM tree based on the value of each field in each model and the reference relation to obtain the rendered page.

In some embodiments, the apparatus further comprises: an updating module, configured to synchronize, for each field in each model, a value of the field after being changed to each component in the virtual DOM tree that refers to the field when detecting that the field is changed, so as to obtain an updated virtual DOM tree; and the refreshing module is used for refreshing the page based on the updated virtual DOM tree.

An embodiment of the present application provides an application building apparatus, including: a memory for storing executable instructions; and the processor is used for realizing the method provided by the embodiment of the application when executing the executable instructions stored in the memory.

The embodiment of the present application provides a computer-readable storage medium, which stores executable instructions and is used for implementing the method provided by the embodiment of the present application when being executed by a processor.

In the embodiment of the application, page design is realized through editing operation on components in a first component list area, page description information of a page is generated, a virtual DOM tree of the page is generated through application publishing operation performed on the current application based on the page description information, and then a main static resource file and at least one sub static resource file of the page are generated and published based on the virtual DOM tree. Therefore, firstly, because the currently designed page and the components included in the page can be clearly and accurately described in the page description information, the components in the designed page can be conveniently applied to other pages or the whole page can be applied to other applications in a mode of copying the page description information, so that the flexibility and the universality during application construction can be improved; secondly, the static resource file of the page is published when the page is published, so that the static resource can be directly loaded when the page is loaded, thereby reducing page configuration requests, improving page loading performance and further improving the use experience of a user; finally, because the issued static resource file comprises the main static resource file and the at least one sub static resource file, the dynamic loading of the page can be performed based on the main static resource file and the at least one sub static resource file when the page is loaded, so that the loading performance of the page in the built application can be further improved.

Drawings

FIG. 1A is a schematic diagram of a page build interface of a low code development platform in the related art;

FIG. 1B is a schematic diagram of an implementation architecture of a low-code development platform building application client in the related art;

FIG. 1C is a schematic diagram of an implementation flow of constructing a Web page by a low-code development platform in the related art;

FIG. 1D is an alternative architectural diagram of an application building system provided by embodiments of the present application;

FIG. 2 is an alternative structural diagram of an application building apparatus provided in an embodiment of the present application;

FIG. 3 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 4A is an alternative flow chart of an application building method provided by an embodiment of the present application;

FIG. 4B is a schematic flow chart diagram illustrating an alternative method for constructing an application according to an embodiment of the present disclosure;

FIG. 4C is an alternative flow chart of an application building method provided by an embodiment of the present application;

FIG. 5 is an alternative flow chart diagram of an application building method provided in the embodiments of the present application;

FIG. 6 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 7 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 8 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 9 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 10 is an alternative flow chart diagram of an application building method provided by an embodiment of the present application;

FIG. 11 is a schematic diagram of a user interaction interface of an application building platform provided by an embodiment of the present application;

FIG. 12 is a schematic diagram of a user interaction interface of a component build platform provided by an embodiment of the present application;

fig. 13 is a schematic implementation flow chart of an application building method provided in an embodiment of the present application;

FIG. 14 is a schematic diagram of an implementation architecture of a low-code development platform client according to an embodiment of the present application;

fig. 15 is a schematic flowchart illustrating an implementation flow of a page loading method according to an embodiment of the present application;

fig. 16A is a schematic flowchart illustrating an implementation flow of a page publishing method according to an embodiment of the present application;

fig. 16B is a schematic flowchart of an implementation process of a page publishing method according to an embodiment of the present application.

Detailed Description

In order to make the objectives, technical solutions and advantages of the present application clearer, the present application will be described in further detail with reference to the attached drawings, the described embodiments should not be considered as limiting the present application, and all other embodiments obtained by a person of ordinary skill in the art without creative efforts shall fall within the protection scope of the present application.

In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is understood that "some embodiments" may be the same subset or different subsets of all possible embodiments, and may be combined with each other without conflict.

Where similar language of "first/second" appears in the specification, the following description is added, and where reference is made to the term "first \ second \ third" merely for distinguishing between similar items and not for indicating a particular ordering of items, it is to be understood that "first \ second \ third" may be interchanged both in particular order or sequence as appropriate, so that embodiments of the application described herein may be practiced in other than the order illustrated or described herein.

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the application.

Before further detailed description of the embodiments of the present application, terms and expressions referred to in the embodiments of the present application will be described, and the terms and expressions referred to in the embodiments of the present application will be applied to the following explanations.

1) Low code: refers to the ability to build an application with little or no code;

2) page construction: constructing a network (Web) page by dragging, clicking or importing;

3) assembly of: the minimum units constituting a Web page, such as input boxes, characters, pictures, and the like;

4) the application comprises the following steps: refers to a Web application;

5) a tenant: the user can have a plurality of applications under one tenant in the application space applied by the application platform;

6) a component construction platform: a platform for dragging assemblies and layout generation clips and templates;

7) JSON Schema (JSON Schema): a data structure of JSON is used for describing page information or component information;

8) fragment (b): a collection of components for a particular business scenario, which is essentially a js (JavaScript) Object Notation (JSON) description of multiple components, such as a combination of text, pictures, input boxes for Human Resources (HR) domain; (ii) a

9) Template: a general component set is essentially JSON description of a plurality of components, such as a general form and a table, and can meet the component set of most business scenarios;

10) model (Model): the method refers to a formal expression mode after abstracting a certain actual problem or objective object and rule.

In order to better understand the application construction method provided in the embodiment of the present application, a technical solution for performing application construction in a low code manner in the related art is described below.

Referring to fig. 1A, fig. 1A is a schematic diagram of a page building interface of a low-code development platform in the related art, where the page building interface includes a page list area 11, a page building area 12, and a component list area 13; a page list area 11 displays a list of pages included in an application or a module, a page can be built in a drag and drag manner in a page building area 12, and a component for building the page and a display switched to a component attribute are displayed in a component list area 13; when a page is built, components to be used can be directly dragged from the component list area 13 to a target area in the page building area 12.

Referring to fig. 1B, fig. 1B is a schematic diagram of an implementation architecture of a low-code development platform building application client in the related art, where the architecture of the client is mainly divided into four layers: user Interface (UI) layer 21: the system is responsible for component life cycle management, component communication and page rendering; the service logic layer 22: process data checks and process complex logic using nanofluids (Nanoflow); data layer 23: managing data used by the front end, processing the state based on the React Flux mode and pushing the state change to the UI component; data communication 24: metadata and session management are exchanged with a Runtime (Runtime) server using HyperText Transfer Protocol (HTTP)/HyperText Transfer security Protocol (HTTPs).

Referring to fig. 1C, fig. 1C is a schematic diagram of an implementation flow of constructing a Web page by using a low-code development platform in the related art, and as shown in fig. 1C, constructing a Web page by using the low-code development platform mainly includes three sub-flows: component editing and publishing 31, Web page layout 32, application building and publishing 33.

The process of writing and publishing the components comprises the following steps:

step S31a, the user writes the component;

step S31b, the low code development platform judges whether the component is issued to the market; if yes, go to step S31 c; if not, go to step S31 d;

step S31c, the low code development platform releases the component to the component market, and the step S31e is entered;

step S31d, storing the component in local by the low-code development platform;

in step S31e, the low code development platform loads a component for the application, and the process proceeds to step S32 a.

The process of Web page layout comprises the following steps:

s32a, dragging the layout for the page by the user;

s32b, the user is a page dragging component;

s32c, the user performs component attribute configuration.

The process of application construction and release comprises the following steps:

s33a, saving configuration and page by the user;

s33b, locally packaging the components and the configuration into a static HyperText Markup Language (HTML) file and a JS file by the low code development platform;

s33c, the user deploys the static resource.

The technical solution of using low code to construct applications in the related art mainly has the following disadvantages:

1) the basic elements for page construction are basic components, and can only be compiled by personnel with certain software development experience, the personnel with insufficient software development experience can not compile the basic components, and different services can complete page construction by independently compiling specific components;

2) the frame (such as Dojo frame used in Mendix software) on which the component is written is outdated, and the latest browser characteristics cannot be used;

3) the basic particles multiplexed by the platform are components/layouts, and if different services have the same component set, the different services need to be respectively and independently dragged and generated;

4) the page construction is composed of a basic component (0/n) + a layout container, wherein n can be any positive integer, the layout container comprises a common Tab container, a vertical layout container and the like, but can only be vertically or transversely arranged, and does not support fixed layout or any layout;

5) the component attribute configuration cannot be modified or expanded on the attribute panel in a custom code mode;

6) the applied packaging is to package JS of all the components into one JS file, the generated JS file is large, and the time consumption is long when a page is loaded;

7) the applications are packaged into static resource files such as HTML, JS and Cascading Style Sheets (CSS), the applications are required to be deployed to corresponding servers/cloud servers by a user, each application needs to apply for deploying resources independently, and the platform cannot be deployed automatically and dynamically.

The embodiment of the application construction method, device and equipment and the computer readable storage medium can improve the flexibility and universality of application construction and can improve the loading performance of a page in the constructed application, so that the use experience of a user is improved. An exemplary application of the application building apparatus provided in the embodiments of the present application is described below, and the application building apparatus provided in the embodiments of the present application may be implemented as various types of user terminals such as a notebook computer, a tablet computer, a desktop computer, a set-top box, a mobile device (e.g., a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, and a portable game device), and may also be implemented as a server. Next, an exemplary application when the application construction apparatus is implemented as a terminal will be explained.

Referring to fig. 1D, fig. 1D is an alternative architecture diagram of the application building system 100 according to the embodiment of the present application, in order to implement an application building platform, terminals (terminal 400-1 and terminal 400-2 are exemplarily shown) are connected to the static resource server 200 through a network 300, and the network 300 may be a wide area network or a local area network, or a combination of both.

The terminal is used for: displaying a page building interface of the current application on a graphical interface (the graphical interface 410-1 and the graphical interface 410-2 are exemplarily shown); responding to page design operation performed on a page in a current application, and generating page description information of the page; wherein the page design operation comprises an editing operation on a component in a first component list area; generating a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed on a current application; generating a static resource file of the page based on the virtual DOM tree; wherein the static resource files comprise a main static resource file and at least one sub static resource file; and issuing the main static resource file and the at least one sub static resource file. The terminal may issue the designed static resource file of the page to the static resource server 200. The static resource server 200 may be used to: and receiving and storing the static resource file of the page issued by the terminal.

In some embodiments, the application building device may be an independent physical server when implemented as a server, may also be a server cluster or a distributed system formed by a plurality of physical servers, and may also be a cloud server that provides basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a Network service, cloud communication, a middleware service, a domain name service, a security service, a Content Distribution Network (CDN), and a big data and artificial intelligence platform. The terminal may be, but is not limited to, a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, and the like. The terminal and the server may be directly or indirectly connected through wired or wireless communication, which is not limited in the embodiment of the present invention.

Referring to fig. 2, fig. 2 is a schematic structural diagram of an application building apparatus 400 provided in an embodiment of the present application, and the application building apparatus 400 shown in fig. 2 includes: at least one processor 410, memory 450, at least one network interface 420, and a user interface 430. The various components in the application build device 400 are coupled together by a bus system 440. It is understood that the bus system 440 is used to enable communications among the components. The bus system 440 includes a power bus, a control bus, and a status signal bus in addition to a data bus. For clarity of illustration, however, the various buses are labeled as bus system 440 in fig. 2.

The Processor 410 may be an integrated circuit chip having Signal processing capabilities, such as a general purpose Processor, a Digital Signal Processor (DSP), or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, or the like, wherein the general purpose Processor may be a microprocessor or any conventional Processor, or the like.

The user interface 430 includes one or more output devices 431, including one or more speakers and/or one or more visual displays, that enable the presentation of media content. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid state memory, hard disk drives, optical disk drives, and the like. Memory 450 optionally includes one or more storage devices physically located remote from processor 410.

The memory 450 includes either volatile memory or nonvolatile memory, and may include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read Only Memory (ROM), and the volatile Memory may be a Random Access Memory (RAM). The memory 450 described in embodiments herein is intended to comprise any suitable type of memory.

In some embodiments, memory 450 is capable of storing data, examples of which include programs, modules, and data structures, or a subset or superset thereof, to support various operations, as exemplified below.

An operating system 451, including system programs for handling various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and handling hardware-based tasks;

a network communication module 452 for communicating to other computing devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 including: bluetooth, wireless compatibility authentication (WiFi), and Universal Serial Bus (USB), etc.;

a presentation module 453 for enabling presentation of information (e.g., user interfaces for operating peripherals and displaying content and information) via one or more output devices 431 (e.g., display screens, speakers, etc.) associated with user interface 430;

an input processing module 454 for detecting one or more user inputs or interactions from one of the one or more input devices 432 and translating the detected inputs or interactions.

In some embodiments, the apparatus provided in the embodiments of the present application may be implemented in software, and fig. 2 illustrates an application building apparatus 455 stored in the memory 450, which may be software in the form of programs and plug-ins, and includes the following software modules: a first generation module 4551, a second generation module 4552, a third generation module 4553 and a publication module 4554, which are logical and thus arbitrarily combined or further divided according to the functions implemented.

The functions of the respective modules will be explained below.

In other embodiments, the apparatus provided in this embodiment may be implemented in hardware, and for example, the apparatus provided in this embodiment may be a processor in the form of a hardware decoding processor, which is programmed to execute the Application building method provided in this embodiment, for example, the processor in the form of the hardware decoding processor may be one or more Application Specific Integrated Circuits (ASICs), DSPs, Programmable Logic Devices (PLDs), Complex Programmable Logic Devices (CPLDs), Field Programmable Gate Arrays (FPGAs), or other electronic components.

The application construction method provided by the embodiment of the present application will be described below with reference to an exemplary application and implementation of the terminal or the server provided by the embodiment of the present application.

Referring to fig. 3, fig. 3 is an alternative flowchart of an application building method provided in an embodiment of the present application, and will be described below with reference to the steps shown in fig. 3, where an execution subject of the following steps may be the foregoing terminal or server.

In step S101, in response to a page design operation performed on a page in a current application, generating page description information of the page; wherein the page design operation comprises an editing operation on a component in the first component list area.

Here, the current application may include at least one page, and the page design operation may be performed for any one page in the current application. The page of the current application may be a newly created blank page or may be a non-blank page that has already been designed.

The first component list area can be in any suitable position in the current interactive interface, and at least one component can be included in the first component list, and the component is a subunit of the page, which forms the Web page. In implementation, the component may be a basic component generated by an IT person through code writing, such as an input box, text, a picture, and the like, or may be an integrated component obtained by combining a plurality of basic components, such as a fragment, a template, and the like. In some embodiments, the first component list may include, but is not limited to, at least one base component and at least one integrated component.

The page design operation is an operation performed by a user in a page design process, and may include one or more editing operations on the base component and/or the integrated component. The editing operation on the basic component and/or the integrated component is the operation of dragging, clicking, touching or importing the component and the like, and does not relate to the operation of a code layer. In some embodiments, the editing operation may include at least one of: dragging operation, clicking operation, touching operation and leading-in operation. In some embodiments, the page design operations may also include one or more of layout operations, property configuration operations, model binding operations, and the like for the base components and/or the integrated components.

The page designed by the page design operation is page description information which is described in a specific mode at the bottom layer, and the page description information can be generated according to the page design operation of a user in the process of page design. One or more of components, component layout relationships, component nesting relationships, component attribute information, data binding information, and the like included in the currently designed page may be described in the page description information. In implementation, the page description information may be description information of a page in a JSON Schema manner, or may be description information of a page in an XML manner or other suitable manners, which is not limited herein. In some embodiments, the page description information is description information in a JSON Schema. Because the JSON Schema file is information in the JSON format, and the JSON is widely applied at present, a basic component, a segment, a template or a whole page in the JSON Schema can be conveniently applied to any application supporting the JSON in a JSON mode by copying the JSON, so that the designed page can have better flexibility, convenience and high portability.

In step S102, in response to an application publishing operation performed for the current application, a virtual DOM tree of the page is generated based on the page description information.

Here, the current application is an application to which the currently designed page belongs. The application publishing operation may include, but is not limited to, any suitable operation such as a button clicking operation, a shortcut key operation, a touch operation, a gesture operation, and the like. For example, the user may perform an application publishing operation on the current application by clicking an application publishing button on the page building interface. When the application is published, all the pages in the application can be published, or only the currently designed page can be published.

The virtual DOM tree is a JS object that describes the HTML segment corresponding to the page. The page description information may include attribute information of each component, layout information of each component, a nesting structure between components, and the like. By analyzing the page description information, the HTML segment corresponding to the page can be determined, and then the JS object describing the HTML segment, namely the virtual DOM tree of the page, can be generated.

In step S103, generating a static resource file of the page based on the virtual DOM tree; wherein the static resource files include a main static resource file and at least one sub static resource file.

Here, static resources such as HTML and CSS in the page may be obtained by parsing the JS object corresponding to the virtual DOM tree, and a static resource file of the page may be generated by packaging the obtained static resources and the virtual DOM tree.

Static resource files may include, but are not limited to, one or more of a virtual DOM tree, HTML files, CSS files, etc. of a page. The main static resource file is an initial static resource file required by page loading, and includes, but is not limited to, a main JS file, a main HTML file, and the like of the page. The main static resource file may only include basic static resources required for page loading, and does not include static resources corresponding to each component in the page. The sub static resource file is a file corresponding to the static resource that can be dynamically loaded in the running process of the page, and may include, but is not limited to, JS files, HTML files, and the like corresponding to each component in the page. In implementation, the basic static resources required by page loading can be determined according to the virtual DOM tree of the page, the determined basic static resources are packaged into a main static resource file, and other static resources are packaged into at least one sub static resource file. The main static resource file may include a code for dynamically loading the sub static resource file, when the page is loaded, only the main static resource file may be loaded, and in the subsequent operation process of the page, the code for dynamically loading the sub static resource file in the main static resource file may be used to dynamically load the corresponding sub static resource file when the sub static resource file needs to be loaded.

In step S104, the master static resource file and the at least one sub static resource file are published.

Here, delivering the static resource file of the designed page may include, but is not limited to, delivering the static resource file of the page to one or more of a local service, a static resource server, a CDN, and the like, and is not limited herein. When the page is loaded, the page can be rendered based on a virtual DOM tree, an HTML file, a CSS file, and the like of the page in the static resource file to obtain a rendered page, so that the page can be displayed in the browser.

In some embodiments, the master static resource file and the at least one sub static resource file may be published to the currently applied static resource server.

In some embodiments, the method may further comprise: and responding to the page saving operation performed on the page, and saving the page description information of the page. Here, the page description information of the page may be stored locally, or may be stored in the cloud server, which is not limited herein. In some embodiments, a current version number may be set for the page, and when the page description information is stored, the page description information and the current version number of the page may be stored correspondingly.

In the embodiment of the application, page design is realized through editing operation on components in a first component list area, page description information of a page is generated, a virtual DOM tree of the page is generated through application publishing operation performed on the current application based on the page description information, and then a main static resource file and at least one sub static resource file of the page are generated and published based on the virtual DOM tree. Therefore, firstly, because the currently designed page and the components included in the page can be clearly and accurately described in the page description information, the components in the designed page can be conveniently applied to other pages or the whole page can be applied to other applications in a mode of copying the page description information, so that the flexibility and the universality during application construction can be improved; secondly, the static resource file of the page is published when the page is published, so that the static resource can be directly loaded when the page is loaded, thereby reducing page configuration requests, improving page loading performance and further improving the use experience of a user; finally, the issued static resource file comprises a main static resource file and at least one sub static resource file, and the dynamic loading of the page can be carried out based on the main static resource file and the at least one sub static resource file when the page is loaded, so that the loading performance of the page in the built application can be further improved.

In some embodiments, referring to fig. 4A, fig. 4A is an optional flowchart of an application building method provided in the embodiments of the present application. Based on fig. 3, the first component list area further includes a layout container therein, and the page design operation further includes an editing operation on the layout container. Step S101 shown in fig. 3 can be implemented by steps S401 to S402, which will be described below with reference to the respective steps, and the execution subject of the following steps can be the foregoing terminal or server.

In step S401, in response to an editing operation on a layout container, description information of the layout container is added to the page description information.

Here, the layout container may include, but is not limited to, one or more of a Tab layout, a Grid layout, an Absolute layout, a Fixed layout, and the like. Editing operations on the layout container may include dragging, clicking, touching, importing, etc. on the layout container itself, and do not involve operations on the layout container code layer. The description information of the layout container may be in a unified manner with the page description information.

In step S402, in response to an editing operation on a component, description information of the component is added to description information of the layout container.

Here, a person skilled in the art can select an appropriate component from the first component list according to actual conditions to perform an editing operation. The description information of the component may be unified with the page description information.

In the embodiment of the application, the user can perform editing operation on the layout container in the first component list area, and the proper layout container is adopted for component layout, so that the flexibility and the universality of the user during application construction can be further improved.

In some embodiments, referring to fig. 4B, fig. 4B is an optional flowchart of the application building method provided in the embodiments of the present application. Based on fig. 4A, the page design operation further includes an attribute configuration operation, and step S411 may be further performed in step S101, which will be described below with reference to each step, and a main body of the following steps may be the foregoing terminal or server.

In step S411, in response to the attribute configuration operation performed on the component, in the page description information, according to the attribute configured by the attribute configuration operation, the description information of the component is updated.

Here, the property configuration operation performed on the component may include, but is not limited to, a configuration operation performed on one or more properties of a name, a type, a display size, a color, and the like of the component. In implementation, an attribute configuration panel may be opened for a component that needs to be subjected to an attribute configuration operation by clicking, long-press touch, or the like, and attribute configuration may be performed for the component by performing click selection, information input, or the like on the attribute configuration panel. The property configuration panel may be displayed in any suitable manner and is not limited herein. For example, the attribute configuration panel may be a Tab page juxtaposed to the first component list area, hidden when attribute configuration operation is not performed, and switched to a display state when attribute configuration operation is performed; the property configuration panel may also be a pop-up box within which a user can configure properties for the component.

In the embodiment of the application, the user can configure the appropriate attribute for the corresponding component through the attribute configuration operation on the component, so that the flexibility and the universality of the user in application construction can be further improved.

In some embodiments, referring to fig. 4C, fig. 4C is an optional flowchart of the application building method provided in the embodiments of the present application. Based on fig. 4A, the page design operation further includes a model binding operation, and steps S421 to S422 may be further executed in step S101, which will be described below with reference to the steps, and the execution subject of the following steps may be the foregoing terminal or server.

In step S421, in response to the model binding operation performed on the component, description information of the data binding relationship between the model corresponding to the model binding operation and the component is added to the description information of the component.

Here, at least one model may be established for the front-end application, and each model may include at least one field therein. The user can bind the data in the component and the field in the model by performing model binding operation on the component, and adds the description information aiming at the corresponding data binding relationship in the description information of the component. Data in the component and fields in the model may be bound one by one, or data in multiple components and the same field in the model may be bound, which is not limited herein.

In some embodiments, the model may include one or more of a dynamic model, a static model, a custom code model, and the like. The dynamic model may be a model that obtains field values by dynamically requesting field values from a backend service. The static model may be a model in which the field values are fixed. The custom code model may be a model that determines field values based on mathematical operations or JS codes. In implementation, a user may select an appropriate model according to actual conditions to perform a model binding operation, which is not limited herein.

In step S422, the data binding relationship between the model corresponding to the model binding operation and the basic component is saved.

Here, the data binding relationship may be stored locally, or may be stored in a cloud database or a server, and the storage manner of the data binding relationship may include, but is not limited to, one or more of a data recording manner, a key value pair manner, a configuration file manner, and the like. In some embodiments, the data binding relationships between the data in the base component and the fields in the model may be stored in the database in the form of JSON.

In the embodiment of the application, the user can bind appropriate data for the corresponding component through the model binding operation, so that the design of a page with richer data display can be supported, and the flexibility and the universality of the user during application construction can be further improved.

In some embodiments, referring to fig. 5, fig. 5 is an optional flowchart of an application building method provided in the embodiments of the present application. Based on fig. 3, the step S102 generates a virtual DOM tree of the page based on the page description information, which can be implemented by steps S501 to S503. The following will be described with reference to each step, and the execution subject of the following steps may be the foregoing terminal or server.

In step S501, a component set included in the page is determined based on the page description information.

Here, all components used in the page are included in the component set, and the components included in the page are described in the page description information. By parsing the page description information, component description information of components contained in the page can be obtained. Based on the component description information of the component, the component can be parsed. Therefore, based on the page description information, all components contained in the page can be determined.

In some embodiments, the component set may be a base component set including all base components used in the page, and the base components and/or the integrated components included in the page are described in the page description information. By analyzing the page description information, the component description information of the basic component and/or the component description information of the integrated component contained in the page can be obtained. Because the integrated component is formed by combining a plurality of basic components, the basic components contained in the integrated component can be obtained by analysis based on the component description information of the integrated component. Thus, based on the page description information, all of the underlying components contained in the page can be determined. In implementation, a union operation may be performed on the basic components directly used in the page design operation and the basic components indirectly included in the integration components used in the page design, so that the basic component set included in the page may be determined.

In step S502, each component in the component set is globally registered.

Here, each component in the set of base components can be registered to global, facilitating component rendering during application runtime page loading.

In step S503, a custom tag manner is adopted to generate a virtual DOM tree of the page based on the page description information and the registered components.

Here, based on the page description information and the registered components, an HTML fragment corresponding to the page may be determined, and a JS object describing the HTML fragment, that is, a virtual DOM tree of the page may be generated.

The browser can perform page rendering by using a custom tag mode. The components can be used as minimum rendering units, and in the process of generating the virtual DOM tree of the page, a self-defined tag can be generated for each component to serve as a node in the virtual DOM tree. In practice, those skilled in the art can define suitable custom tags for each component according to practical situations, and the definition is not limited herein.

In the embodiment of the application, the browser can use the user-defined tag mode to render the page, so that the virtual DOM tree of the page is generated by using the user-defined tag mode without depending on a specific front-end frame, and the flexibility and the universality of the user during application construction can be further improved. In addition, the component set can also be a basic component set, and as the basic components contained in the basic component set are deduplicated, only one global registration is needed when the same basic component appears in the page for multiple times, so that the time consumption of page loading can be reduced, and the page loading performance is improved.

In some embodiments, referring to fig. 6, fig. 6 is an optional flowchart of an application building method provided in the embodiments of the present application. Based on fig. 5, step S103 may be implemented by steps S601 to S602. The following will be described with reference to each step, and the execution subject of the following steps may be the foregoing terminal or server.

In step S601, for each component in the component set, based on the virtual DOM tree, a sub-static resource file corresponding to the component and a dynamic load code of the component are generated.

Here, the virtual DOM tree is a JS object for describing an HTML fragment corresponding to the page, and the HTML fragment corresponding to each component in the page can be determined based on the virtual DOM tree. And packaging the HTML fragments of the components into corresponding HTML files or JS files and the like to obtain the sub-static resource files corresponding to the corresponding components. And according to the determined sub-static resource file, generating the dynamic loading code of the corresponding component. In implementation, the corresponding dynamic loading code can be generated according to the dynamic loading mode adopted by the actual situation. For example, when a component is dynamically imported by adopting an import statement, a corresponding import code can be generated as a dynamic loading code of the component; when the component is dynamically imported by adopting the require statement, a corresponding require code can be generated to be used as a dynamic loading code of the component.

In step S602, a main static resource file of the page is generated based on the virtual DOM tree and the dynamic load code of each component.

Here, based on the virtual DOM tree of the page, the basic static resource required by page loading can be determined, the determined basic static resource is packaged into an HTML file or a JS file, and the like, and the dynamic loading code of each component is added to an appropriate position in the JS file, so that the main static resource file can be obtained.

In the embodiment of the application, the sub-static resource files corresponding to the components and the dynamic loading codes of the components are generated based on the virtual DOM tree, and the main static resource file of the page is generated based on the virtual DOM tree and the dynamic loading codes of each component. Therefore, each component in the page and the main static resource file of the page can be separately packaged, and when the page is loaded, the required components can be dynamically loaded according to needs, so that the loading performance of the page in the built application can be further improved.

In some embodiments, referring to fig. 7, fig. 7 is an optional flowchart of an application building method provided in an embodiment of the present application, based on fig. 3, where the component includes a base component and an integrated component, and the integrated component is obtained by combining a plurality of base components, the method may further perform steps S701 to S703, which will be described below with reference to the steps, and an execution subject of the steps may be the foregoing terminal or server.

In step S701, in response to a component construction operation for a target integrated component, displaying a component construction interface of the target integrated component; the component build interface includes a second component list area including a base component and an integration component.

Here, the component building operation may include at least one of newly adding an integrated component, modifying an integrated component, and the like. The target integrated component is an integrated component which is required to be designed and corresponds to the component construction operation, and can be an integrated component newly added in the component construction operation or an integrated component modified in the component construction operation. In practice, the target integration component may be a service-related fragment or a service-independent generic template, or the like.

The component building interface may be an interface supporting a user to design an integrated component, and the second component list area may be located in any suitable position in the component building interface, which is not limited herein. The second component list area may display some or all of the pages that may currently be used for integrated component design, which may include, but is not limited to, at least one base component and at least one integrated component. In some embodiments, the second component list area may further include at least one layout container therein.

In step S702, in response to a component design operation performed on the integrated component, generating component description information of the target integrated component; wherein the component design operation comprises an editing operation on a base component and/or an integrated component in the second component list area.

Here, the editing operation on the base component may include dragging, clicking, touching, importing, and the like on the base component itself, and does not involve an operation on the base component code layer. Editing operations on the integrated component may include dragging, clicking, touching, importing, etc. the integrated component itself, and do not involve operations on the integrated component code layer.

Component design operation the designed component is at the bottom layer component description information that describes in a specific way. For a base component or layout container, the component description information may be description information written directly by IT personnel; for an integrated component, the component description information may be generated according to a component design operation of a user during a component design process. The component description information may describe one or more of base components, integrated components, layout containers, component nesting relationships, component property information, data binding information, and the like, included in the currently designed components.

In step S703, the component description information is saved in response to a component saving operation performed on the target integrated component.

Here, the component description information of the target integrated component may be stored in a local or database, etc., so that other applications or pages may obtain the target integrated component based on the component description information and perform component construction or page construction based on the target integrated component.

In implementation, the component description information may be description information of the component in a JSON Schema manner, or may also be description information of the component in an XML manner or other suitable manners, which is not limited herein.

In some embodiments, the method further comprises: and issuing the component description information in response to the component issuing operation performed on the target integrated component. Here, the component description information of the target integrated component may be published to a component market or the like for other users to acquire the component description information of the target integrated component from the component market for component construction or page construction.

In the embodiment of the application, the design of the integrated component is realized through editing operation on the basic component and/or the integrated component in the second component list area, and the component description information of the designed target integrated component is saved through component saving operation on the target integrated component. In this way, since the editing operation on the basic component and the integrated component during component design is based on the operation performed by the basic component and the integrated component, rather than the operation performed by the code layer, users with different development experiences can construct the integrated component based on the basic component and the integrated component in a low-code manner. In addition, the designed component description information of the target integrated component can be stored locally or published to a component market, so that a current user or other users can obtain the component description information of the target integrated component from the local or component market for component construction or page construction. Therefore, the universality of the integrated component can be further improved, and the efficiency of a user in application construction or component construction is further improved.

In some embodiments, referring to fig. 8, fig. 8 is an optional flowchart of an application construction method provided in an embodiment of the present application, based on fig. 3, the method may further perform the following steps S801 to S804, which will be described below with reference to the steps, and an execution subject of the following steps may be the foregoing terminal or server.

In step S801, in response to a page loading operation on the current device for the page, a main static resource file and at least one sub static resource file of the page are acquired.

Here, the page loading operation may be performed in a browser running on the current device, or may be performed in a Web application client running on the current device, which is not limited herein. Since the main static resource file and the at least one sub static resource file of the page are published when the application is published, the main static resource file and the at least one sub static resource file of the page can be obtained from the CDN or the static resource server. The main static resource file and the at least one sub static resource file of each page can be identified by specific identifiers, such as a page name and a version number, a unique identifier of the page, and the like.

In step S802, the state tree and the virtual DOM tree of the page are dynamically loaded based on the main static resource file and the at least one sub static resource file.

Here, the state tree of each model in the page may include a state tree of each model in the page, and each field in each model may be included in the state tree of each model. The main static resource file can include the initial virtual DOM tree of the page and the state tree of each model related to the initial DOM tree in the page, and the initial virtual DOM tree of the page and the state tree of each model related to the initial DOM tree can be obtained and loaded by reading the main static resource file. The state tree of the page can be dynamically determined by reading at least one sub-static resource file to dynamically load the virtual DOM tree containing at least one component in the page and the state tree of the corresponding model.

In step S803, each component in the virtual DOM tree is rendered based on the state tree of the page, so as to obtain the rendered page.

Here, the state tree of the page includes fields in each model in the page. The values of fields in each model can be obtained based on the state tree of the page, the data bound by each component in the virtual DOM tree can be determined based on the data binding relationship between the specific model and the components, and then the rendered page can be obtained, wherein the rendered page comprises the data required to be displayed by each current component.

In step S804, the rendered page is displayed on the current device.

In the embodiment of the application, when the page is loaded, the main static resource file and the at least one sub static resource file of the page can be directly obtained, the page configuration request for the back-end service can be reduced, so that the page loading performance can be improved, the use experience of a user can be improved, the dynamic loading of the page can be realized through the main static resource file and the at least one sub static resource file, and the page loading performance can be further improved. In addition, the page rendering is carried out based on the virtual DOM tree, so that frequent updating in the page loading process can be effectively avoided, and the page performance can be further improved.

In some embodiments, referring to fig. 9, fig. 9 is an optional flowchart of the application building method provided in the embodiments of the present application, based on fig. 8, the state tree of the page includes at least one state tree of a model, and step S803 may be executed through steps S901 to S904, which will be described below with reference to the steps, and an execution subject of the following steps may be the foregoing terminal or server.

In step S901, for each model, a data request is made to the backend service corresponding to the model, and a backend field returned by the backend service is obtained.

Here, each model may correspond to one backend service, and the backend service corresponding to each model may be a service belonging to the same backend application or a service belonging to different backend applications. In implementation, the corresponding relation between the model and the backend service can be maintained by managing the model.

In step S902, values of fields in the model are determined based on the state tree of each model and the back-end field corresponding to the model.

Here, the correspondence between the model and the backend service may include a correspondence between a backend field of the backend service and a field of the model. The state tree of the model includes fields in the model. Based on the backend fields corresponding to the model and the correspondence between the backend fields of the backend service and the fields of the model, the values of the fields in the model can be determined.

In step S903, reference relationships of the components in the virtual DOM tree to fields of the models are obtained.

Here, the reference relationship of each component to the field of each model may be determined and stored through a model binding operation when the page is built, and may be stored locally, or may be stored in a cloud server or a database. Therefore, the reference relationship of each component in the virtual DOM tree to the field of each model can be read from a local or cloud server and a database.

In step S904, each component in the virtual DOM tree is rendered based on the value of each field in each model and the reference relationship, so as to obtain the rendered page.

Here, based on the value of each field in each model and the reference relationship of each component in the virtual DOM tree to the field of each model, the current value of the data corresponding to each component in the virtual DOM tree can be determined. In this way, the information that each component in the virtual DOM tree currently needs to be displayed can be rendered.

In the embodiment of the application, a data request is made to a back-end service corresponding to a model, the value of each field in the model is determined, and the current value of data corresponding to each component in the virtual DOM tree is determined based on the reference relation of each component in the virtual DOM tree to the field of each model. Therefore, the information which needs to be displayed currently by each component in the virtual DOM tree can be quickly rendered, and the rendered page is obtained.

In some embodiments, referring to fig. 10, fig. 10 is an optional flowchart of an application building method provided in the embodiments of the present application. Based on fig. 9, the method may further perform steps S1001 to S1002, which will be described below in conjunction with each step, and the main body of the following steps may be the foregoing terminal or server.

In step S1001, for each field in each model, synchronizing a value of the field after being changed to each component that refers to the field in the virtual DOM tree when it is detected that the field is changed, to obtain an updated virtual DOM tree;

here, whether each field in the model is changed can be determined by monitoring whether an API related to the field change is called, or whether each field in the global data is changed can be directly monitored to determine whether any field is changed. In practice, a person skilled in the art can detect whether any field is modified in a suitable manner according to practical situations, and is not limited herein.

The value of the changed field can be synchronized to each component in the virtual DOM tree referencing the field in a global data communication mode, so that the updated virtual DOM tree is obtained.

In step S1002, the page is refreshed based on the updated virtual DOM tree.

In the embodiment of the application, under the condition that the field is detected to be changed, the changed value of the field is synchronized to each component which refers to the field in the virtual DOM tree to obtain the updated virtual DOM tree, and the page is refreshed based on the updated virtual DOM tree. In this way, global data consistency can be guaranteed. In addition, when the virtual DOM tree is adopted for page refreshing, only changed components can be re-rendered by comparing differences of pages before and after refreshing, so that the overall performance of the pages can be effectively improved, and the use experience of a user can be further improved.

Next, an exemplary application of the embodiment of the present application in a practical application scenario will be described. The application construction method provided by the embodiment of the application can be applied to scenes such as application construction, page construction and the like in a low-code platform.

The embodiment of the application provides a low-code platform, so that professional Internet Technology (IT) personnel and non-professional IT personnel can construct Web applications and Web pages which are adaptive to business scenes such as PC, mobile and large-screen scenes by using a visual interaction interface, and the constructed Web applications and Web pages can have the performance which is comparable to that of applications compiled by native JavaScript. The low-code platform provided by the embodiment of the application provides tenants, templates, fragments, models and the like, and the page is described in a JSON Schema mode, so that at least one problem of the low-code platform in the related technology can be solved.

The low-code platform provided by the embodiment of the application comprises an application construction platform and a component construction platform, wherein the application construction platform can be used for constructing an application, and the component construction platform can be used for constructing component assemblies such as fragments and templates. The user needs to apply for a tenant on the application construction platform, and application construction can be performed under the applied tenant. When the application is built, a user only needs to create a page in the application online and click an application deployment button, and the application building platform automatically and dynamically deploys the current application based on the created page.

The page may be composed in the following manner: basic components (0/i) + fragments (0/j) + templates (0/k) + layout (1/m), where i, j, k can be any positive integer, and m can be any integer greater than 1; and the low code platform reuses grain as basic components/templates/fragments/layouts. Users with different development experience levels can utilize the component to construct a platform, combine with actual service requirements, and generate corresponding JSON Schema files by dragging at least one or more of basic components, templates and layouts, so as to assemble fragments applicable to specific services. Users with different development experience levels can also utilize the component construction platform to generate corresponding JSON Schema files by dragging at least one or more of the basic components, the templates and the layout, so that a universal component set is assembled and used as the template. When a plurality of services have similar application scenes, the corresponding page construction can be carried out by using the template.

When the application is constructed, the whole application/page is described in a JSON Schema mode. When the application publishing (or page publishing) is carried out, the JSON Schema file is analyzed, the basic components needing to be packaged into the static resources are analyzed, and a corresponding virtual Document Object Model (DOM) is generated. When the page is loaded, the page can be rendered by utilizing the self-defined tag function supported by the browser.

Fig. 11 is a schematic diagram of a user interaction interface of an application building platform according to an embodiment of the present application, and as shown in fig. 11, the user interaction interface of the application building platform is mainly divided into five regions: the page list area 1110 can display all pages of the current application, can edit the pages by clicking each page, and can newly create a page for the current application by clicking the page adding button 1111; navigation area 1120, where users can view tenant information, application information, and help, search components/search applications, model management, and click shopping cart 1121 in navigation area 1120 to component market download templates and fragments; a first toolbar area 1130 in which a user can save, cancel, restore, and publish the current page to the last operation; a first component list area 1140 where the user can view all the underlying components, layout containers, templates, and snippets that can be used by the current application; a page design and layout area 1150 where the user can compose a page using the basic components, layouts, templates or fragments in the first component list area 1140 and double-click the corresponding basic components/layouts/templates/fragments to configure the properties.

Fig. 12 is a schematic diagram of a user interaction interface of a component building platform according to an embodiment of the present application, and as shown in fig. 12, the user interaction interface of the component building platform is also mainly divided into five areas: a second component list area 1210 that can show all the basic components, layout containers, and template pages that can be currently used; a navigation area 1220 in which applications, clips, templates, etc. of the current user can be viewed, as well as search components/search applications, model management, and clicking a shopping cart 1221 in the navigation area 1220 can go to a component market to download templates, clips, etc.; a second toolbar area 1230 in which a user can save, cancel, restore, and issue a next operation and a fragment or template; a component design and layout area 1240 where a user can combine the basic components, layouts and templates in the second component list area 1230 into a fragment or template, and perform attribute configuration by double-clicking the corresponding basic components/layouts/templates; the property panel area 1250 can display the properties of the basic component/layout/template selected by the user in the component design and layout area 1240, and the user can configure the properties of the basic component/layout/template displayed in the area. In implementation, the component design and layout area in the user interaction interface of the component building platform and the page design and layout area in the user interaction interface of the application building platform can be implemented on the bottom layer by using the same set of interfaces, or can be implemented by using different interfaces respectively.

Based on the low-code platform provided in the embodiment of the present application, an application construction method is provided in the embodiment of the present application, referring to fig. 13, and fig. 13 is a schematic implementation flow diagram of the application construction method provided in the embodiment of the present application. As shown in fig. 13, the method mainly includes four sub-processes: component/template/fragment artifact generation 1310, tenant and application information creation 1320, Web page configuration 1330, page generation and publication 1340. The respective sub-flows will be described below.

1) Component/template/fragment etc. product generation

The basic component, the template and the fragment can be constructed by utilizing the component construction platform, and when the basic component, the template and the fragment are constructed, a corresponding description file of the JSON Schema is generated to describe the information of the whole basic component, the template and the fragment constructed by the user.

Referring to fig. 13, component/template/fragment etc. product generation may comprise the following steps:

step S1311, an IT person compiles and publishes a basic component; here, the base component can be published to the component/fragment/template marketplace;

step S1312, non-IT personnel/IT personnel construct and release the fragments/templates by utilizing the component construction platform; here, the non-IT person/IT person may combine the components/templates acquired from the component/fragment/template market using the component construction platform to construct the generated fragment/template, and the constructed generated fragment/template may be released to the component/fragment/template market.

2) Tenant and application information creation

The purpose of creating the tenant is to isolate different enterprise/personal information and application configurations, and a user only needs to configure information such as a database, a cluster, a domain name and the like for the application at the tenant level.

Referring to fig. 13, tenant and application information creation may include the following steps:

step S1321, a user creates a tenant;

in step S1322, the user creates an application within the tenant.

3) Web page configuration

The Web page configuration process is the core of constructing a Web page, and the configuration and construction of the page can be completed mainly by dragging and pulling the components/templates/fragments in an application construction platform. After the configuration of the Web page is completed, description information of a JSON Schema is generated, and the description information records which basic components, templates, fragments and layouts are used by the page, which styles are respectively used, and skip logics among the pages.

Referring to fig. 13, the Web page configuration may include the steps of:

step S1331, a user creates a page for the application;

step S1332, dragging and laying out for the page by the user;

step S1333, the user drags the component/segment/template for the page;

step S1334, the user carries out attribute configuration on the components/fragments/templates in the page;

step S1335, the user carries out model binding on the components/fragments/templates in the page;

step S1336, the application construction platform detects whether the user carries out page saving or application release operation; if the user performs the page saving operation, the process goes to step S1337; if the user performs the application issuing operation, the step S1341 is performed;

step S1337, the application building platform generates and stores the JSON Schema file and the page version information of the page.

4) Page generation and publication

The page generation and release process is the core of a page performance matching native framework constructed by using low codes, and the traditional mode is to write JS or write a front-end page by using frames such as React, Vue, Angular and the like; here, the base component is used as a minimum rendering unit, and a front end page is generated through the virtual DOM.

Referring to fig. 13, page generation and publication may include the steps of:

step S1341, the application building platform generates a virtual DOM tree of the page by utilizing the JSON Schema file of the page;

step S1342, the application building platform utilizes the virtual DOM tree to generate corresponding static resource files such as HTML/JS and the like;

step S1343, the application construction platform issues the generated static resource file carrying the page version information to the CDN;

step S1344, the application building platform generates and saves the JSON Schema file and the page version information of the page.

The page generation and release method provided by the embodiment of the application has the following beneficial effects:

a) the page is described by using the JSON Schema, so that the method has the advantages of better flexibility, convenience and high portability, in addition, the JSON Schema file is information in a JSON format, and a basic component, a segment, a template or a page corresponding to the JSON Schema can be applied to any application supporting the JSON by copying the JSON;

b) the JSON Schema file + base component is converted to a real JS file, rather than using the manner in the related art of downloading a JSON file at runtime to load a parsed page. Since the post-delivery page has been converted to formal elements such as HTML/JS/CSS and deployed to the static resource server/CDN, the performance of the page is the same as the front-end page written by the native JS framework.

The low-code platform provided by the embodiment of the application mainly comprises the following core technical points during implementation:

1) the application can be built on the low-code platform by the low-code mode of users with different development experience levels: the IT personnel are mainly responsible for maintaining basic components, non-IT personnel can construct the fragments/templates by utilizing the component builder, and non-IT/IT personnel can construct the pages by utilizing the application construction platform.

Here, the low-code platform provided in the embodiment of the present application adopts the technical architecture shown in fig. 14 at the client, can implement page construction in a low-code manner, and can adapt to page layout scenes of the PC side, the mobile side, and the large screen side. As shown in fig. 14, the client includes a rendering layer 1410, an infrastructure layer 1420, a data layer 1430, a product layer 1440, a page layer 1450 and an application layer 1460 in terms of technical architecture, and when performing page design, the rendering layer 1410, the infrastructure layer 1420, the data layer 1430 and the product layer 1440 are mainly involved, wherein:

rendering layer 1410: during page design, the JSON Schema information of the page/template/segment can be analyzed and rendered, so that the page or the segment/template constructed by a user can be displayed in a page design and layout area and an assembly design and layout area;

infrastructure layer 1420: different page layout engines can be provided, IT personnel are packaged into a response type component by combining with a unified Application Programming Interface (API), and different layout requirements of scenes of a large screen end, a mobile end and a PC end can be automatically met based on the unified API;

data layer 1430: the method can support a user to utilize an application building platform and a component building platform at an infrastructure layer, and carry out data binding and custom code logic binding when dragging a basic component/fragment/template; the data binding can be the mapping of front-end and back-end data, and the data mapping relation configured by a user can be stored in a database;

product layer 1440: for the component construction platform, a fragment/template can be generated after data binding and attribute configuration; for the application build platform, the end product of the application build will be a page; at the artifact level, the description of the fragments/templates/entire page can use the method of JSON Schema. For example, an input box component may be described using JSON Schema information as follows:

{

"name": input box ",

“component”:“vu-pc-input”,

“type”:“widget”,

“version”:“1.0.0”,

“elements”:[],

“binding”:{

“type”:“model”,

“value”:“$model？.namespace1.userInfo.name”

},

“events”:{

“type”:“go_page”,

“value”:“/admin/index”

},

“props”:{

“component”:“vu-pc-input”,

“value”:“”,

"placeholder": please enter ",

“type”:“text”,

“size”:“default”,

“disabled”:false,

“clearable”:true,

“maxlength”:20,

“search”:false

},

“uuid”:“******”

}

wherein, name is the name of the component; the component is a component needing to be rendered by the virtual DOM; the type is a component type and can be a layout layer, a basic component and the like; version is a version number; elements are sub-component nested arrays, such as nested components in a layout component; binding is bound data, and comprises type and value attributes, wherein the type is a bound data type and can be a model, static data and the like, the value is a value of the bound data, if the bound data type is static data, a corresponding value is a fixed value, if the bound data type is the model, the corresponding value can be common mathematical operation or JS code, and corresponding data can be automatically generated based on the mathematical operation or JS code when a page is loaded; events is a bound logical event, and includes a type and a value attribute, where the type is an event type and can support common page events, such as page jump, click event, slide event, etc., and the value can be a target value of the event, such as a target page of the page jump, a jump page corresponding to the click event, or a JS code to be executed, etc.; the profiles are configured for the attribute panels opened by the basic components; uuid is the unique identification of the component.

When a user constructs a page in a dragging and pulling mode on the low-code platform, the application construction platform can automatically generate description information of a JSON Schema mode corresponding to the page to describe the whole page, and the corresponding page can be rendered through a JSON Schema rendering engine of a rendering layer based on the description information of the JSON Schema mode.

2) Realizing communication among the components and communication between the components and backend services;

here, the low-code platform provided in the embodiment of the present application may perform data communication between the components and the backend service by means of one-to-one mapping between the front-end model and the backend model, and the communication between the components may use a mode similar to Vuex multicast to perform distribution management on global data on the top layer, thereby implementing global data communication, so that the global data of each component may be kept consistent.

Referring to fig. 15, fig. 15 is a schematic view of an implementation flow of a page loading method provided in an embodiment of the present application, where the page is a page constructed by an application construction method provided in the embodiment of the present application, and the method is executed by an application to which the page belongs, and includes the following steps:

step S1501, starting to load a page in a browser;

step S1502, generating a state tree of a page based on a static resource file;

step S1503, requesting a back-end service;

step S1504, binding the back-end field with the front-end model and the field; here, the binding may be performed based on a binding relationship between a back-end field and a front-end model and between fields maintained when the page is constructed;

step S1505, judge whether there is assembly/self-defining code to change the model data; if yes, go to step S1506; if not, go to step S1507; whether the model data of the component or the custom code is changed or not can be judged by monitoring whether the specified API is called or not or monitoring whether the global data is changed or not at the top layer;

step S1506, displaying a page in the browser;

step S1507, the model is modified in a manner similar to Vuex simulation;

step S1508, performing global update of model data;

in step S1509, a page refresh is performed in the browser. Here, the basic component to be updated can be determined by comparing the virtual DOM before and after updating, and when the page is refreshed, only the basic component to be updated is refreshed, so that the resource consumption caused by page updating can be reduced, and the performance of the page can be improved.

3) The application has the performance which is comparable to that of the application written by the native JS.

Here, the low-code platform provided in the embodiment of the present application generates a static resource file in a JSON Schema manner when an application or a page is published, so that a page configuration request may be reduced, and a purpose of improving performance is achieved.

Fig. 16A is a schematic implementation flow diagram of a page publishing method provided in an embodiment of the present application, where the method is executed by an application building platform, and as shown in fig. 16A, the whole page publishing process includes the following steps:

step S1611, analyzing a JSON Schema file; the step can analyze the JSON Schema file, and carry on the depth traversal to the component tree, find out the minimum set of basic components used; here, the minimum set of basic components is a set of all templates, segments, and all basic components included in the basic components in the page after deduplication;

step S1612, component registration; the step can carry out global registration on the minimum set of the basic components obtained by analyzing the JSON, and is convenient to use during rendering;

in step S1613, a resource is generated. Here, the data structure described by the entire JSON Schema file can be utilized to generate a custom tag DOM tree of the corresponding page. Here, since rendering needs to be performed by using a browser custom tag, it is necessary to run a built application, such as a FireFox browser of version 63 or more, a Chrome browser of version 67 or more, an Edge browser of version 79 or more, an Opera browser of version 64 or more, and the like, in a browser that supports a custom tag function. Furthermore, in order to be compatible with a browser that does not support the custom tag in part, a specific patch may be used at the bottom of the rendering engine to support the rendering of the custom tag, for example, the specific patch may be implemented by the open source item https:// gitubs. com/webcams/polyfils/tree/master/packages/webcams, the open source item patch supporting browsers including but not limited to all versions of the Edge browser, 11 or more versions of the IE browser, the latest version of the Chrome browser, 9 to the latest version of the Safari browser, and so on.

Fig. 16B is a schematic implementation flow diagram of a page publishing method provided in an embodiment of the present application, where the method is executed by an application building platform, and as shown in fig. 16B, the method includes the following steps:

step S1621, analyzing the JSON Schema file;

step S1622, traversing the component tree in depth;

step S1623, judging whether the component tree is traversed or not; if yes, go to step S1628; if not, go to step S1624

Step S1624, determining whether the current version component is already registered; if yes, go to step S1626; if not, go to step S1625;

step S1625, carrying the version to carry out global registration on the component;

step S1626, generating a DOM with a tag of < self-consistent is ═ component ">;

step S1627, binding the property/event/model for the component;

step S1628, generating a whole DOM tree;

step S1629, generating a code of the dynamic loading component;

step S16210, packaging the DOM, HTML file and code logic to be rendered.

By the method, the static resource file corresponding to the page can be generated.

In some embodiments, step S1629 may be replaced by packaging the dependent JS file to the current project, so that dynamic loading of resources is not required when the page is loaded.

In some embodiments, universal frameworks such as Vue/React/Angular can be supported at the bottom layer of the rendering engine, and when page rendering is carried out, the rendering of the custom component can be carried out by utilizing the dynamic function of the corresponding universal framework.

In some embodiments, a back-end service may also be directly requested when a page is loaded, the page configuration information is acquired, and the page is rendered using the configuration information.

The low-code platform provided by the embodiment of the application has the following beneficial effects:

1) IT and non-IT personnel can use the low-code platform to compile low codes to establish own websites;

2) any person can package the fragments related to the service and the general components (namely the templates) unrelated to the service based on the basic components, so that the individuation and the generalization of the component construction can be realized;

3) the new characteristics of the browser are utilized to define the tag, so that the construction of the page is independent of the front-end frame; the IT personnel can write the components only by following certain specifications, or can select the front-end framework according to own preference;

4) the low-code platform does not strongly depend on a specified back-end system, can insert the existing Web page in a plug-in mode, supports partial replacement of the page in the Web application in the related technology, can coexist with the page in the related technology, and further can realize gradual migration of the page;

5) the page constructed based on the platform can directly load static resources without requesting page configuration information in the loading process, so that the page loading performance can be comparable to that of a page directly compiled by a native framework;

6) the front-end page can be combined with a data driving + event bus mode to carry out data communication between the page and the components, so that the construction of complex pages can be well supported.

Continuing with the exemplary structure of the application building apparatus 455 provided by the embodiments of the present application as software modules, in some embodiments, as shown in fig. 2, the software modules stored in the application building apparatus 455 of the memory 450 may include:

a first generating module 4551, configured to generate page description information of a page in a current application in response to a page design operation performed on the page; wherein the page design operation comprises an editing operation on a component in a first component list area;

a second generation module 4552, configured to generate a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed for a current application;

a third generating module 4553, configured to generate a static resource file of the page based on the virtual DOM tree; wherein the static resource files comprise a main static resource file and at least one sub static resource file;

an issuing module 4554, configured to issue the main static resource file and the at least one sub static resource file.

In some embodiments, the first component list area further includes a layout container therein, the page design operation further includes an edit operation on the layout container, and the first generation module is further configured to: in response to an editing operation on the layout container, adding description information of the layout container in the page description information; in response to an editing operation on a component, adding description information of the base component in description information of the layout container.

In some embodiments, the state tree of the page includes a state tree of at least one model; the rendering module is further to: for each model, making a data request to a back-end service corresponding to the model, and acquiring a back-end field returned by the back-end service; determining the value of each field in the model based on the state tree of each model and the back-end field corresponding to the model; acquiring the reference relation of each basic component in the virtual DOM tree to the field of each model; and rendering each basic component in the virtual DOM tree based on the value of each field in each model and the reference relation to obtain the rendered page.

Embodiments of the present application provide a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the application building method described in the embodiment of the present application.

Embodiments of the present application provide a computer-readable storage medium storing executable instructions, which when executed by a processor, will cause the processor to execute an application building method provided by embodiments of the present application, for example, the method shown in fig. 3.

In some embodiments, the computer-readable storage medium may be memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

In some embodiments, executable instructions may be written in any form of programming language (including compiled or interpreted languages), in the form of programs, software modules, scripts or code, and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

By way of example, executable instructions may correspond, but do not necessarily have to correspond, to files in a file system, and may be stored in a portion of a file that holds other programs or data, such as in one or more scripts in a hypertext Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files that store one or more modules, sub-programs, or portions of code).

By way of example, executable instructions may be deployed to be executed on one computing device or on multiple computing devices at one site or distributed across multiple sites and interconnected by a communication network.

In summary, the flexibility and the universality of the application construction of the user can be improved through the embodiment of the application, so that the user with different development experience levels can be supported to construct the application in a low-code mode, the loading performance of the page in the constructed application can be improved, and the use experience of the user is improved.

The above description is only an example of the present application, and is not intended to limit the scope of the present application. Any modification, equivalent replacement, and improvement made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. An application building method, comprising:

generating a virtual DOM tree of the page based on the page description information in response to an application publishing operation performed on a current application;

2. The method of claim 1, wherein the first component list area further comprises a layout container, wherein the page design operation further comprises an edit operation on the layout container, and wherein generating the page description information of the page in response to the page design operation performed on the page in the current application comprises:

in response to an editing operation on the layout container, adding description information of the layout container in the page description information;

in response to an editing operation on a component, adding description information of the component in description information of the layout container.

3. The method of claim 2, wherein the page design operation further comprises an attribute configuration operation, and wherein generating page description information for the page in response to the page design operation performed on the page in the current application further comprises:

responding to attribute configuration operation on the component, in the page description information, according to the attribute configured by the attribute configuration operation, updating the description information of the component.

4. The method of claim 2, wherein the page design operation further comprises a model binding operation, and wherein generating page description information for the page in response to the page design operation performed on the page in the current application further comprises:

in response to a model binding operation performed on a component, adding description information of a data binding relationship between a model corresponding to the model binding operation and the component in the description information of the component;

and saving the data binding relation.

5. The method according to any one of claims 1 to 4, wherein generating a virtual DOM tree of the page based on the page description information comprises:

determining a set of components contained in the page based on the page description information;

globally registering each component in the set of components;

and generating a virtual DOM tree of the page by adopting a self-defined tag mode based on the page description information and the registered components.

6. The method of claim 5, wherein generating the static resource file of the page based on the virtual DOM tree comprises:

for each component in the component set, generating a sub-static resource file corresponding to the component and a dynamic loading code of the component based on the virtual DOM tree;

and generating a main static resource file of the page based on the virtual DOM tree and the dynamic loading code of each component.

7. The method according to claim 5, wherein the page description information is description information in a JSONSchema manner.

8. The method of any of claims 1 to 4, wherein the components comprise a base component and an integrated component, the integrated component being a combination of a plurality of base components, the method further comprising:

displaying a component build interface of a target integrated component in response to a component build operation for the target integrated component; the component construction interface comprises a second component list area, and the second component list area comprises a basic component and an integrated component;

generating component description information of the target integrated component in response to a component design operation performed on the integrated component; wherein the component design operation comprises an editing operation on a base component and/or an integrated component in the second component list area;

saving the component description information in response to a component save operation performed for the target integrated component.

9. The method according to claim 8, wherein the component description information is description information in a json schema manner.

10. The method according to any one of claims 1 to 4, further comprising:

responding to a page loading operation aiming at the page on the current equipment, and acquiring a main static resource file and at least one sub static resource file of the page;

dynamically loading a state tree and a virtual DOM tree of the page based on the main static resource file and the at least one sub static resource file;

rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page;

and displaying the rendered page on the current equipment.

11. The method of claim 10, wherein the state tree of the page comprises a state tree of at least one model; rendering each component in the virtual DOM tree based on the state tree of the page to obtain the rendered page, wherein the rendering comprises the following steps:

aiming at each model, performing a data request to a back-end service corresponding to the model to obtain a back-end field returned by the back-end service;

determining the value of each field in the model based on the state tree of each model and the back-end field corresponding to the model;

acquiring the reference relation of each component in the virtual DOM tree to the field of each model;

and rendering each component in the virtual DOM tree based on the value of each field in each model and the reference relation to obtain the rendered page.

12. The method of claim 11, further comprising:

for each field in each model, under the condition that the field is detected to be changed, synchronizing the value of the changed field to each component which refers to the field in the virtual DOM tree to obtain an updated virtual DOM tree;

and refreshing the page based on the updated virtual DOM tree.

13. An application building apparatus, comprising:

14. An application building apparatus, comprising:

a memory for storing executable instructions;

a processor for implementing the method of any one of claims 1 to 12 when executing executable instructions stored in the memory.

15. A computer-readable storage medium having stored thereon executable instructions for, when executed by a processor, implementing the method of any one of claims 1 to 12.