CN113031932B

CN113031932B - Project development method, apparatus, electronic device and storage medium

Info

Publication number: CN113031932B
Application number: CN202110265748.4A
Authority: CN
Inventors: 陶宏晖; 梁沁; 曾庆宇; 但超
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2021-03-11
Filing date: 2021-03-11
Publication date: 2023-10-20
Anticipated expiration: 2041-03-11
Also published as: CN113031932A

Abstract

The embodiment of the application provides a project development method, a project development device, electronic equipment and a storage medium, relates to the technical field of software architecture, and can be used for various scenes such as webpage development, program development and the like. The method comprises the following steps: acquiring a front-end component of a current development platform for constructing a user interface, and loading a compiling plug-in the front-end component; compiling the front-end component based on the compiling plug-in unit to generate a compiling result file; and loading the compiling result file under the target development platform to generate the target component. The implementation of the scheme of the application can effectively improve the platform collapse performance of technical development and reduce the cost of repeated development of components.

Description

Project development method, apparatus, electronic device and storage medium

Technical Field

The application relates to the technical field of software architecture, in particular to a project development method, a project development device, electronic equipment and a storage medium.

Background

In the front-end building process of the project development system, since the front-end page structure is generally complex, a developer needs to write a large amount of code to complete the project development. As development technologies develop and user experience demands rise, user interfaces expressed by the same front-end component generally need to be applied to at least two development platforms. In the prior art, aiming at the problem, the development of the front-end component is generally completed by redevelopment of the components aiming at the framework of the new development platform, namely, the development is realized by repeated development, and the development cost is increased and the later maintenance cost is increased due to repeated development.

Disclosure of Invention

The technical scheme provided by the application aims to at least solve one of the technical defects, in particular to the technical defect of high repeated development cost. The technical scheme is as follows:

in a first aspect of the present application, there is provided a project development method comprising:

acquiring a front-end component of a current development platform for constructing a user interface, and loading a compiling plug-in the front-end component;

compiling the front-end component based on the compiling plug-in unit to generate a compiling result file;

and loading the compiling result file under the target development platform to generate the target component.

In one embodiment, the front-end components employ the Vue isomorphism standard; the compiling plug-in includes at least one of a first plug-in for compiling the front end framework and a second plug-in for compiling the language.

In an embodiment, the front-end component is compiled based on a compilation plug-in to generate a compilation result file comprising at least one of:

compiling the front-end component by adopting a script code generation mode of the first plug-in to generate a first compiling result file for dynamic execution;

and compiling the front-end component by adopting a static code generation mode of the first plug-in to generate a second compiling result file for secondary compiling.

In yet another embodiment, compiling the front-end component using the script code generation mode of the first plug-in to generate a first compiling result file for dynamic execution, includes:

compiling the front-end component and the dependent structure thereof by adopting a script code generation mode of the first plug-in to generate hypertext markup language (HTML), cascading Style Sheets (CSS) and programming language (JS) files;

compiling the JS file by adopting a second plug-in to generate a JSON file containing an abstract syntax tree;

and packaging the HTML file, the CSS file and the JSON file into a first compiling result file.

In one embodiment, loading a compilation result file under a target development platform to generate a target component includes:

and analyzing the first compiling result file by adopting a logic executor introduced in the target development platform to generate a target component running in the target development platform.

In yet another embodiment, parsing the first compilation result file with a logic executor introduced in the target development platform to generate a target component running in the target development platform includes:

traversing a DOM structure corresponding to the HTML file to generate a first tree structure file;

analyzing the CSS file, determining a style corresponding to each node of the tree structure, and updating the first tree structure file based on the style;

And analyzing the JSON file, and generating a target component running in the target development platform by combining the first tree structure file.

In one embodiment, parsing the JSON file and generating a target component running in the target development platform in combination with the first tree structure file includes:

analyzing and operating an expression based on the abstract syntax tree in the JSON file by adopting a container for dynamically operating the abstract syntax tree in a logic executor, and generating a target component operated in a target development platform by combining a first tree structure file;

the variables involved in the analysis and the operation processes are operated in a push variable stack mode.

In an embodiment, compiling the front-end component using the static code generation mode of the first plug-in to generate a second compiling result file for secondary compiling, including:

compiling the front-end component and the dependent structure thereof by adopting a static code generation mode of the first plug-in to generate HTML, CSS and JS files;

compiling the HTML, CSS and JS files by adopting a second plug-in unit to generate a program code of the target development platform;

and packing the program code of the target development platform into a second compiling result file.

In an embodiment, compiling the HTML, CSS and JS files with the second plugin to generate the program code of the target development platform, including:

performing code mapping processing on the HTML file and the CSS file by adopting a second plug-in unit to obtain a first program code;

the JS file is diverted by adopting a second plug-in unit, so that a second program code is obtained;

and merging the first program code and the second degree code to obtain the program code of the target development platform.

In a second aspect of the present application, there is provided a project development apparatus comprising:

the loading module is used for acquiring a front-end component of the current development platform for constructing a user interface and loading a compiling plug-in the front-end component;

the compiling module is used for compiling the front-end assembly based on the compiling plug-in unit to generate a compiling result file;

and the generating module is used for loading the compiling result file under the target development platform to generate the target component.

In a third aspect of the present application, there is provided an electronic device including:

one or more processors;

a memory;

one or more computer programs, wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to: the method provided in the first aspect is performed.

In a fourth aspect of the application, there is provided a computer readable storage medium for storing computer instructions which, when run on a computer, cause the computer to perform the method provided in the first aspect.

The technical scheme provided by the application has the beneficial effects that:

