CN114489607A

CN114489607A - Cross-stack application processing and page rendering method, device, equipment and storage medium

Info

Publication number: CN114489607A
Application number: CN202111666824.9A
Authority: CN
Inventors: 周雨; 高飞宇; 杨萌
Original assignee: Ruiting Network Technology Shanghai Co ltd
Current assignee: Ruiting Network Technology Shanghai Co ltd
Priority date: 2021-12-31
Filing date: 2021-12-31
Publication date: 2022-05-13

Abstract

The embodiment of the application provides a method, a device, equipment and a storage medium for cross-stack application processing and page rendering. In the embodiment of the application, the components of different technology stacks are uniformly and normatively described through the intermediate state syntax format to obtain the description files corresponding to the components, the application development platform can present the node objects corresponding to the components according to the description files corresponding to the components, and the front-end codes of the application are generated based on the editing operation on the node objects. In the whole process, under the condition that the application is generated through the application development platform, the first technology stack used by the application development platform generates the back-end code of the application, and the front-end code of the application is generated based on the second technology stack different from the first technology stack, so that the application development platform does not need to be regenerated aiming at the second technology stack, and the cost for generating the application is saved.

Description

Cross-stack application processing and page rendering method, device, equipment and storage medium

Technical Field

The present application relates to the field of internet technologies, and in particular, to a method, an apparatus, a device, and a storage medium for cross-stack application processing and page rendering.

Background

The page layout system is a system for designing the background, layout, size of word size, etc. of a page, and the page local system is usually developed by adopting a technology stack, for example, the development of the page local system can be carried out by adopting the technology stack comprising a progressive frame (Vue) for constructing a user interface, and can also be carried out by adopting the technology stack comprising a JavaScript library (React) for constructing the user interface.

When the page design is required to be performed through the page layout system, the page can only be designed according to the technical stack of the page local system, the limitation is strong, and if the page design is performed by adopting other technical stacks, the other technical stacks are accessed into the page local system at a high cost.

Disclosure of Invention

Aspects of the present application provide a method, an apparatus, a device and a storage medium for cross-stack application processing and page rendering, so as to save the cost of generating an application.

The embodiment of the application provides a cross-stack application processing method, which is applied to an application development platform and comprises the following steps: importing a description file of the target assembly, wherein the description file has a middle state syntax format which can be recognized by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front end view of the target application depends on the target assembly in a front-end assembly library of the second technology stack; based on the description file of the target component, presenting a first node object corresponding to the target component on a development interface, wherein the first node object can embody the attribute information of the target component; and generating front-end code of the target application based on the intermediate state syntax format in response to the editing operation on the first node object, wherein the front-end code describes the identification, style and layout information of the target component on which the front-end view of the target application depends.

The embodiment of the present application further provides a page rendering method for cross-stack application, which is applied to an electronic device, where a target application is installed on the electronic device, and the target application is developed based on a first technology stack and at least one second technology stack, and the method includes: running a target application, wherein the target application comprises at least one front-end code and a back-end code, the back-end code is developed based on a first technology stack, the back-end code describes back-end logic of the target application, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack under the condition that the number of the at least one front-end code is greater than or equal to two, and the target front-end code in the at least one front-end code describes identification, style and layout information of a target component, which is depended by the target application for a front-end view of the target front-end code; when the target front-end code is run, loading a target assembly required by the rendering of the target front-end code, and rendering a front-end view aiming at the target front-end code aiming at the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

An embodiment of the present application further provides a stack-spanning application processing apparatus, including: the device comprises an importing module, a presenting module and a generating module; the system comprises an import module, a target component library and a management module, wherein the import module is used for importing a description file of a target component, the description file has a middle state syntax format which can be recognized by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front end view of the target application depends on the target component in the front-end component library of the second technology stack; the presentation module is used for presenting a first node object corresponding to the target component on the development interface based on the description file of the target component, and the first node object can embody the attribute information of the target component; and the generating module is used for responding to the editing operation of the first node object and generating the front-end code of the target application based on the intermediate state syntax format, wherein the front-end code describes the identification, the style and the layout information of the target component on which the front-end view of the target application depends.

The embodiment of the present application further provides a page rendering device for cross-stack application, where a target application is installed on the page rendering device for cross-stack application, the target application is developed based on a first technology stack and at least one second technology stack, and the page rendering device for cross-stack application includes: the device comprises an operation module and a loading module; the running module is used for running a target application, the target application comprises at least one front-end code and a back-end code, the back-end code is developed based on a first technology stack, the back-end code describes back-end logic of the target application, under the condition that the number of the at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack, and the target front-end code in the at least one front-end code describes identification, style and layout information of a target component, which is depended by the target application aiming at a front end view of the target front-end code; and the loading module is used for loading a target assembly required by the rendering of the target front-end code when the target front-end code is run, and rendering a front-end view aiming at the target front-end code aiming at the target assembly by utilizing a rendering engine of a target technology stack corresponding to the target front-end code.

An embodiment of the present application further provides a stack-spanning application processing device, including: a memory and a processor; a memory for storing a computer program; and the processor is coupled with the memory and used for executing the computer program so as to realize the steps in the cross-stack application processing method provided by the embodiment of the application.

The embodiment of the present application further provides a page rendering device for cross-stack application, where a target application is installed on the page rendering device for cross-stack application, the target application is developed based on a first technology stack and at least one second technology stack, and the page rendering device for cross-stack application includes: a memory and a processor; a memory for storing a computer program; and the processor is coupled with the memory and used for executing the computer program so as to realize the steps in the page rendering method of the cross-stack application provided by the embodiment of the application.