according to the application, the compiling plug-in is loaded in the front-end component for constructing the user interface in the current development platform, after the compiling plug-in is used for compiling the front-end component to generate the compiling result file, the compiling result file is loaded under another target development platform to generate the target component running on the target development platform, the problem of development of the front-end component collapsing the platform in the prior art is solved through the compiling layer, the multiplexing of the front-end component is realized, the development efficiency is improved, and the development cost is reduced.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings that are required to be used in the description of the embodiments of the present application will be briefly described below.

FIG. 1 is a flowchart of a project development method according to an embodiment of the present application;

FIG. 2 is a schematic diagram of an application framework of a project development method according to an embodiment of the present application;

FIG. 3 is a schematic diagram of compiling and running time in a project development method according to an embodiment of the present application;

FIG. 4 is a flowchart of compiling a front-end component based on a script code generation mode in an application project development method according to an embodiment of the present application;

FIG. 5 is a schematic diagram of a framework for compiling a front-end component based on a script code generation mode in a project development method according to an embodiment of the present application;

FIG. 6 is a flowchart of a process for a variable stack in a project development method according to an embodiment of the present application;

FIG. 7 is a flowchart of compiling a front-end component based on a static code generation mode in an application project development method according to an embodiment of the present application;

FIG. 8 is a schematic diagram of a framework for compiling a front-end component based on a static code generation mode in an application project development method according to an embodiment of the present application;

FIG. 9 is a schematic diagram illustrating the generation of a widget tree when compiling a front-end component based on a static code generation mode in an application project development method according to an embodiment of the present application;

fig. 10 is a schematic diagram illustrating a JS escape to Dart code in an application development method according to an embodiment of the present application;

FIG. 11 is a schematic structural diagram of a project development device according to an embodiment of the present application;

fig. 12 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

Embodiments of the present application are described in detail below, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to like or similar elements or elements having like or similar functions throughout. The embodiments described below by referring to the drawings are illustrative only and are not to be construed as limiting the application.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless expressly stated otherwise, as understood by those skilled in the art. It will be further understood that the terms "comprises" and/or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof. It will be understood that when an element is referred to as being "connected" or "coupled" to another element, it can be directly connected or coupled to the other element or intervening elements may also be present. Further, "connected" or "coupled" as used herein may include wirelessly connected or wirelessly coupled. The term "and/or" as used herein includes all or any element and all combination of one or more of the associated listed items.

For the purpose of making the objects, technical solutions and advantages of the present application more apparent, the embodiments of the present application will be described in further detail with reference to the accompanying drawings.

The technology and terms related to the present application are described below:

vue: the method is a set of progressive JavaScript frames for constructing a user interface, and is different from other weight-level frames in that Vue adopts a design of bottom-up incremental development; is a front-end development framework. The software name is Vue. Js, and the software language is JavaScript.

AST: abstract Syntax Tree, abstract syntax tree; a Syntax Tree (Syntax Tree) is an abstract representation of the Syntax structure of the source code, representing the Syntax structure of the programming language in the form of a Tree, each node on the Tree representing a structure in the source code. In the present application, an AST may be a tree-like data representation generated after parsing of a grammar by an interpreter (e.g., a plug-in for a compiled language).

HTML: hyper Text Markup Language, hypertext markup language, is a standard markup language for creating web pages. HTML includes a series of tags by which document formats on a network can be unified, enabling decentralized network resources to be connected as a logical entity. HTML text is descriptive text composed of HTML commands that can specify words, graphics, animations, sounds, tables, links, etc.

CSS: cascading Style Sheets, cascading style sheets, is a computer language used to represent file styles (fonts, spacing, colors, etc.) such as HTML (an application of standard universal markup language) or XML (a subset of standard universal markup language). The CSS not only can statically modify the web page, but also can dynamically format each element of the web page in cooperation with various scripting languages. CSS can accurately control pixel level typesetting of element positions in a webpage, support general font size and style, and has the capability of editing webpage objects and model styles.

JS: javaScript, a lightweight, interpreted or just-in-time compiled programming language with functional prioritization. JS is a dynamic scripting language based on prototype programming, multiple paradigms, supporting object-oriented support object-oriented programming, imperative programming, and functional programming.

Flutter: is a cross-platform (Android and iOS) mobile development framework, and uses the Dart language. The goal of Flutter is to create high performance, high stability, high frame rate, low latency Android and iOS applications, and applications developed based on Flutter have the same experience as native applications when used on different platforms.

JIT: just-in-time compi lation, just-in-time compilation, also known as dynamic translation or runtime compilation, is a method of executing computer code that involves compiling during program execution (at runtime) rather than before execution. Generally, programs have two modes of operation: static compilation and dynamic translation, where the static compiled program is all translated into machine code prior to execution, and dynamic translation performs translation while running. The just-in-time compiler can mix static compilation and dynamic translation, and after compiling the source code sentence by sentence, the translated code is cached to reduce the performance loss.

AOT: ahead Of Time, pre-compiled, also known as pre-run-Time, is a method Of executing computer code, which refers to compiling prior to program execution rather than during execution (at run-Time). Comparing JIT with AOT, it is appreciated that the JIT compiler compiles at run-time (run) applications, while the AOT compiler compiles at build-time (build) applications.

Script code generation mode: the product generated based on the schema compilation in the present application may be executed by a just-in-time compilation (JIT) machine.

Static code generation mode: the product generated based on the schema compilation in the present application may be executed by an AOT machine.

Dynamic operating environment: in the present application, the environment in which JIT can operate is referred to.

Dynamic execution: the nature of JIT is referred to in this disclosure.

Components (components) are a simple package of data and methods, which is the driving force for application development. In addition to serving as a modeling user interface design UI element, the component may also serve as a reusable modular unit that may be used in multiple projects.

Dart: a computer programming language can be used for development of web, server, mobile application, internet of things and the like. Dart is an object-oriented, class-defined, single-inherited language that can be translated into JS, support interfaces (interfaces), interfusion (mix), abstract classes (abstract classes), materialized generalizations (optional types), and sound type system.