Embodiments of the present application further provide a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement the steps in the cross-stack application processing method and/or the page rendering method for cross-stack application provided in the embodiments of the present application.

In the embodiment of the application, the components of different technology stacks are uniformly and normatively described through the intermediate state syntax format to obtain the description files corresponding to the components, the application development platform can present the node objects corresponding to the components according to the description files corresponding to the components, and the front-end codes of the application are generated based on the editing operation on the node objects. In the whole process, under the condition that the application is generated through the application development platform, the first technology stack used by the application development platform generates the back-end code of the application, and the front-end code of the application is generated based on the second technology stack different from the first technology stack, so that the application development platform does not need to be regenerated aiming at the second technology stack, and the cost for generating the application is saved.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a schematic flowchart of a cross-stack application processing method according to an exemplary embodiment of the present application;

FIG. 2a is a schematic diagram of a description file of a target component provided in an exemplary embodiment of the present application;

FIG. 2b is a diagram illustrating a syntax tree for intermediate states according to an exemplary embodiment of the present application;

FIG. 2c is a diagram illustrating a description file of a target component converted into description information of an intermediate syntax tree according to an exemplary embodiment of the present application;

fig. 3a is a schematic diagram of a cross-stack application processing procedure according to an exemplary embodiment of the present application;

FIG. 3b is a diagram illustrating another cross-stack application processing procedure according to an exemplary embodiment of the present application;

FIG. 3c is a schematic diagram of a rendering engine generating a front end view according to an exemplary embodiment of the present application;

fig. 4 is a schematic flowchart of a page rendering method for a cross-stack application according to an exemplary embodiment of the present application;

fig. 5a is a schematic structural diagram of a cross-stack application processing apparatus according to an exemplary embodiment of the present application;

fig. 5b is a schematic structural diagram of a page rendering apparatus for cross-stack application according to an exemplary embodiment of the present application;

fig. 6 is a schematic structural diagram of a cross-stack application processing device according to an exemplary embodiment of the present application;

fig. 7 is a schematic structural diagram of a page rendering device for a cross-stack application according to an exemplary embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

In the embodiment of the application, uniform and standard description is performed on components of different technology stacks through a middle-state syntax format to obtain description files corresponding to the components, the application development platform can present node objects corresponding to the components according to the description files corresponding to the components, and the front-end codes of the application are generated based on editing operation on the node objects. In the whole process, under the condition that different development teams generate the application through the application development platform, if the technology stack used by the development teams is different from the technology stack used by the application development platform, the development teams can be accessed to the application development platform based on the used technology stack without regenerating the application development platform aiming at the existing technology stack, and the cost for generating the application is saved. For example, when a development team generates an application through an application development platform, a first technology stack used by the application development platform generates a back-end code of the application, and a second technology stack (which can be a technology stack used by the development team) different from the first technology stack generates a front-end code of the application, so that the application development platform does not need to be regenerated for the second technology stack, and the cost for generating the application is saved.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

Fig. 1 is a schematic flowchart of a cross-stack application processing method according to an exemplary embodiment of the present application. The method is applied to an application development platform, and as shown in fig. 1, the method comprises the following steps:

101. importing a description file of the target assembly, wherein the description file has a middle state syntax format which can be recognized by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front end view of the target application depends on the target assembly in a front-end assembly library of the second technology stack;

102. based on the description file of the target component, presenting a first node object corresponding to the target component on a development interface, wherein the first node object can embody the attribute information of the target component;

103. and generating front-end code of the target application based on the intermediate state syntax format in response to the editing operation on the first node object, wherein the front-end code describes the identification, style and layout information of the target component on which the front-end view of the target application depends.

In this embodiment, the application development platform is software based on the first technology stack, and the application development platform is a framework for developing applications, so that an application developer can develop various types of applications based on the application development platform. The application Development platform is embedded in a browser as a browser plug-in, or the application Development platform can be used as a Software Development Kit (SDK) package of application Software. Wherein, the first technology stack is a technology stack used by the application development platform. In the case where the application development platform develops the target application, a back-end code of the target application may be developed based on the first technology stack, the back-end code describing back-end logic of the target application.

In this embodiment, the application developer may develop the front-end code of the target application based on the second technology stack, the front-end view of the target application being dependent on the target component in the front-end component library of the second technology stack.

The description file has an intermediate state syntax format which can be recognized by both the first technology stack and the second technology stack, and is a platform-free description file with an intermediate state syntax format (a general data format) obtained by abstracting and re-expressing the attribute information of the target component, namely the description file does not depend on a specific platform to which the front end view of the target application is applied. The description file is used to describe the name, identification, style, layout, functionality, attributes, etc. of the target component. It should be noted that the description file of the target component has a default initial value, and the description file of the target component may be modified subsequently based on the first node object corresponding to the target component. For example, the description file may be implemented as a Domain Specific Language (DSL) object, i.e., a component description object. Fig. 2a is an exemplary illustration of a description file of a target component. Wherein, the description file of the target component comprises: component name (name): "Image", chinese name (cname), component version (version): "0.0.1", component description (desc), picture description (IMGDesc), author/principal (author), component type (type): "common", attributes (tips) are used to define attribute names and types, including width (width): "number type", source address (src): "string", wherein the component type includes: general (common), Layout (Layout), forms (From), and Custom (Custom).

The content in fig. 2a includes:

in this embodiment, after the description file of the target component is imported, a first node object corresponding to the target component may be presented on the development interface based on the description file of the target component, where the first node object may embody attribute information of the target component, and the attribute information of the target component includes, but is not limited to: name, identification, version, type of the target component, and layout or style of the target component on the front end view, etc. The first node object may be a word, a list, a picture, an icon, or the like, which is not limited thereto. In the event that the first node object is triggered, front-end code for the target application may be generated based on the intermediate state syntax format in response to an editing operation on the first node object. Wherein the front-end code describes identification, style, and layout information of the target component on which the front-end view of the target application depends. Wherein, the editing operation on the first node object may include but is not limited to: dragging, modifying, adding, deleting, clicking or jumping and the like. For example, when a drag operation is performed on a first node object, attribute information of the first node object after the drag operation may be acquired, and the attribute information may be described based on the intermediate state syntax format to obtain a front-end code of the target application.

In this embodiment, the generation manner of the description file corresponding to the target component is not limited. In an optional embodiment, before the description file of the target component is imported into the application development platform, the target component may be described by using a middleware syntax format with respect to the target component in the front-end component library of the second technology stack, so as to obtain the description file of the target component. In another optional embodiment, before the description file of the target component is imported into the application development platform, each component in the front-end component library of the second technology stack may be described by using a middle-state syntax format to obtain a description file corresponding to each component; and generating a component description information base according to the description file of each component in the front-end component base of the second technology stack. And under the condition that the description file corresponding to the target component is needed, importing the description file corresponding to the target component from the component description information base into the application development platform so that the application development platform can generate the front-end code of the target application, or under the condition that the application needs to be generated according to each component in the front-end component base of the second technology stack, importing the component description information base into the application development platform so that the application development platform can generate the front-end code of the target application.

The implementation manner is not limited to describe each component in the front-end component library of the second technology stack by using the intermediate syntax format to obtain the description file corresponding to each component. Optionally, the components in the front-end component library of the second technology stack may include, but are not limited to: containers, words, pictures, tables, icons, dialog boxes, progress bars or panels, etc., and the description files may include, but are not limited to: attribute, logic, animation, behavior, and data of the component. The front end code description may include information on the front end view, such as the components, the style, layout, logic, behavior, animation, or data of the components.

In an optional embodiment, an implementation manner of presenting a first node object corresponding to a target component on a development interface based on a description file of the target component includes: analyzing the description file of the target component based on the intermediate state syntactic format to obtain attribute information of the target component under a second technical stack; and generating a first node object which can be identified by the first technology stack based on the attribute information of the target component under the second technology stack, and presenting the first node object on a development interface so as to allow an application developer to perform editing operation based on the first node object.

Optionally, the generating, based on the attribute information of the target component under the second technology stack, an embodiment of a first node object recognizable by the first technology stack includes: and analyzing the target component into a container, characters or pictures as a first node object which can be identified by the first technology stack based on the attribute information of the target component in the second technology stack. For example, the attribute information of the target component under the second technology stack includes: name, layout and size information of the target component, if the attribute information of the component includes: name: container and layout: center, size of page view: 300x500, if the attribute information points to a container component, an icon corresponding to the container may be displayed in a side bar of the page, and the icon is used as a first node object corresponding to the container component, so that an application developer can edit the icon.

In this embodiment, an implementation of generating the front-end code of the target application based on the intermediate state syntax format in response to the editing operation on the first node object is not limited. The following description will be made in each case.

In an optional embodiment, when the number of node objects required for generating the front-end code of the target application is 1, and when the first node object is edited, the attribute information of the first node object may be obtained in response to the editing operation on the first node object, and according to the attribute information of the first node object, an intermediate state syntax tree is generated as the front-end code of the target application, and the node and the attribute information thereof on the intermediate state syntax tree respectively represent the first node object and the attribute information thereof.

In another optional embodiment, in a case that the number of node objects required for generating the front-end code of the target application is multiple, the node objects required for generating the front-end code of the target application include a first node object and a second node object having a hierarchical relationship with the first node object, and for convenience of differentiation and description, the node objects required for generating the front-end code of the target application are denoted as third node objects, that is, the third node objects include the first node object and the second node object, the number of the second node objects is one or more, the attribute information of the third node object indicates the attribute information of its corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object indicates the hierarchical relationship between its corresponding target component and the second technology stack. Under the condition that the first node object is edited, the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object can be obtained in response to the editing operation of the first node object; generating an intermediate state syntax tree as a front-end code of a target application according to the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes on the intermediate state syntax tree and the attribute information thereof respectively represent a third node object and the attribute information thereof, and the attribute information of the third node object at least comprises the identification and the style of the third node object, and in addition, the attribute information of the third node object also comprises: position information, size information, and the like.

It should be noted that, in the process of generating the intermediate state syntax tree, in addition to the description file of the target component, the application development system also needs the description file of the rendering engine corresponding to the target component, and the rendering engine can identify the intermediate state syntax tree and perform rendering based on the intermediate state syntax tree to obtain the front end view.

In this embodiment, the front end view, that is, a User Interface (UI) layout, is parsed and rendered in a tree form, so that in this embodiment, the front end view is described by using an intermediate syntax tree, and a front end code of a target application is obtained. The nodes in the intermediate state syntax tree need to conform to the characteristics of the UI nodes, and have extensibility, for example, the modules used by the nodes of the intermediate state syntax tree, the styles of the nodes, the relationships of the parent and child nodes, the attributes of the corresponding components of the nodes, and the like conform to the characteristics of the corresponding UI nodes. Preferably, the intermediate syntax tree can be described in a lightweight data exchange format such as Object Notation (JSON). As shown in fig. 2b, the information describes the intermediate state syntax tree in JSON format, where the names, unique identifiers, styles, layout descriptions, and node relationships of the nodes in the intermediate state syntax tree are described. The name of the View (View) component is "View", the unique identifier (id) is "1", and the style and layout description (style) comprises: display (display) is "flexible", horizontal axis alignment (just content) is center (center), child nodes of View (View) components are pictures, the names of the pictures are "Image", and the unique identifiers are: "2", the properties (tips) of the components include: the network address (url) is a picture address (image url).