As development technologies develop and user experience demands rise, user interfaces expressed by the same front-end component generally need to be applied to at least two development platforms. In the related art, in order to solve the problem, development of the front-end component is generally completed for the framework of the new development platform by re-developing the component. For example, the existing front-end isomorphism to Flutter schemes are all to select to re-develop a component, and may be rendered on the Flutter platform by writing Vue code, writing HTML/CSS/JS, writing Flutter code, and the like. The method is realized through repeated development, and the method increases development cost and later maintenance cost due to repeated development.

To solve at least one of the problems described above, the present application provides a project development method, apparatus, electronic device, and computer-readable storage medium; specifically, by means of the development capability of the application, the front end component of the existing development platform can be compiled to generate the target component which can run by the target development platform, the UI and the logic can be migrated to the target development platform, the development capability and the high performance can be good, the development efficiency can be improved, and the cost caused by repeated development can be reduced.

The following describes the technical scheme of the present application and how the technical scheme of the present application solves the above technical problems in detail with specific embodiments. The following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments. Embodiments of the present application will be described below with reference to the accompanying drawings.

In the embodiment of the present application, a project development method is provided, as shown in fig. 1, fig. 1 shows a flow chart of the project development method provided in the embodiment of the present application, where the method may be executed by any electronic device, for example, a user terminal, and the user terminal may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but the present application is not limited thereto. The method can be applied to the project development of various application programs, web pages and the like. Specifically, the method includes the following steps S101 to S103:

Step S101: the front-end component of the current development platform for constructing the user interface is obtained, and the compiling plug-in is loaded in the front-end component.

In particular, a development platform refers to a piece of software developed based on a certain programming language or several programming languages, and the piece of software is not necessarily a final software product, but may be a framework for secondary development of software, on which a user can perform various software products.

The User Interface (UI) refers to a man-machine interaction, operation logic, and an overall design of attractive Interface for software, and is a medium for interaction and information exchange between a system and a User, and can be used for realizing conversion between an internal form of information and a human acceptable form.

Wherein the component can extend the HTML elements, encapsulating the reusable code. And the front-end component is used to build the user interface.

Wherein a compilation plug-in is a program for translating one language into another.

Specifically, loading the compiling plugin in the front-end component may be understood as a process of introducing the compiling plugin in the front-end component, and a method of introducing the compiling plugin in the Vue component in the related art may be referred to, which is not described herein. The plug-in module is used for compiling the front-end module.

Optionally, the obtained front-end component may be a component that is running on the current development platform, that is, the implementation of the present application does not affect the running of the original front-end component, and the project development method provided by the embodiment of the present application may be executed under the condition that the original front-end component is running on the front end of the product.

Step S102: and compiling the front-end component based on the compiling plug-in to generate a compiling result file.

Specifically, the process of compiling a component can be understood as a process of performing language translation for a target development platform, and a product obtained by compiling is a compiling result file; aiming at different compiling modes, compiling the obtained product to adapt to different running environments; if the script code generation mode corresponds to JIT compiling, the compiling result is adapted to a dynamic running environment; and corresponding to the static code generation mode of the AOT compilation, and adapting the compiled product to the AOT environment, namely the non-dynamic running environment.

Step S103: and loading the compiling result file under the target development platform to generate the target component.

Specifically, a compiling result file (a product obtained by compiling) is migrated to a target development platform, so that components needing to be redeveloped in the prior art can be migrated through the method of the embodiment of the application, namely, a set of front-end components can be developed, and a multiplexing method (a project development method) provided by the embodiment of the application is adopted to obtain a component unified by double platforms or even multiple platforms, so that migration cost can be effectively reduced, and the applicability of the component is improved.

The project platform method provided by the embodiment of the application is exemplified by a front-end component isomorphic multiplexing value Flutter framework. The current development platform may correspond to the Vue framework, and the target development platform may correspond to the Flutter framework. The implementation of the application can solve the isomorphic problem of the front-end component, and the front-end only needs to adapt to the Vue engineering of isomorphic standard to develop a front-end component, and the compiling plug-in introduced in the front-end component can be combined with the embodiment of the application to efficiently migrate the compiling product to the Flutter platform. The embodiment of the application can smooth the difference of the double-end platform under the advantage of utilizing the Flutter platform, the performance suitability of the UI component developed by using the Flutter on the Android/iOS is highly consistent, and the development in the late stage of the Flutter can have good uniformity on more platforms (Web/Windows/Mac).

The specific process of compiling a front-end component based on a compilation plug-in is described below in connection with fig. 2 and 3.

Wherein, the front-end component adopts a Vue isomorphism standard. The compiling plug-in loaded in the front-end component comprises at least one of a first plug-in for compiling the front-end framework and a second plug-in for compiling the language.

Specifically, for the component multiplexing flow adapted to the project development method provided by the embodiment of the present application, the following architecture is defined: the method comprises the steps of introducing a first plug-in B of a front-end component for compiling a front-end framework, introducing a second plug-in C of the front-end component for compiling JS language, and introducing a runtime framework D (logic executor) of a Flutter platform; the first plug-in B corresponds to two operation modes, namely, a script code generation mode B1 (corresponding operation environment is a JIT environment, i.e., a dynamic operation environment) and a static code generation mode B2 (corresponding operation environment is an AOT environment, i.e., an undemanrable operation environment).