The content in fig. 2b includes:

in this embodiment, the description file of the target component may embody attribute information of the target component, and fig. 2c is an exemplary illustration of the conversion of the description file of the target component into a node on the intermediate state syntax tree. In fig. 2c, the attribute information of the target component can be referred to the description of fig. 2a, and the nodes in the intermediate state syntax tree mainly include: name (name): "Image", type (type): "Common", unique identification (id): "uuid", style (style), attributes (tips): width (width): "100%", source address (src): "url" and event (event).

In an optional embodiment, an implementation manner of obtaining attribute information of a first node object and a hierarchical relationship between the first node object and a second node object in response to an editing operation on the first node object includes: under the condition that an application developer carries out editing operation on the attribute information of the first node object, the attribute information of the first node object can be obtained in response to the input operation on the first node object, and the hierarchical relationship between the first node object and the second node object is maintained; or under the condition that the application developer carries out editing operation on the hierarchical relationship of the first node object, determining the hierarchical information of the first node object in response to the dragging operation on the first node object, and establishing the hierarchical relationship between the first node object and the second node object; or under the condition that the application developer carries out editing operation on the attribute information and the hierarchical relationship of the first node object, responding to the modification operation on the first node object, acquiring the attribute information and the hierarchical information of the first node object, and establishing the hierarchical relationship between the first node object and the second node object.

The modification operation on the first node object is not limited. For example, in response to an editing operation on the first node object, at least one attribute item and a corresponding initial attribute value of the first node object are acquired, and the at least one attribute item and the corresponding initial attribute value are displayed through a floating layer, a pop-up box, a rolling box or the like; and responding to the editing operation of the initial attribute value corresponding to any attribute item, and acquiring target attribute information corresponding to any attribute item, wherein each attribute item is one of whether a component, hierarchy information, length, width, color or display position is associated.

In an optional embodiment, the application development platform accesses at least one second technology stack, generates front-end codes corresponding to the target application through different second technology stacks, can generate one or more front-end codes based on the same second technology stack, and can generate different front-end codes by different second technology stacks; the front-end codes of the target application correspond to at least two different second technology stacks or the front-end codes of the target application correspond to the same second technology stack, in case the number of front-end codes corresponding to the target application is greater than or equal to two. In the case where the number of front-end codes of the target application is one, the front-end codes correspond to one second technology stack. The second technology stack may be implemented as: progressive frame Vue or JavaScript library fact. As shown in fig. 3a and fig. 3b, with the number of the second technology stacks being 2, the two second technology stacks are: the examples of WEB-Vue and WEB-React are shown by way of illustration, but not by way of limitation.

After generating at least one front-end code corresponding to the target application, encapsulating the at least one front-end code and the back-end code to obtain an installation code of the target application developed across the technology stack; and installing and running the target application according to the installation code of the target application. For example, if the installation code of the target application is implemented as a plug-in of a browser, the installation code of the target application may be imported into the browser, and the target application may be installed and run in the browser. For another example, the target application is implemented as an application program of the terminal device, and the target application may be installed and executed on the terminal device based on the installation code.

And for a target front-end code in the at least one front-end code, loading a target assembly required by rendering the target front-end code when the target front-end code is run, and rendering a front-end view for the target front-end code for the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

Fig. 3c is a front end view obtained by rendering the intermediate syntax tree generated by the application development platform by using an Vue-based rendering engine and a reach-based rendering engine respectively. The intermediate state syntax tree generated by the application development platform is a container, a picture and a character with a hierarchical relationship, the rendering engine of Vue or the rendering engine of reach is used for recursion of front end nodes in the intermediate state syntax tree, Document Object Model (DOM) nodes of the front ends are generated, the DOM nodes are rendered, an HTML5(H5) page is obtained, and the page is displayed on the terminal equipment.

Optionally, the loading of the target component required for rendering the target front-end code comprises: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

Optionally, rendering an implementation of rendering a front-end view for the target front-end code for the target component using a rendering engine of a target technology stack corresponding to the target front-end code includes: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into description information of a plurality of target components which can be identified by a target technology stack, wherein the description information of the target components can embody the attribute information of the target components under the target technology stack; converting the hierarchical relationship among the third node objects into page layout information corresponding to the target components, wherein the page layout information can embody which components are on the page and information of the style, layout, logic, behavior and the like of the components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

In this embodiment, in the case of generating a front-end code corresponding to a target application, a target component is not imported into an application development platform, but a description file of the target component is imported into the application development platform, so that decoupling of the application development platform and a front-end component library of a second technology stack can be realized, and an application development worker does not need to generate an application development platform for each component library in a decoupling design, that is, different front-end component libraries can be accessed to one application development platform, so that cost is saved, intrusion of the second technology stack to an existing application development platform can be prevented, and safety of the target application is guaranteed. Meanwhile, based on the decoupling design, the second technology stack can be dynamically switched in the process of generating the target application, so that front-end codes corresponding to different second technology stacks can be obtained. Further, since the front-end component library of the second technology stack is already decoupled from the application development system, the front-end component library may not exist during the initialization or use process of the application development platform, and the corresponding components may be loaded when needed, for example, during the rendering process of the syntax tree in the intermediate state, the required components are loaded to implement the rendering operation of the syntax tree in the intermediate state, and the combination of editing and previewing is implemented.

Fig. 4 is a flowchart illustrating a page rendering method for a cross-stack application according to an exemplary embodiment of the present application, where the method is applied to an electronic device, where a target application is installed on the electronic device, and the target application is developed based on a first technology stack and at least one second technology stack, as shown in fig. 4, the method includes:

401. running a target application, wherein the target application comprises at least one front-end code and a back-end code, the back-end code is developed based on a first technology stack, the back-end code describes back-end logic of the target application, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack under the condition that the number of the at least one front-end code is greater than or equal to two, and the target front-end code in the at least one front-end code describes identification, style and layout information of a target component, which is depended by the target application for a front-end view of the target front-end code;

402. when the target front-end code is run, loading a target assembly required by the rendering of the target front-end code, and rendering a front-end view aiming at the target front-end code aiming at the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

In an alternative embodiment, loading target components required to render target front-end code includes: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

In an optional embodiment, rendering a front end view for the target front end code for the target component using a rendering engine of a target technology stack corresponding to the target front end code includes: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into the description information of the plurality of target components which can be identified by the target technology stack; converting the hierarchical relationship among the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

It should be noted that, the executing subjects of the steps of the method provided in the foregoing embodiments may be the same device, or different devices may also be used as the executing subjects of the method. For example, the execution subjects of steps 101 to 103 may be device a; for another example, the execution subject of steps 101 and 102 may be device a, and the execution subject of step 103 may be device B; and so on.

In addition, in some of the flows described in the above embodiments and the drawings, a plurality of operations are included in a specific order, but it should be clearly understood that the operations may be executed out of the order presented herein or in parallel, and the sequence numbers of the operations, such as 101, 102, etc., are merely used for distinguishing different operations, and the sequence numbers do not represent any execution order per se. Additionally, the flows may include more or fewer operations, and the operations may be performed sequentially or in parallel. It should be noted that, the descriptions of "first", "second", etc. in this document are used for distinguishing different messages, devices, modules, etc., and do not represent a sequential order, nor limit the types of "first" and "second" to be different.

Fig. 5a is a schematic structural diagram of a cross-stack application processing apparatus according to an exemplary embodiment of the present application, and as shown in fig. 5a, the cross-stack application processing apparatus includes: an import module 51a, a presentation module 52a, and a generation module 53 a.

The import module 51a is configured to import a description file of the target component, where the description file has an intermediate syntax format recognizable by both a first technology stack and a second technology stack, the first technology stack is used to develop a backend code of the target application, the backend code describes a backend logic of the target application, and a front end view of the target application depends on the target component in a front end component library of the second technology stack;

the presentation module 52a is configured to present, on the basis of the description file of the target component, a first node object corresponding to the target component on the development interface, where the first node object may represent attribute information of the target component;

and the generating module 53a is used for responding to the editing operation of the first node object, and generating the front-end code of the target application based on the intermediate state syntax format, wherein the front-end code describes the identification, style and layout information of the target component on which the front-end view of the target application depends.

In an optional embodiment, the cross-stack application processing apparatus further comprises: describing the module; and the description module is used for describing the target component in the front-end component library of the second technology stack by using the intermediate state syntax format so as to obtain a description file of the target component.

In an optional embodiment, the presenting module 52a is specifically configured to: analyzing the description file of the target component based on the intermediate state syntactic format to obtain attribute information of the target component under a second technical stack; and generating a first node object which can be identified by the first technology stack based on the attribute information of the target component under the second technology stack, and presenting the first node object on a development interface so as to allow an application developer to perform editing operation based on the first node object.

In an optional embodiment, the generating module 53a is specifically configured to: responding to the editing operation of the first node object, and acquiring attribute information of the first node object and a hierarchical relationship between the first node object and a second node object, wherein the second node object is other node objects except the first node object in a third node object required by generating a front-end code; generating an intermediate state syntax tree as a front-end code according to the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes and the attribute information thereof on the intermediate state syntax tree respectively represent the third node object and the attribute information thereof, and the attribute information of the third node object at least comprises the identification and the style of the third node object; the attribute information of the third node object represents the attribute information of the corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between the corresponding target component and the second technology stack.

In an optional embodiment, the generating module 53a is specifically configured to: responding to input operation of the first node object, acquiring attribute information of the first node object, and maintaining a hierarchical relationship between the first node object and the second node object; or responding to the dragging operation of the first node object, determining the hierarchy information of the first node object, and establishing the hierarchy relationship between the first node object and the second node object; or responding to the modification operation of the first node object, acquiring the attribute information of the first node object and the hierarchy information of the first node object, and establishing the hierarchy relationship between the first node object and the second node object.

In an optional embodiment, the presenting module 52a is specifically configured to: and analyzing the target component into a container, characters or pictures as a first node object which can be identified by the first technology stack based on the attribute information of the target component in the second technology stack.

In an optional embodiment, the cross-stack application processing apparatus further comprises: the device comprises a packaging module, a processing module and a loading module; the packaging module is used for packaging at least one front-end code and at least one back-end code to obtain an installation code of a target application developed across technology stacks; in the case that the number of the at least one front end code is greater than or equal to two, the at least one front end code corresponds to at least two different second technology stacks or the same second technology stack; the processing module is used for installing and running the target application according to the installation code of the target application; the loading module is used for loading target components required by rendering the target front-end codes when the target front-end codes are run to the target front-end codes in the at least one front-end codes; and the processing module is also used for rendering the front end view aiming at the target front end code aiming at the target component by utilizing the rendering engine of the target technology stack corresponding to the target front end code.

In an optional embodiment, the loading module is specifically configured to: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

In an optional embodiment, the processing module is specifically configured to: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into description information of a plurality of target components which can be identified by a target technology stack; converting the hierarchical relationship among the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