Wherein, because Flutter is developed based on AOT compiled language Dart, the largest difference with JS language is that JS is based on JIT compiled language; comparing JIT and AOT compilation modes, fluter does not have dynamic capabilities, and therefore, the architecture of embodiments of the present application includes the introduction of a runtime framework D (which may be introduced in the form of Fluter standard Module packages) on the Fluter platform. The runtime framework D is a runtime executor based on the AST, and by constructing a simulated class system, an environment for executing the AST while analyzing is obtained, and the environment can be used for analyzing and executing the description of the AST, so that the Flutter achieves the dynamic capability, and the certainty of the Flutter dynamic capability is compensated by introducing the runtime framework D. Therefore, the product generated in the script code generation mode B1 needs to be supported by the runtime framework D and has the running capability on the router platform; the product generated in the static code generation mode B2 can have the operation capability only by being in a standard router framework; in contrast, the product generated in the script code generation mode B1 needs to have invasiveness to the original engineering on the platform when the router runs, and the invasiveness to the original engineering on the platform when the product generated in the static code generation mode B2 runs is basically 0.

In one embodiment, the front-end component is compiled based on the compilation plug-in step S102 to generate a compilation result file, including at least one of the following steps A1-A2:

step A1: and compiling the front-end component by adopting a script code generation mode of the first plug-in to generate a first compiling result file for dynamic execution.

Specifically, the product (the first compiling result file) generated in the script code generating mode can be dynamically executed, and the mode has real-time performance and flexibility, so that the script code generating mode can be better applied to scenes which pay attention to timeliness (rapid iteration is needed).

The product (the first compiling result file) in the script code generating mode can be issued to the client in the form of an offline package and can be dynamically executed (without being compiled into an executable file in a terminal package, namely, the compiling of the just-in-time JIT) that is, can be updated in real time, and is not dependent on a terminal version, and the processing of the mode has a remarkable and efficient processing effect in the scene of emergency repair/disaster recovery processing.

Step A2: and compiling the front-end component by adopting a static code generation mode of the first plug-in to generate a second compiling result file for secondary compiling.

Specifically, the product (second compiling result file) generated in the static code generating mode is an executable file that needs to be compiled into binary, the mode has the characteristics of high performance and high customization, and compared with the first compiling result file obtained in the step A1, the second compiling result file has no characteristic of dynamic execution, but has higher performance, and can be considered to be applied to a scene focusing on interaction.

Optionally, the second compiling result file generated in the static code generation mode supports secondary development; if the quality of the second compiling result file generated at present is not ideal or is suitable for the used scene, the developer can directly edit the second compiling result file when wanting to adjust, and the time cost of redevelopment of the developer is saved to a certain extent.

In the embodiment of the application, as shown in the step A1 and the step A2, the two compiling modes are long, but the input needed correspondingly is isomorphic, and the two compiling modes can be matched with each other to better serve the business, such as adapting to the requirements of different scenes, and project development is performed by adopting different compiling modes.

The embodiment of the application actually provides a multiplexing method of isomorphic front-end components in a router framework, and a developer can transfer the front-end components to the router platform for use by using a specific tool (a compiling plug-in for introducing the front-end components) for compiling. The two different compiling modes can enable an developer to freely select the most suitable mode display page according to service requirements when the front-end component is developed. That is, under the condition that the original front-end component is guaranteed to normally operate at the front end, the compiling tool (the first plug-in unit and/or the second plug-in unit) provided by the embodiment of the application is used for compiling the front-end component obtained currently, and after the terminal environment with the Flutter environment is added into the runtime framework D, the front-end component can be migrated to the Flutter platform at low cost.

The compiling process and the product corresponding to the script code generation mode will be specifically described with reference to fig. 4 and 5.

In a possible embodiment, step A1 uses a script code generation mode of the first plug-in to compile the front-end component to generate a first compiling result file for dynamic execution, and includes the following steps a11-a13:

step A11: and compiling the front-end component and the dependent structure thereof by adopting a script code generation mode of the first plug-in to generate hypertext markup language (HTML), cascading Style Sheets (CSS) and programming language (JS) files.

Specifically, the front-end component corresponds to a Vue file, and when compiling in a script code generation mode, the Vue file and the structure depending on the Vue file are compiled into a standard html\css\js form.

Optionally, the HTML, CSS, and JS files compiled by the front-end component and the structure that the front-end component depends on based on the first plug-in step a11 include the following step a111:

step A111: and compiling the front-end component, the distributed DOM structure corresponding to the HTML, the distributed CSS style corresponding to the CSS and the Vue file corresponding to the JS, which are respectively relied on by the front-end component, by adopting a script code generation mode of the first plug-in, so as to obtain an HTML file comprising a complete DOM structure, a CSS file comprising a complete CSS style sheet and a JS file.

Wherein, DOM is the abbreviation of Document Object Model document object model, is an interface irrelevant to browser, platform and language, and belongs to tree-based API interface for xml/html; DOM allows programs and scripts to dynamically access and update the content, structure, and style of a document. All things in the HTML have nodes, the DOM regards the HTML document as a node tree, all nodes in the node tree can be accessed through JavaScript through the DOM, and all HTML elements can be modified, created and deleted. Optionally, compiling the front-end component and the DOM structure corresponding to the dispersion of the front-end component and the HTML to obtain the HTML file completing the DOM structure may be understood as a building process of the DOM node tree.

The CSS style is a style language for decorating a webpage and achieving a design effect. CSS styles may cover styles corresponding to font properties, background properties, tile properties, box properties, border properties, list properties, positioning properties, etc. of a web page. Optionally, compiling the front-end component and its CSS style scattered corresponding to the CSS to obtain the complete CSS style sheet may be understood as a process of binding the CSS style based on the web page structure.

The Vue file corresponding to JS may be understood as a Vue component (front-end component) described based on the JS language, and the corresponding JS file may be obtained by compiling the Vue component.

Specifically, as shown in fig. 5, the process of compiling the Vue file (front end component) into the HTML/CSS is to introduce a compiling plug-in B (first plug-in) of the module packer weback into the original project (as shown in fig. 2, when corresponding to the scene of the user, the existing running project), the compiling plug-in B is a custom plug-in based on HTML-weback-plug in and Vue-loader-plug in combination expansion, the function of the compiling plug-in B is to combine the inlet file and the Vue file relied on the inlet file and output the combined inlet file as the HTML/CSS/JS, the technical principle is that the information of the Vue file is obtained through Vue-loader-plug in, and the information of the Vue file is extracted in a classified manner through an api interface of HTML-weback-plug in, and the template is extracted as the HTML/CSS.