In an alternative embodiment, the second technology stack includes a progressive frame Vue or JavaScript library React.

Fig. 5b is a schematic structural diagram of a page rendering apparatus for a cross-stack application according to an exemplary embodiment of the present application, where a target application is installed on the page rendering apparatus for the cross-stack application, the target application is developed based on a first technology stack and at least one second technology stack, and the page rendering apparatus for the cross-stack application includes: a running module 51b, a loading module 52b and a processing module 53 b.

The running module 51b is used for running a target application, the target application comprises at least one front-end code and a back-end code, the back-end code is developed based on a first technology stack, the back-end code describes back-end logic of the target application, when the number of the at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack, and the target front-end code in the at least one front-end code describes identification, style and layout information of a target component, which is depended by the target application for a front-end view of the target front-end code;

a loading module 52b, configured to load a target component required for rendering the target front-end code when the target front-end code is run;

and the processing module 53b is configured to render a front end view for the target front end code for the target component by using a rendering engine of the target technology stack corresponding to the target front end code.

In an optional embodiment, the loading module 52b is specifically configured to: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

In an optional embodiment, the processing module 53b is specifically configured to: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into the description information of the plurality of target components which can be identified by the target technology stack; converting the hierarchical relationship among the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

Fig. 6 is a schematic structural diagram of a cross-stack application processing device according to an exemplary embodiment of the present application. As shown in fig. 6, the apparatus includes: a memory 64 and a processor 65.

Memory 64 for storing computer programs and may be configured to store other various data to support operations on the cross-stack application processing device. Examples of such data include instructions for any application or method operating on a cross-stack application processing device.

The memory 64 may be implemented by any type or combination of volatile or non-volatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.

A processor 65, coupled to the memory 64, for executing computer programs in the memory 64 for: importing a description file of the target assembly, wherein the description file has a middle state syntax format which can be recognized by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front end view of the target application depends on the target assembly in a front-end assembly library of the second technology stack; based on the description file of the target component, presenting a first node object corresponding to the target component on a development interface, wherein the first node object can embody the attribute information of the target component; and generating front-end code of the target application based on the intermediate state syntax format in response to the editing operation on the first node object, wherein the front-end code describes the identification, style and layout information of the target component on which the front-end view of the target application depends.

In an alternative embodiment, prior to importing the description file of the target component, processor 65 is further configured to: and describing the target component by using a middle state syntax format aiming at the target component in the front-end component library of the second technology stack to obtain a description file of the target component.

In an optional embodiment, when the first node object corresponding to the target component is presented on the development interface based on the description file of the target component, the processor 65 is specifically configured to: analyzing the description file of the target component based on the intermediate state syntactic format to obtain attribute information of the target component under a second technical stack; and generating a first node object which can be identified by the first technology stack based on the attribute information of the target component under the second technology stack, and presenting the first node object on a development interface so as to allow an application developer to perform editing operation based on the first node object.

In an alternative embodiment, when generating the front-end code of the target application based on the intermediate state syntax format in response to the editing operation on the first node object, the processor 65 is specifically configured to: responding to the editing operation of the first node object, and acquiring attribute information of the first node object and a hierarchical relationship between the first node object and a second node object, wherein the second node object is other node objects except the first node object in a third node object required by generating a front-end code; generating an intermediate state syntax tree as a front-end code according to the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes and the attribute information thereof on the intermediate state syntax tree respectively represent the third node object and the attribute information thereof, and the attribute information of the third node object at least comprises the identification and the style of the third node object; the attribute information of the third node object represents the attribute information of the corresponding target component under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between the corresponding target component and the second technology stack.

In an optional embodiment, when, in response to the editing operation on the first node object, acquiring the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, the processor 65 is specifically configured to: responding to input operation of the first node object, acquiring attribute information of the first node object, and maintaining a hierarchical relationship between the first node object and the second node object; or responding to the dragging operation of the first node object, determining the hierarchy information of the first node object, and establishing the hierarchy relationship between the first node object and the second node object; or responding to the modification operation of the first node object, acquiring the attribute information of the first node object and the hierarchy information of the first node object, and establishing the hierarchy relationship between the first node object and the second node object.

In an optional embodiment, when generating the first node object recognizable by the first technology stack based on the attribute information of the target component under the second technology stack, the processor 65 is specifically configured to: and analyzing the target component into a container, characters or pictures as a first node object which can be identified by the first technology stack based on the attribute information of the target component in the second technology stack.

In an alternative embodiment, the processor 65 is further configured to: packaging at least one front-end code and a back-end code to obtain an installation code of a target application developed across a technology stack; in the case that the number of the at least one front end code is greater than or equal to two, the at least one front end code corresponds to at least two different second technology stacks or the same second technology stack; installing and running the target application according to the installation code of the target application; and for a target front-end code in the at least one front-end code, loading a target assembly required by rendering the target front-end code when the target front-end code is run, and rendering a front-end view for the target front-end code for the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

In an alternative embodiment, the processor 65, when loading the target component required for rendering the target front-end code, is specifically configured to: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

In an optional embodiment, when rendering the front end view for the target front end code for the target component by using the rendering engine of the target technology stack corresponding to the target front end code, the processor 65 is specifically configured to: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into the description information of the plurality of target components which can be identified by the target technology stack; converting the hierarchical relationship between the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

In an alternative embodiment, the second technology stack includes a progressive frame Vue or a JavaScript library React.

Further, as shown in fig. 6, the cross-stack application processing device further includes: communication components 66, display 67, power components 68, audio components 69, and the like. Only some of the components are schematically shown in fig. 6, and it is not meant that the cross-stack application processing apparatus includes only the components shown in fig. 6. It should be noted that the components within the dashed box in fig. 6 are optional components, not necessary components, and may be determined according to the product form of the cross-stack application processing device.

Fig. 7 is a schematic structural diagram of a page rendering device for a cross-stack application according to an exemplary embodiment of the present application, where a target application is installed on the page rendering device for the cross-stack application, and the target application is developed based on a first technology stack and at least one second technology stack, as shown in fig. 7, the device includes: a memory 74 and a processor 75.

Memory 74 for storing computer programs and may be configured to store other various data to support operations on the cross-stack application processing device. Examples of such data include instructions for any application or method operating on a cross-stack application processing device.

The memory 74 may be implemented by any type or combination of volatile or non-volatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.

A processor 75, coupled to the memory 74, for executing computer programs in the memory 74 for: running a target application, wherein the target application comprises at least one front-end code and a back-end code, the back-end code is developed based on a first technology stack, the back-end code describes back-end logic of the target application, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack under the condition that the number of the at least one front-end code is greater than or equal to two, and the target front-end code in the at least one front-end code describes identification, style and layout information of a target component, which is depended by the target application for a front-end view of the target front-end code; when the target front-end code is run, loading a target assembly required by the rendering of the target front-end code, and rendering a front-end view aiming at the target front-end code aiming at the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

In an alternative embodiment, the processor 75, when loading the target component required for rendering the target front-end code, is specifically configured to: acquiring a description file of a target assembly required by a target front-end code; dynamically loading target components required by the target front-end code based on the description file; alternatively, the target components needed by the target front-end code are loaded directly from the front-end component library of the target technology stack.

In an optional embodiment, when rendering the front end view for the target front end code for the target component by using the rendering engine of the target technology stack corresponding to the target front end code, the processor 75 is specifically configured to: identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into the description information of the plurality of target components which can be identified by the target technology stack; converting the hierarchical relationship among the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

Further, as shown in fig. 7, the page rendering apparatus for a cross-stack application further includes: communication components 76, display 77, power components 78, audio components 79, and the like. Only some of the components are schematically shown in fig. 7, and it is not meant that the page rendering apparatus for the cross-stack application includes only the components shown in fig. 7. It should be noted that the components within the dashed box in fig. 7 are optional components, not necessary components, and may be determined according to the product form of the page rendering device of the cross-stack application.

Accordingly, the present application also provides a computer readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement the steps of the method shown in fig. 1 and/or fig. 4 provided by the present application.

The communication components of fig. 6 and 7 described above are configured to facilitate communication between the device in which the communication component is located and other devices in a wired or wireless manner. The device where the communication component is located can access a wireless network based on a communication standard, such as a WiFi, a 2G, 3G, 4G/LTE, 5G and other mobile communication networks, or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, the communication component further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

The displays in fig. 6 and 7 described above include screens, which may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive an input signal from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

The power supply components of fig. 6 and 7 described above provide power to the various components of the device in which the power supply components are located. The power components may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device in which the power component is located.

The audio components of fig. 6 and 7 described above may be configured to output and/or input audio signals. For example, the audio component includes a Microphone (MIC) configured to receive an external audio signal when the device in which the audio component is located is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signal may further be stored in a memory or transmitted via a communication component. In some embodiments, the audio assembly further comprises a speaker for outputting audio signals.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A cross-stack application processing method is applied to an application development platform, and comprises the following steps:

importing a description file of a target component, wherein the description file has a middle state syntax format recognizable by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front-end view of the target application depends on the target component in a front-end component library of the second technology stack;

based on the description file of the target component, presenting a first node object corresponding to the target component on a development interface, wherein the first node object can embody the attribute information of the target component;

generating, in response to the editing operation on the first node object, front-end code of the target application based on the intermediate state syntax format, the front-end code describing identification, style, and layout information of target components on which a front-end view of the target application depends.

2. The method of claim 1, wherein before importing the description file of the target component, further comprising:

and aiming at the target component in the front-end component library of the second technology stack, describing the target component by using the intermediate state syntax format to obtain a description file of the target component.

3. The method of claim 1, wherein presenting the first node object corresponding to the target component on a development interface based on the description file of the target component comprises:

analyzing the description file of the target component based on the intermediate state syntax format to obtain attribute information of the target component under the second technical stack;

and generating a first node object which can be identified by the first technology stack based on the attribute information of the target component under the second technology stack, and presenting the first node object on the development interface so as to allow an application developer to perform editing operation based on the first node object.

4. The method of claim 3, wherein generating the first node object recognizable by the first technology stack based on the attribute information of the target component under the second technology stack comprises:

and analyzing the target component into a container, a character or a picture based on the attribute information of the target component under the second technology stack, and taking the container, the character or the picture as a first node object which can be identified by the first technology stack.

5. The method of claim 3, wherein generating front-end code for the target application based on the intermediate state syntax format in response to the editing operation on the first node object comprises:

responding to the editing operation of the first node object, and acquiring attribute information of the first node object and a hierarchical relationship between the first node object and a second node object, wherein the second node object is other node objects except the first node object in a third node object required for generating the front-end code;

generating an intermediate state syntax tree as the front-end code according to the attribute information of the first node object and the hierarchical relationship between the first node object and the second node object, wherein the nodes and the attribute information thereof on the intermediate state syntax tree respectively represent the third node object and the attribute information thereof, and the attribute information of the third node object at least comprises the identification and the style of the third node object;

the attribute information of the third node object represents the attribute information of the target component corresponding to the third node object under the second technology stack, and the hierarchical relationship between the first node object and the second node object represents the hierarchical relationship between the target component corresponding to the third node object and the second technology stack.