Step A12: and compiling the JS file by adopting a second plugin to generate the JSON file containing the abstract syntax tree.

Specifically, compiling the JS file with the second plug-in may be understood as a process of parsing the template, parsing the JS file into an AST (abstract syntax tree), and generating a JSON file describing the AST, as shown in fig. 4.

Specifically, as shown in fig. 5, compiling the JS into an AST is performed by using a plugin C (second plugin), and the syntax of the JS is analyzed by a semantic analysis module in the plugin C, so as to generate an AST. Json file. The JS code is analyzed into the form of ast. Json, and the compiling plugin C analyzes the grammar of the whole JS product through a grammar analyzer, and then controls and generates a json file which is simple and well understood.

Step A13: and packaging the HTML file, the CSS file and the JSON file into a first compiling result file.

Specifically, the HTML file, the CSS file, and the JSON file may be compressed and packaged into a first editing result file, which is used as a dynamic product generated in the compiling process.

In the embodiment of the present application, as shown in fig. 4, when compiling using the B1 mode (script code generation mode), the Vue file (front-end component) and the structure depending on the Vue file are compiled into the standard HTML/CSS/JS form, when compiling, the original dispersed DOM structure is combined into a complete DOM structure through the dependency analysis (Vue file dependency, CSS dependency) on the whole project, the original dispersed CSS style is combined into a complete CSS style sheet, and then JS in the file are parsed through a second plug-in (compiling plug-in C) to generate an AST abstract syntax tree (JSON file describing AST).

In the B1 mode (script code generation mode), a developer may use the Vue framework to develop a front-end component, after developing a test in the Vue framework, compile a front-end resource using the B1 mode of the tool B (first plugin) to output an Html/CSS/JS in a standard format, then compile the JS part through the compiling plugin C (second plugin) to generate a JSON file containing an AST, and finally compress and package three files of the Html/CSS/AST into one file (a bundle. Zip file as shown in fig. 4).

In a possible embodiment, as shown in fig. 3, at the running period of the target development platform Flutter, the compiling result file is loaded under the target development platform in step S103 to generate the target component, which includes the following step B1:

step B1: and analyzing the first compiling result file by adopting a logic executor introduced in the target development platform to generate a target component running in the target development platform.

As shown in fig. 2, the logic executor is a framework D, is a logic executor described based on an AST, is a code execution framework capable of executing an AST, and can execute an AST node of a specified type. The introduction of the logical executor of the AST is beneficial to the AST as an abstract description layer above the language, and the abstract description layer describes structures provided by a plurality of languages (JS can be used for analyzing and obtaining the AST, java can be used for analyzing and obtaining the AST). After the first compiling result file is loaded by the logic executor, the rendering of the component can be completed.

Optionally, in step B1, the logic executor introduced in the target development platform is adopted to parse the first compiling result file to generate a target component running in the target development platform, which includes the following steps B11-B12:

step B11: traversing the DOM structure corresponding to the HTML file to generate a first tree structure file.

Step B12: analyzing the CSS file, determining a style corresponding to each node of the tree structure, and updating the first tree structure file based on the style.

Step B13: and analyzing the JSON file, and generating a target component running in the target development platform by combining the first tree structure file.

Specifically, the process of analyzing the first compiling result file by the runtime framework D includes three flows: DOM parsing, CSS binding, and JS execution. Firstly, executing a step B11, namely traversing DOM, finding out one-to-one corresponding DOM widgets (for example, div corresponds to a container) in a frame D, and generating a first Tree structure file Widget Tree (a self-defined Tree structure in the router); step B12 is executed to find the needed style of the node of each Tree structure through analyzing the CSS, and the style is updated to the first Tree structure file Widget Tree; finally, executing the step B13 to analyze and execute the logic in the AST.json through an executor of the AST run time provided in the framework D; and then the first tree structure file is combined to complete the rendering of the target component running on the target development platform.

Optionally, as shown in fig. 6, parsing the JSON file in step B13 and generating a target component running in the target development platform in combination with the first tree structure file, including the following step B131:

step B131: and analyzing and operating an expression based on the abstract syntax tree in the JSON file by adopting a container for dynamically operating the abstract syntax tree in the logic executor, and generating a target component operated in the target development platform by combining the first tree structure file.

Specifically, parsing the JSON file requires analyzing its execution logic, so that the execution body (machine) knows its execution logic. Therefore, in the embodiment of the present application, the framework D implements logic parsing according to the description type in AST, and the following is exemplified: in the B1 mode (script code generation mode), assignment Expression-assignment expression is used as description of AST, and then the following class corresponding to the code can be implemented in the framework D:

expression of// assignment

class NovaAssignmentExpression extends NovaExpression