6. The method according to claim 5, wherein obtaining attribute information of the first node object and a hierarchical relationship between the first node object and a second node object in response to an editing operation on the first node object comprises:

responding to input operation of the first node object, acquiring attribute information of the first node object, and maintaining a hierarchical relationship between the first node object and a second node object; or

In response to the dragging operation of the first node object, determining the hierarchy information of the first node object, and establishing a hierarchy relationship between the first node object and a second node object; or

And responding to the modification operation of the first node object, acquiring the attribute information of the first node object and the hierarchy information of the first node object, and establishing a hierarchy relationship between the first node object and a second node object.

7. The method of claim 5, further comprising:

packaging at least one front-end code and the back-end code to obtain an installation code of the target application developed across technology stacks; in a case that the number of the at least one front end code is greater than or equal to two, the at least one front end code corresponds to at least two different second technology stacks or a same second technology stack;

installing and running the target application according to the installation code of the target application; and

and for a target front-end code in at least one front-end code, loading a target assembly required for rendering the target front-end code when the target front-end code is run to the target front-end code, and rendering a front-end view for the target front-end code for the target assembly by using a rendering engine of a target technology stack corresponding to the target front-end code.

8. The method of claim 7, wherein loading target components needed to render the target front-end code comprises:

acquiring a description file of a target assembly required by the target front-end code;

dynamically loading target components required by the target front-end code based on the description file; or directly loading the target component required by the target front-end code from a front-end component library of the target technology stack.

9. The method of claim 7, wherein rendering a front-end view for the target front-end code for the target component with a rendering engine of a target technology stack corresponding to the target front-end code comprises:

identifying attribute information of a plurality of third node objects included in the intermediate state syntax tree and a hierarchical relationship between the plurality of third node objects in a case where the target front-end code is implemented as the intermediate state syntax tree; converting the attribute information of the plurality of third node objects into description information of a plurality of target components which can be identified by the target technology stack; converting the hierarchical relationship among the plurality of third node objects into page layout information corresponding to the plurality of target components; and according to the page layout information and the description information of the target components, performing page rendering by using the target components to obtain a front end view of the target front end code.

10. The method of any of claims 1-9, wherein the second technology stack comprises progressive skeleton Vue or JavaScript library fact.

11. A page rendering method of cross-stack application is applied to an electronic device, a target application is installed on the electronic device, and the target application is developed based on a first technology stack and at least one second technology stack, and the method comprises the following steps:

running the target application, the target application comprising at least one front-end code and a back-end code, the back-end code being developed based on the first technology stack, the back-end code describing back-end logic of the target application, the at least one front-end code corresponding to at least two different second technology stacks or a same second technology stack in the case that the number of the at least one front-end code is greater than or equal to two, a target front-end code of the at least one front-end code describing identification, style, and layout information of a target component on which a front-end view of the target front-end code depends by the target application;

when the target front-end code is run, loading a target assembly required by rendering the target front-end code, and rendering a front-end view for the target front-end code by using a rendering engine of a target technology stack corresponding to the target front-end code for the target assembly.

12. The method of claim 11, wherein loading target components needed to render the target front-end code comprises:

13. The method of claim 11, wherein rendering a front end view for the target front end code for the target component with a rendering engine of a target technology stack to which the target front end code corresponds comprises:

14. A cross-stack application processing apparatus, comprising: the device comprises an importing module, a presenting module and a generating module;

the import module is used for importing a description file of a target assembly, the description file has a middle state syntax format which can be recognized by a first technology stack and a second technology stack, the first technology stack is used for developing a back-end code of the target application, the back-end code describes back-end logic of the target application, and a front end view of the target application depends on the target assembly in a front-end assembly library of the second technology stack;

the presentation module is used for presenting a first node object corresponding to the target component on a development interface based on the description file of the target component, wherein the first node object can embody the attribute information of the target component;

and the generating module is used for responding to the editing operation of the first node object and generating the front-end code of the target application based on the intermediate state syntax format, wherein the front-end code describes the identification, the style and the layout information of the target component on which the front-end view of the target application depends.

15. A page rendering apparatus for a cross-stack application, wherein a target application is installed on the page rendering apparatus for the cross-stack application, the target application being developed based on a first technology stack and at least one second technology stack, and the page rendering apparatus for the cross-stack application comprises: the device comprises an operation module, a loading module and a processing module;

the running module is configured to run the target application, where the target application includes at least one front-end code and a back-end code, the back-end code is developed based on the first technology stack, the back-end code describes back-end logic of the target application, where the number of the at least one front-end code is greater than or equal to two, the at least one front-end code corresponds to at least two different second technology stacks or the same second technology stack, and a target front-end code in the at least one front-end code describes identification, style, and layout information of a target component on which a front-end view of the target front-end code depends on the target application;

the loading module is used for loading target components required for rendering the target front-end codes when the target front-end codes are run; the processing module is used for rendering a front end view aiming at the target front end code aiming at the target assembly by utilizing a rendering engine of a target technology stack corresponding to the target front end code.

16. A cross-stack application processing device, comprising: a memory and a processor; the memory for storing a computer program; the processor, coupled to the memory, is configured to execute the computer program to implement the steps of the method of any of claims 1-10.

17. A page rendering device of a cross-stack application is characterized in that a target application is installed on the page rendering device of the cross-stack application, the target application is developed based on a first technology stack and at least one second technology stack, and the page rendering device of the cross-stack application comprises: a memory and a processor; the memory for storing a computer program; the processor, coupled to the memory, is configured to execute the computer program to implement the steps of the method of any of claims 11-13.

18. A computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, causes the processor to carry out the steps of the method according to any one of claims 1 to 13.