{

NovaExpression leftHandSide；

NovaExpression rightHandSide；

String operator；

NovaAssignmentExpression(List json,EvaluateContext context)

{

leftHandSide＝context.resolve(json.first[MapKey.LEFT_HAND_SIDE])；

rightHandSide＝context.resolve(json.first[MapKey.RIGHT_HAND_SIDE])；

operator＝json.first[MapKey.OPERATOR]；

}

@override

String get name＝>'AssignmentExpression'；

@override

ProcessResult evaluate(Scope scope,EvaluateContext context)

{

return ProcessResult(

result:leftHandSide

.evaluate(scope,context)

.variable

.setValue(rightHandSide.evaluate(scope,context).value))；

}

The class shown in the above code previously implements assignment (=) of the result (index+3) of the right expression to the variable (var index) on the left. That is, the logic of the type is edited in advance through the AST expression type, when the analysis is performed, the expression content of the AST is split and executed to obtain a result, and the execution of the whole AST expression logic can be completed through the transmission of the result.

Wherein, in general, by expressions, methods can be composed, which can be understood as: method = expression set + method attribute, the invocation of a method can be understood as: sequential execution of expression sets, classes can be understood as: class = N methods + N variables + class relationship. Based on this, in the embodiment of the present application, a class is described by AST, and a corresponding method may be restored and executed.

In the above description, it may be noted that when describing classes by AST, the problem of the variable domain needs to be processed, in the embodiment of the present application, as shown in fig. 6, the problem of solving the domain may be that by introducing variable stack processing, by executing one statement block, one method, one class will be stacked (creating the statement block, creating the method, and creating the statement block, all performing stacking to form the corresponding statement block domain object, method domain object, and class domain object), and the like is popped after execution ends, and when a certain variable is obtained, the variable is searched from the current stack to the next stack until the variable is found, so as to ensure the accuracy of the variable.

In addition, since there is no function of the system class at runtime, a mapping table of the system class needs to be introduced in the framework D, so that the AST can be called to the system function by execution of one expression. The principle of the mapping table is as follows:

var symbol＝{'Text':{'instance':(text)＝>Text(text)；}}；

var fn＝symbol['Text']['instance']；

Function.apply(fn,['Hello Nova'],{})；

Assuming that Text is a class of system, the instantiation method of Text is preset to an object through the first line code, and symbol object describes a Map structure of < String, function > >, for mapping String id and Map of object. The fn can be called through an api interface of the system, and parameters are transferred, and a Text is returned.

Based on the above method, the embodiment of the application can encapsulate the system functions and classes and provide the system functions and classes for ASTRUntime (a container for dynamically running abstract syntax trees) call.

The compiling process and the compiling product corresponding to the static code generation mode will be specifically described with reference to fig. 7, 8, 9 and 10.

In one embodiment, in step A2, a static code generation mode of the first plug-in is adopted to compile the front-end component, and a second compiling result file for secondary compiling is generated, which includes the following steps a21-a23:

step A21: and compiling the front-end component and the dependent structure of the front-end component by adopting a static code generation mode of the first plug-in to generate HTML, CSS and JS files (UI source code related to Flutter).

Specifically, as shown in fig. 7, the same as in step a11, the Vue file and the dependent result thereof are compiled first to generate a standard html\css\js format.

Step A22: and compiling the HTML, CSS and JS files by adopting a second plug-in to generate program codes of the target development platform.

Specifically, structural analysis and syntax analysis are performed on the three products of HTML/CSS/JS through a second plug-in (compiling plug-in C), resulting in a tree structure (first program code) and AST. The compilation plug-in C will then convert the tree structure into a tree structure of the UI descriptions in Flutter.

In a possible embodiment, the compiling of the HTML, CSS and JS files in step a22 using the second plug-in generates the program code of the target development platform, including the following steps a221-a223:

step a221: and carrying out code mapping processing on the HTML file and the CSS file by adopting a second plug-in unit to obtain a first program code.

Optionally, in step a221, the second plug-in is used to perform code mapping processing on the HTML file and the CSS file, so as to obtain a first program code, which includes the following step a2211:

step a2211: and mapping the HTML file by adopting a second plug-in unit to generate an HTML structure tree, binding a style structure corresponding to the CSS file in the HTML structure tree, and generating a first program code obtained by combining and converting the HTML and the CSS file.

In the B2 mode (static code generation mode), as shown in fig. 8, information in vue files is obtained through vue-loader-plug in, and then output as HTML/CSS/JS, code mapping is performed through plug-in C, and a Dart code corresponding to HTML/CSS is generated (for example, a component corresponding to a div tag is a container component, and components of other custom tags need to have a corresponding router component to complete the mapping).

As shown in fig. 9, the specific procedure of the mapping process is as follows: and generating an HTML Tree, binding CSS to the HTML Tree on the corresponding node, and converting the HTML Tree into a Widget Tree. The Widget Tree is a Tree structure (which is embodied as a first program Code, such as a Code Block Dart Code Block shown in fig. 7) correspondingly generated by the HTML Tree structure.

Through the processing of the Widget Tree, the HTML/CSS can be combined and converted into a section of UI code (first program code) of the Flutter, and the UI code can be directly used in the Flutter framework; if custom tags and components exist in the converted HTML/CSS, they need to be under the current environment dependent component package before they can be used normally in the router. In particular, it will be appreciated that the HTML/CSS of embodiments of the present application is implemented by way of analysis-mapping.

Step a222: and adopting a second plug-in to escape the JS file to obtain a second program code.

Specifically, in the embodiment of the present application, a Code escape process is required for JS, for example, an AST is restored through syntax (a manner of generating a specific target Code according to an AST expression description) to generate a Code (a second program Code, such as a Code Block Dart Code Block shown in fig. 7) of a Flutter.

When the JS is processed, the JS needs to be converted into a Dart code, wherein an AST (abstract syntax tree) is utilized, an AST corresponding to each sentence is generated through semantic analysis of the JS by using a plugin C, and then the generated AST is implemented by using the syntax of the Dart, and a processing flow is shown in fig. 10.

Step a223: and merging the first program code and the second degree code to obtain the program code of the target development platform.

Specifically, the first program code and the second program code are combined to generate a new Dart file (such as the xxx. Dart file shown in fig. 7), which is the code that can be finally compiled and executed by the Flutter.

The process of steps a221-a223 described above represents a specific process of recompiling the source code (html\css\js) into bytecode (Dart file) as shown in the Flutter compilation stage in fig. 3.

Step A23: and packing the program code of the target development platform into a second compiling result file.

Specifically, as step a223 is performed, the last combined code (the program code of the target development platform) is output to a component template, and a standard Flutter component (target component) can be generated, and the component can be used in the Flutter environment.

In the embodiment of the present application, processing is performed in the B2 mode (static code generation mode): after the developer uses the Vue framework to develop the front-end component and develops the test in the Vue framework, the B2 mode of the tool B (first plugin) is used to compile the front-end resource to output Html/CSS/JS in a standard format, and then the compiling plugin C (second plugin) compiles the Html/CSS/JS to generate the Flutter codes, wherein the logic of the Flutter codes and the page description are generated according to the original file (Vue file) and can be understood as a process of language translation. And finally, packaging the generated Flutter code into a Flutter frame to complete the migration of the component.

The embodiment of the application can compile the existing Vue component (front-end component) to generate the target component which can run by the router platform by means of the capability of technical development, can migrate the UI and the logic to the router platform, and can have good cross-platform performance and high performance. The application provides two compiling modes for selection, a developer can select different modes according to requirements and obtain different results, for example, the compiling modes can be selected according to the properties of the components, only one compiling process is needed to be executed in the migration process, zero development and migration are realized, and the development cost of the components on a Flutter platform is reduced.

An embodiment of the present application provides a project development apparatus, as shown in fig. 11, the project development apparatus 1100 may include: a loading module 1101, a compiling module 1102, a generating module 1103; the loading module 1101 is configured to obtain a front end component of the current development platform for constructing a user interface, and load a compiling plug-in the front end component; the compiling module 1102 is configured to compile the front-end component based on the compiling plug-in, and generate a compiling result file; the generating module 1103 is configured to load the compiling result file under the target development platform to generate the target component.

Optionally, the compiling module 1102 is configured to perform the step of compiling the front-end component based on the compiling plug-in, and further configured to perform at least one of the following steps when generating the compiling result file:

Optionally, the compiling module 1102 is configured to execute a script code generating mode using a first plug-in, compile a front-end component, and when generating a first compiling result file for dynamic execution, further is configured to execute the following steps:

Optionally, the compiling module 1102 is configured to, when executing the step of compiling the HTML, CSS and JS files that are formed by compiling the front-end component and the structure that it depends on based on the first plug-in, further execute the following steps:

and compiling the front-end component, the scattered DOM structure corresponding to the HTML, the scattered CSS style corresponding to the CSS and the Vue file corresponding to the JS, which are respectively relied on by the front-end component, by adopting a script code generation mode of the first plug-in, so as to obtain an HTML file comprising a complete DOM structure, a CSS file comprising a complete CSS style sheet and a JS file.

In one embodiment, the generating module 1103 is further configured to, when executing the step of loading the compiling result file under the target development platform to generate the target component, execute the following steps: and analyzing the first compiling result file by adopting a logic executor introduced in the target development platform to generate a target component running in the target development platform.

Optionally, the generating module 1103 is further configured to, when executing the step of parsing the first compilation result file with a logic executor introduced in the target development platform to generate a target component running in the target development platform, execute the following steps:

Optionally, the generating module 1103 is further configured to, when configured to perform the step of parsing the JSON file and generating the target component running in the target development platform in combination with the first tree structure file, perform the following steps: analyzing and operating an expression based on the abstract syntax tree in the JSON file by adopting a container for dynamically operating the abstract syntax tree in a logic executor, and generating a target component operated in a target development platform by combining a first tree structure file; the variables involved in the analysis and the operation processes are operated in a push variable stack mode.

In an embodiment, the compiling module 1102 is further configured to, when configured to perform the step of compiling the front-end component using the static code generation mode of the first plug-in to generate the second compiling result file for the second compiling, perform the following steps:

Optionally, when executing the step of compiling the HTML, CSS, and JS files with the second plug-in to generate the program code of the target development platform, the compiling module 1102 is further configured to execute the following steps:

Optionally, the compiling module 1102 is further configured to, when configured to perform the step of performing the mapping processing of the code on the HTML file and the CSS file using the second plug-in to obtain the first program code, perform the following steps:

And mapping the HTML file by adopting a second plug-in unit to generate an HTML structure tree, binding a style structure corresponding to the CSS file in the HTML structure tree, and generating a first program code obtained by combining and converting the HTML and the CSS file.

The apparatus according to the embodiments of the present application may perform the method provided by the embodiments of the present application, and its implementation principle is similar, and actions performed by each module in the apparatus according to each embodiment of the present application correspond to steps in the method according to each embodiment of the present application, and detailed functional descriptions of each module in the apparatus may be referred to the descriptions in the corresponding methods shown in the foregoing, which are not repeated herein.

The embodiment of the application provides electronic equipment, which comprises: a memory and a processor; at least one program stored in the memory for execution by the processor, which, when executed by the processor, performs: according to the application, the compiling plug-in is loaded in the front-end component for constructing the user interface in the current development platform, after the compiling plug-in is used for compiling the front-end component to generate the compiling result file, the compiling result file is loaded under another target development platform to generate the target component running on the target development platform, the problem of development of the front-end component collapsing the platform in the prior art is solved through the compiling layer, the multiplexing of the front-end component is realized, the development efficiency is improved, and the development cost is reduced.

In an alternative embodiment, an electronic device is provided, as shown in fig. 12, the electronic device 1200 shown in fig. 12 includes: a processor 1201 and a memory 1203. The processor 1201 is coupled to the memory 1203, for example, via bus 1202. Optionally, the electronic device 1200 may further include a transceiver 1204, where the transceiver 1204 may be used for data interactions between the electronic device and other electronic devices, such as transmission of data and/or reception of data, etc. It should be noted that, in practical applications, the transceiver 1204 is not limited to one, and the structure of the electronic device 1200 is not limited to the embodiment of the present application.

The processor 1201 may be a CPU (Central Processing Unit ), general purpose processor, DSP (Digital Signal Processor, data signal processor), ASIC (Application Specific Integrated Circuit ), FPGA (Field Programmable Gate Array, field programmable gate array) or other programmable logic device, transistor logic device, hardware components, or any combination thereof. Which may implement or perform the various exemplary logic blocks, modules and circuits described in connection with this disclosure. The processor 1201 may also be a combination of computing functions, e.g., including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

The bus 1202 may include a path to transfer information between the components. The bus 1202 may be a PCI (Peripheral Component Interconnect, peripheral component interconnect standard) bus or EISA (Extended Industry Standard Architecture ) bus, or the like. The bus 1202 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one thick line is shown in fig. 12, but not only one bus or one type of bus.

The Memory 1203 may be, but is not limited to, a ROM (Read Only Memory) or other type of static storage device that can store static information and instructions, a RAM (Random Access Memory ) or other type of dynamic storage device that can store information and instructions, an EEPROM (Electrically Erasable Programmable Read Only Memory ), a CD-ROM (Compact Disc Read Only Memory, compact disc Read Only Memory) or other optical disk storage, optical disk storage (including compact discs, laser discs, optical discs, digital versatile discs, blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a computer.

The memory 1203 is used for storing application program codes (computer programs) for executing the present application and is controlled to be executed by the processor 1201. The processor 1201 is configured to execute application program codes stored in the memory 1203 to implement what is shown in the foregoing method embodiments.

Among them, electronic devices include, but are not limited to: smart phones, tablet computers, notebook computers, smart speakers, smart watches, vehicle-mounted devices, and the like.

According to one aspect of the present application, there is provided 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 project development methods provided in the above-described various alternative implementations.

Embodiments of the present application provide a computer-readable storage medium having a computer program stored thereon, which when run on a computer, causes the computer to perform the corresponding method embodiments described above.

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.

The foregoing is only a partial embodiment of the present invention, and it should be noted that it will be apparent to those skilled in the art that modifications and adaptations can be made without departing from the principles of the present invention, and such modifications and adaptations are intended to be comprehended within the scope of the present invention.

Claims

1. A method of developing a project, comprising:

acquiring a front-end component of a current development platform for constructing an interactive interface, and loading a compiling plug-in for the front-end component; the compiling plug-in comprises a first plug-in for compiling the front end framework and a second plug-in for compiling the language;

Compiling the front-end component based on the compiling plug-in to generate a compiling result file, including: compiling the front-end component by adopting at least one mode of a script code generation mode and a static code generation mode included in the first plug-in, compiling the compiled result by adopting the second plug-in, and generating a compiling result file so that a target development platform generates a target component based on the compiling result file;

the script code generation mode is used for compiling the front-end component to generate a first compiling result file for dynamic execution; the static code generation mode is used for compiling the front-end component to generate a second compiling result file for secondary compiling.

2. The method of claim 1, wherein the front-end component employs a Vue isomorphism standard; the target development platform comprises a Flutter platform without dynamic capability.

3. The method of claim 2, wherein compiling the front-end component based on the compiling plug-in generates a compiling result file comprising at least one of:

4. The method of claim 3, wherein compiling the front-end component using the script code generation mode of the first plug-in to generate a first compilation result file for dynamic execution comprises:

compiling the front-end component and the dependent structure by adopting a script code generation mode of the first plug-in to generate hypertext markup language (HTML), cascading Style Sheets (CSS) and programming language (JS) files;

compiling the JS file by adopting the second plug-in to generate a JSON file containing an abstract syntax tree;

5. The method of claim 4, wherein the target development platform generates a target component based on the compilation result file, comprising:

6. The method of claim 5, wherein parsing the first compilation result file with a logic executor incorporated in a target development platform to generate a target component that operates in the target development platform comprises:

Traversing the DOM structure corresponding to the HTML file to generate a first tree structure file;

analyzing the JSON file, and generating a target component running in the target development platform by combining the first tree structure file.

7. The method of claim 6, wherein parsing the JSON file and generating a target component running in the target development platform in conjunction with the first tree-structure file, comprises:

analyzing and operating an expression based on the abstract syntax tree in the JSON file by adopting a container for dynamically operating the abstract syntax tree in the logic executor, and generating a target component operated in the target development platform by combining the first tree structure file;

8. The method of claim 3, wherein compiling the front-end component using the static code generation schema of the first plug-in to generate a second compilation result file for secondary compilation comprises:

Compiling the front-end component and the dependent structure by adopting a static code generation mode of the first plug-in to generate HTML, CSS and JS files;

compiling the HTML, CSS and JS files by adopting the second plug-in unit to generate a program code of a target development platform;

and packaging the program codes of the target development platform into a second compiling result file.

9. The method of claim 8, wherein compiling the HTML, CSS, and JS files with the second plug-in generates program code for the target development platform, comprising:

performing code mapping processing on the HTML file and the CSS file by adopting the second plug-in to obtain a first program code;

the JS file is escaped by adopting the second plug-in to obtain a second program code;

10. A project development device, comprising:

the loading module is used for acquiring a front-end component of the current development platform for constructing an interactive interface and loading a compiling plug-in for the front-end component; the compiling plug-in comprises a first plug-in for compiling the front end framework and a second plug-in for compiling the language;

The compiling module is configured to compile the front-end component based on the compiling plug-in, and generate a compiling result file, and includes: compiling the front-end component by adopting at least one mode of a script code generation mode and a static code generation mode included in the first plug-in, compiling the compiled result by adopting the second plug-in, and generating a compiling result file so as to enable a target development platform to generate a target component based on the compiling result file;

11. An electronic device, the electronic device comprising:

one or more processors;

a memory;

one or more computer programs, wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to: method according to any one of claims 1 to 9.

12. A computer readable storage medium for storing computer instructions which, when run on a computer, cause the computer to perform the method of any one of the preceding claims 1 to 9.