CN113031932A

CN113031932A - Project development method and device, electronic equipment and storage medium

Info

Publication number: CN113031932A
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: 2021-06-25
Anticipated expiration: 2041-03-11
Also published as: CN113031932B

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 in scenes of various web pages, 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 to generate a compiling result file; and loading the compiling result file under the target development platform to generate a target component. The implementation of the scheme of the application can effectively improve the platform collapse property of the technology development and reduce the cost of repeated development of the components.

Description

Project development method and device, electronic equipment and storage medium

Technical Field

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

Background

In the front-end construction process of the project development system, because the front-end page structure is generally complex, developers need to write a large amount of codes to complete the project development. With the development of development technologies and the increasing demand of user experience, a user interface expressed by the same front-end component generally needs to be applied to at least two development platforms. In the prior art, in order to solve the problem, platform-collapse development of a front-end component is generally completed by re-developing the component for a framework of a newly developed platform, that is, by repeated development, because of repeated development, development cost is increased, and meanwhile, cost of later maintenance is also increased.

Disclosure of Invention

The technical scheme provided by the application aims to solve at least one of the technical defects, particularly 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 to generate a compiling result file;

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

In one embodiment, the front end component employs Vue isomorphic standards; 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 one embodiment, the front-end component is compiled based on the compiling plug-in to generate a compiling result file, including at least one of:

compiling the front-end component by adopting a script code generation mode of a 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 another embodiment, 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 includes:

compiling the front-end component and a structure depending on the front-end component by adopting a script code generation mode of a first plug-in to generate a hypertext markup language HTML, a cascading style sheet CSS and a programming language JS file;

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 the 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 into the target development platform to generate a target component running in the target development platform.

In another embodiment, the parsing the first compilation result file by using 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 pattern corresponding to each node of the tree structure, and updating the first tree structure file based on the pattern;

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

In an embodiment, parsing the JSON file and combining the first tree structure file to generate a target component running in a target development platform includes:

adopting a container for dynamically operating an abstract syntax tree in a logic executor to analyze and operate an expression based on the abstract syntax tree in a JSON file, and combining a first tree structure file to generate a target assembly which operates in a target development platform;

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

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

compiling the front-end component and a structure depending on the front-end component 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 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.

In an embodiment, the compiling the HTML, CSS, and JS files with the second plug-in to generate the program code of the target development platform includes:

mapping codes of the HTML file and the CSS file by adopting a second plug-in to obtain a first program code;

adopting a second plug-in to perform escape on the JS file to obtain a second program code;

and combining the first program code and the second program 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 component based on the compiling plug-in to generate a compiling result file;

and the generating module is used for loading the compiling result file under the target development platform so as 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 by the first aspect is performed.

In a fourth aspect of the present application, a computer-readable storage medium is provided for storing computer instructions which, when executed on a computer, cause the computer to perform the method provided by the first aspect.

The beneficial effect that technical scheme that this application provided brought is:

according to the method and the device, the compiling plug-in is loaded in the front-end component used for constructing the user interface in the current development platform, the front-end component is compiled through the compiling plug-in to generate a compiling result file, and then the compiling result file is loaded in the other target development platform to generate the target component running on the target development platform.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings 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 provided in an embodiment of the present application;

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

FIG. 3 is a diagram illustrating compile and run time periods in a project development method according to an embodiment of the present disclosure;

fig. 4 is a flowchart illustrating 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 processing a variable stack applied to a project development method according to an embodiment of the present application;

fig. 7 is a flowchart illustrating 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 generation of a widget tree when a front-end component is compiled 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 JS escaping to Dart code in an application project development method according to an embodiment of the present application;

fig. 11 is a schematic structural diagram of a project development apparatus 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

Reference will now be made in detail to embodiments of the present application, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are exemplary only for the purpose of explaining the present application and are not to be construed as limiting the present application.

As used herein, the singular forms "a", "an", "the" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. 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. As used herein, the term "and/or" includes all or any element and all combinations of one or more of the associated listed items.

To make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

The following is a description of the technology and nomenclature involved in this application:

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

AST: abstract Syntax Tree; the Syntax Tree (Syntax Tree) is an abstract representation of the Syntax structure of the source code, the Syntax structure of the programming language is represented in a Tree form, and each node on the Tree represents one structure in the source code. In the present application, an AST may be a tree-like representation of data generated after a grammar is parsed by an interpreter (e.g., a plug-in for a compilation 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 documents on a network can be formatted uniformly, so that discrete network resources are connected into a logical whole. HTML text is descriptive text consisting of HTML commands that can specify words, graphics, animations, sounds, tables, links, etc.

CSS: a Cascading Style Sheets is a computer language used to represent the Style (font, spacing, color, etc.) of a file, such as HTML (an application of the standard generalized markup language) or XML (a subset of the standard generalized markup language). The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports general font and font styles and has the capability of editing webpage objects and model styles.

JS: JavaScript, a lightweight, interpreted or just-in-time programming language with function precedence. JS is based on prototype programming, multi-normal dynamic scripting language, object-oriented programming, command programming and functional programming.

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

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

AOT: ahead Of Time, also known as pre-run compilation, is a method Of executing computer code that is compiled prior to program execution rather than during execution (at run-Time). Comparing JIT to AOT, it will be appreciated that the compiler of JIT will compile when running (runtime) applications, while the AOT compiler will compile when building (built) applications.

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

Static code generation mode: the products generated based on the schema compilation in this application may be executed by an advanced compilation (AOT) machine.

Dynamic operating environment: in this application to an environment in which JIT can run.

And (3) dynamically executing: referred to herein as the characteristics of JIT.

Components (Components) are simple packages for data and methods, and are the driving force for application development. In addition to serving as a user interface design (UI) shaping element, the component can also serve as a reusable modular unit that can be used across multiple projects.

And (6) 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-inheritance language that can be translated to JS, supported interface (interfaces), mixed in (mixins), abstract classes (abstract classes), materialized generic (differentiated genes), optional type (optional type), and sound type system.

With the development of development technologies and the increasing demand of user experience, a user interface expressed by the same front-end component generally needs to be applied to at least two development platforms. In the related art, to solve this problem, the development of a platform-collapse front-end component is generally completed by re-developing the component with respect to the framework of a newly developed platform. For example, existing solutions for front-end isomorphism to Flutter choose to redevelop a component, which may be rendered onto the Flutter platform by writing Vue code, writing HTML/CSS/JS, writing Flutter code, and so on. Namely, the method is realized through repeated development, and due to the repeated development, the development cost is increased, and meanwhile, the later maintenance cost is also increased.

To solve at least one of the above problems, 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 be operated by the target development platform, so that the UI and the logic can be migrated to the target development platform, the target development platform also has good platform collapse performance and high performance, the development efficiency is improved, and the cost caused by repeated development is reduced.

The following describes the technical solutions of the present application and how to solve the above technical problems with specific embodiments. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated 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 is a schematic 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, such as 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, and the like, 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: and acquiring a front-end component of the current development platform for constructing the user interface, and loading a compiling plug-in the front-end component.

Specifically, the 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 of secondary development software, and a user may perform various software products on the product.

The User Interface (UI) refers to the overall design of human-computer interaction, operation logic, and Interface beauty of software, is a medium for interaction and information exchange between a system and a User, and can be used to realize conversion between an internal form of information and a form that can be received by a human being.

Wherein, the component can extend HTML elements and encapsulate reusable code. While the front-end component is used to construct the user interface.

Where a compiler plug-in is a program for translating one language into another.

Specifically, loading the compiling plug-in the front-end component may be understood as a process of introducing the compiling plug-in the front-end component, and a method for introducing the compiling plug-in Vue component in the related art may be referred to, and details are not described herein. In which plug-ins with various functions can be loaded in the front-end component as required, and the compiling plug-in referred to in this application is used for compiling the front-end component.

Optionally, the obtained front-end component may be a component that is currently running on the current development platform, that is, the implementation of the method 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 guaranteed to normally run 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 the components 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 corresponding to JIT compiling is adopted, the compiled product is suitable for the dynamic running environment; corresponding to the static code generation mode of AOT compiling, the compiled product is suitable for the AOT environment, namely the non-dynamic operation environment.

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

Specifically, by migrating the compilation result file (the product obtained by compilation) to the target development platform, the component that needs to be redeveloped in the prior art can be migrated by the method in the embodiment of the present application, that is, by developing a set of front-end components, and by using the multiplexing method (the project development method) provided by the embodiment of the present application, a dual-platform or even multi-platform unified component can be obtained, which can effectively reduce the migration cost and improve the applicability of the component.

For the project platform method provided by the embodiment of the present application, a front-end component isomorphic multiplexing value Flutter framework is taken as an example for description. Wherein, the current development platform can correspond to Vue framework, and the target development platform can correspond to Flutter framework. The implementation of the application can solve the problem of isomorphism of the front-end component, the front end only needs to adapt to Vue engineering of isomorphism standards to develop one front-end component, and a compiling plug-in introduced into the front-end component in the embodiment of the application is combined, so that a product obtained by compiling can be efficiently migrated to the Flutter platform. According to the embodiment of the application, the difference of the two end platforms can be smoothed by utilizing the advantages of the Flutter platform, the UI component developed by the Flutter has highly consistent performance adaptability on Android/iOS, and the UI component may have good uniformity on more platforms (Web/Windows/Mac) based on the later development of the Flutter.

The following describes a specific process of compiling the front-end component based on the compiling plug-in with reference to fig. 2 and 3.

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

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

Wherein, since Flutter is developed by a language Dart based on AOT compilation, the biggest difference from JS language is that JS is based on JIT compilation; comparing the JIT and AOT compiling modes, it can be seen that Flutter has no dynamic capability, and therefore, the framework of the embodiment of the present application includes a runtime framework D introduced in the Flutter platform (which may be introduced in the form of a Flutter standard module package). The runtime framework D is a runtime executor based on AST, and a simulated class system is constructed to obtain an environment for executing the AST while analyzing the AST, wherein the environment can be used for describing the AST while analyzing the AST, so that the Flutter achieves the dynamic capability, and the real situation of the dynamic capability of the Flutter is compensated by introducing the runtime framework D. Therefore, the product generated under the script code generation mode B1 needs to have the running capability on the Flutter platform under the support of the runtime framework D; the product generated under the static code generation mode B2 can have the running capability only in a standard Flutter framework; in contrast, the product generated by the script code generation mode B1 needs to have intrusiveness on the original project of the platform when the Flutter runs, and the product generated by the static code generation mode B2 has intrusiveness substantially 0 on the original project of the platform when the Flutter runs.

In one embodiment, the compiling the front-end component based on the compiling plug-in step S102 to generate a compiling result file includes at least one of the following steps a1-a 2:

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.

In particular, the product (first compilation result file) generated in the script code generation mode can be dynamically executed, and the mode has real-time performance and flexibility, so that the method can be better applied to some scenes with more importance on timeliness (requiring rapid iteration).

The product (first compilation result file) in the script code generation mode can be issued to the client in an off-line package form, can be dynamically executed (an executable file in a terminal package does not need to be compiled, and the compilation is just-in-time JIT), namely, can be updated in real time without depending on the terminal version, and the processing of the mode has a prominent high-efficiency processing effect in the emergency repair/disaster recovery processing scene.

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 compilation result file) generated in the static code generation mode is an executable file that needs to be compiled into a binary file, and the static code generation mode has high performance and high customization, and compared with the first compilation result file obtained in step a1, the second compilation result file does not have the characteristic of dynamic execution, but has high performance, and can be considered to be applied to a scene with attention to interaction.

Optionally, the second compilation result file generated in the static code generation mode supports secondary development; if the quality of the currently generated second compiling result file is not ideal or the second compiling result file is adaptive to the used scene, the second compiling can be directly carried out when the developer wants to carry out the adjustment, and the time cost for redevelopment of the developer is also saved to a certain extent.

In the embodiment of the present application, as shown in step a1 and step a2, although the two compiling modes are respectively long, the correspondingly required inputs are isomorphic, and the two compiling modes can be matched with each other to better serve the business, for example, to meet the requirements of different scenes, and project development is performed by using different compiling modes.

The embodiment of the application provides a multiplexing method of a set of homogeneous front-end components in a Flutter framework, and a developer can migrate the front-end components to a Flutter platform for use at a low cost by compiling with a specific tool (a compiling plug-in introduced into the front-end components). The two different compiling modes can enable a developer to freely select the most appropriate mode to display the page according to business requirements when the front-end component develops. That is, in the embodiment of the present application, under the condition that it is ensured that the original front-end component operates normally at the front-end, the currently acquired front-end component is compiled using the compiling tool (the first plug-in and/or the second plug-in) provided in the embodiment of the present application, and after the terminal environment having the Flutter environment is added to the runtime framework D, the front-end component can be migrated to the Flutter platform at low cost.

The following describes the compiling process and the product corresponding to the script code generation mode in detail with reference to fig. 4 and 5.

In a possible embodiment, the step a1 compiles 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, including the following steps a11-a 13:

step A11: and compiling the front-end component and a structure depending on the front-end component by adopting a script code generation mode of the first plug-in to generate a hypertext markup language HTML, a cascading style sheet CSS and a programming language JS file.

Specifically, the front-end component corresponds to an Vue file, and when the script code generation mode is adopted for compiling, the Vue file and the structure depending on the file are compiled into a standard HTML \ CSS \ JS form.

Optionally, the compiling the front-end component and the structure dependent thereon into HTML, CSS, and JS files in step a11 based on the first plug-in includes the following step a 111:

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

The DOM is an abbreviation of Document Object Model of Document Object, is an interface irrelevant to a browser, a platform and a language, and belongs to an API (application program interface) based on trees aiming at xml/html; the DOM allows programs and scripts to dynamically access and update the content, structure, and style of a document. All things in HTML have nodes, the DOM regards HTML documents as node trees, all the nodes in the node trees 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 dispersed DOM structures corresponding to the HTML to obtain an HTML file with completed DOM structures may be understood as a process of building a DOM node tree.

The CSS style is a web page making technology and is a style language used for decorating web pages to achieve a design effect. The CSS style may cover a style corresponding to a font property, a background property, a block property, a box property, a border property, a list property, a positioning property, etc. of the web page. Optionally, compiling the front-end component and the dispersed CSS styles corresponding to the CSS to obtain a finished CSS style sheet may be understood as a process of performing CSS style binding based on a web page structure.

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

Specifically, as shown in fig. 5, the process of compiling Vue files (front-end components) into HTML/CSS is to introduce a compiler plug-in B (a first plug-in) of a module wrapper webpack into an original project (as shown in fig. 2, when corresponding to a user's scene, the compiler plug-in B is a plug-in that expands a user-defined based on HTML-webpack and vue-loader-plug-in combination, and has a function of merging entry files and Vue files that depend on the entry files and outputting the entry files as HTML/CSS/JS, and the technical principle is to obtain information of vue files through vue-loader-plug-in, classify and extract vue file information through an api interface of HTML-webpack, and extract template and style as HTML/CSS.

Step A12: and compiling the JS file by adopting a second plug-in to generate a JSON file containing an 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 JS into AST is performed by processing with a plug-in C (second plug-in), and parsing JS is performed by a semantic analysis module in the plug-in C to generate AST. Json is analyzed, the syntax of the whole json product is analyzed through a syntax analyzer, and then a simplified and well-understood json file is generated under control.

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 as a dynamic product generated by 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 of its dependency are compiled into the form of standard HTML/CSS/JS, and when compiling, the original dispersed DOM structures are merged into a complete DOM structure by analyzing the dependency of the whole project (Vue file dependency, CSS dependency), the original dispersed CSS patterns are merged into a complete CSS pattern table, and then JS in the file is parsed by the 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 can use the Vue framework to develop a front-end component, and after a test is developed in the Vue framework, the front-end resource is compiled using the B1 mode of the tool B (first plug-in) to output Html/CSS/JS in a standard format, then the JS part is compiled through the compiling plug-in C (second plug-in), a JSON file containing AST is generated, and finally three files of Html/CSS/AST are compressed and packaged into one file (such as a bundle.

In a possible embodiment, as shown in fig. 3, during the runtime of the development target platform Flutter, the step S103 loads the compilation result file under the development target platform to generate the target component, including the following step B1:

step B1: and analyzing the first compiling result file by adopting a logic executor introduced into 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 an AST description-based logic executor, is a code execution framework capable of executing AST, and can execute the AST node of the specified type. The logic executor of the AST is favorable for taking the AST as an abstract description layer above the language, and the abstract description layer describes the structure provided by a plurality of languages (JS can be analyzed to obtain the AST, and java can be analyzed to obtain the AST). And after the first compiling result file is loaded through the logic executor, the rendering of the component can be completed.

Optionally, in the step B1, parsing the first compilation result file by using a logic executor introduced in the target development platform to generate a target component running in the target development platform, including the following steps B11-B12:

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

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

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

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

Optionally, as shown in fig. 6, parsing the JSON file in step B13, and combining the first tree structure file to generate a target component running in the target development platform, includes the following steps B131:

step B131: and adopting a container for dynamically operating the abstract syntax tree in the logic executor to analyze and operate an expression based on the abstract syntax tree in the JSON file, and combining the first tree structure file to generate a target assembly which operates in the target development platform.

Specifically, parsing the JSON file requires parsing its execution logic to make the execution agent (machine) aware of its execution logic. Therefore, in the embodiment of the present application, the framework D implements logic parsing according to the description type in the AST, and the following examples are given: in the B1 schema (script code generation schema), an Assignment-Assignment Expression is used as the description of AST, and then the following classes corresponding to codes can be implemented in the framework D:

v/valuation expressions

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 realizes in advance that the result (index +3) of the right expression is assigned (═ to the variable (var index) on the left. That is, a logic of the type is edited in advance through the AST expression type, when in analysis, 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 by transmitting the result.

In general, a method can be composed by an expression, and the method can be understood as follows: the method is the expression set + method attribute, and the method call can be understood as: sequential execution of expression sets, a class may be understood as: class is the relationship of N methods + N variables + class. 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 can be noted that when a class is described by AST, a problem of a variable domain needs to be processed, in this embodiment of the application, as shown in fig. 6, solving the domain problem may be to introduce variable stack processing, and perform stack pushing (each time a statement block is executed, a method is executed, and a class is stacked) (a corresponding statement block domain object, a method domain object, and a class domain object are formed by performing stack pushing when the statement block is created, the method is created, and the statement block is created), and then perform stack pushing after the execution is completed, and when a certain variable is obtained, search is performed from a current stack to a next stack until the variable is found, so as to ensure accuracy of the variable.

In addition, since there is no function of the system class at run-time, it is necessary to introduce a mapping table of the system class in the framework D so that the AST can call to the system function through 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 system class, the instantiation method of Text is preset to an object through a first line code, and symbol object describes a Map structure of one of < String, Function > >, for mapping the String id and the Map of the object. Wherein, fn can call and pass the parameter through the api interface of the system, return a Text.

Based on the method, the embodiment of the application can encapsulate the system function and the class and provide the system function and the class for ASTRUNTTIME (a container for dynamically running an abstract syntax tree) to call.

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

In an embodiment, the compiling the front-end component by using the static code generation mode of the first plug-in the step a2 to generate the second compilation result file for the second compilation, includes the following steps a21-a 23:

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

Specifically, as shown in fig. 7, similarly to step a11, Vue file and its dependent result are compiled first, and a standard form of HTML \ CSS \ JS is generated.

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

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

In a possible embodiment, the compiling the HTML, CSS and JS files by using the second plug-in the step a22 to generate the program code of the target development platform includes the following steps a221-a 223:

step A221: and mapping the codes of the HTML file and the CSS file by adopting a second plug-in to obtain a first program code.

Optionally, the mapping processing of the codes on the HTML file and the CSS file by using the second plug-in step a221 to obtain the first program code includes the following steps a 2211:

step a 2211: and mapping the HTML file by adopting a second plug-in 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 file and the CSS file.

As shown in fig. 8, in the B2 mode (static code generation mode), similarly, the information in the vue file is acquired through vue-loader-plugin, then output is HTML/CSS/JS, and mapping of the code is performed through the plug-in C, so as to generate a Dart code corresponding to the HTML/CSS (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 mapping).

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

Through the processing of the Widget Tree, the HTML/CSS can be merged and converted into a section of UI code (first program code) of the Flutter, and the UI code can be directly used in a Flutter framework; if custom tags and components exist in the converted HTML/CSS, they need to be dependent on the component package in the current environment for normal use in the Flutter. Specifically, it can be understood that the HTML/CSS of the embodiment of the present application is implemented by way of analysis-mapping.

Step A222: and performing escape on the JS file by adopting a second plug-in to obtain a second program code.

Specifically, in the embodiment of the present application, Code escaping processing is required for JS, such as generating a Code of Flutter (a second program Code, for example, a Code Block Dart Code Block shown in fig. 7) by syntax reduction (a way of generating a specific target Code according to the description of the AST expression) on AST.

When JS is processed, JS needs to be transferred to Dart codes, AST (abstract syntax tree) is used, JS semantic analysis is performed on JS through a plug-in C to generate AST corresponding to each sentence, and then the generated AST is realized by using Dart syntax, and the processing flow is shown in fig. 10.

Step A223: and combining the first program code and the second program code to obtain the program code of the target development platform.

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

The process of the above steps a221-a223 embodies a specific process of recompiling the source code (HTML \ CSS \ JS) to form the bytecode (Dart file) as shown in Flutter compilation period in fig. 3.

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

Specifically, as step a223 is executed, the finally merged code (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, the B2 mode (static code generation mode) is used for processing: the developer uses Vue framework to develop front-end component, after developing test in Vue framework, uses B2 mode of tool B (first plug-in) to compile front-end resource to output Html/CSS/JS in standard format, then compiles HTML/CSS/JS through compiling plug-in C (second plug-in) to generate Flutter code, logic of these Flutter codes, page description are all generated according to original file (Vue file), and can be understood as a process of mutual translation of one language. And finally, packaging the generated Flutter code into a Flutter framework to finish the migration of the component.

By means of the technical development capability, the existing Vue component (front-end component) can be compiled to generate the target component of the Flutter platform, UI and logic can be migrated to the Flutter platform, and the Flutter platform can have good cross-platform performance and high performance. The method and the device have the advantages that two compiling modes are provided for selection, developers can select different modes and obtain different results according to requirements, if the modes can be selected according to the properties of the components, only one compiling process needs to be executed in the migration process, zero development migration is achieved, and the development cost of the components on the 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 and 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 used for compiling the front-end component based on the compiling plug-in to generate a compiling result file; a generating module 1103, configured to load the compilation result file under the target development platform to generate the target component.

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

Optionally, the compiling module 1102 is configured to, when performing the step of compiling the front-end component by using the script code generating mode of the first plug-in to generate the first compiling result file for dynamic execution, further perform the following steps:

Optionally, the compiling module 1102, when being configured to execute the step of compiling the front-end component and the structure dependent thereon into HTML, CSS, and JS files based on the first plug-in, is further configured to execute the following steps:

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

In an embodiment, the generating module 1103, when executing the step of loading the compilation result file under the target development platform to generate the target component, is further configured to execute the following steps: and analyzing the first compiling result file by adopting a logic executor introduced into 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 analyzing the first compilation result file by using a logic executor introduced in the target development platform to generate the target component running in the target development platform, execute the following steps:

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

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

Optionally, when the step of compiling the HTML, CSS, and JS files by using the second plug-in to generate the program code of the target development platform is executed by the compiling module 1102, the following steps are further executed:

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

and mapping the HTML file by adopting a second plug-in 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 file and the CSS file.

The apparatus according to the embodiment of the present application may execute the method provided by the embodiment of the present application, and the implementation principle is similar, the actions executed by the modules in the apparatus according to the embodiments of the present application correspond to the steps in the method according to the embodiments of the present application, and for the detailed functional description of the modules in the apparatus, reference may be specifically made to the description in the corresponding method shown in the foregoing, and details are not repeated here.

An embodiment of the present application provides an electronic device, including: a memory and a processor; at least one program stored in the memory for execution by the processor, which when executed by the processor, implements: according to the method and the device, the compiling plug-in is loaded in the front-end component used for constructing the user interface in the current development platform, the front-end component is compiled through the compiling plug-in to generate a compiling result file, and then the compiling result file is loaded in the other target development platform to generate the target component running on the target development platform.

In an alternative embodiment, an electronic device is provided, as shown in fig. 12, the electronic device 1200 shown in fig. 12 comprising: a processor 1201 and a memory 1203. Wherein the processor 1201 is coupled to the memory 1203, such as by a bus 1202. Optionally, the electronic device 1200 may further include a transceiver 1204, and the transceiver 1204 may be used for data interaction between the electronic device and other electronic devices, such as transmission of data and/or reception of data. It should be noted that the transceiver 1204 is not limited to one in practical applications, 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), a general purpose Processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other Programmable logic device, transistor logic device, hardware component, or any combination thereof. Which may implement or perform the various illustrative logical blocks, modules, and circuits described in connection with the disclosure. The processor 1201 may also be a combination of computing functions, e.g., comprising one or more microprocessors, a combination of a DSP and a microprocessor, or the like.

Bus 1202 may include a path that conveys information between the aforementioned components. The bus 1202 may be a PCI (Peripheral Component Interconnect) bus, an 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 this is not intended to represent only one bus or type of bus.

The Memory 1203 may be 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) or other optical Disc storage, optical Disc storage (including Compact Disc, laser Disc, optical Disc, digital versatile Disc, blu-ray Disc, etc.), a magnetic disk storage medium or other magnetic storage device, 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, but is not limited to these.

The memory 1203 is used for storing application program codes (computer programs) for executing the present application, and the processor 1201 controls the execution. The processor 1201 is configured to execute application program code stored in the memory 1203 to implement the contents 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 an aspect of the application, a computer program product or computer program is provided, comprising computer instructions, the computer instructions being 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 to cause the computer device to perform the project development method provided in the various alternative implementations described above.

The present application provides a computer-readable storage medium, on which a computer program is stored, which, when running on a computer, enables the computer to execute the corresponding content in the foregoing method embodiments.

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

The foregoing is only a partial embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and decorations can be made without departing from the principle of the present invention, and these modifications and decorations should also be regarded as the protection scope of the present invention.

Claims

1. A method of project development, comprising:

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

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

2. The method of claim 1, wherein the front-end component employs an Vue isomorphic 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.

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:

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;

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

compiling the front-end component and a structure depending on the front-end component by adopting a script code generation mode of the first plug-in to generate a hypertext markup language HTML, a cascading style sheet CSS and a programming language JS file;

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 loading the compilation result file under a target development platform to generate a target component comprises:

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

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

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 structured file comprises:

adopting a container for dynamically operating an abstract syntax tree in the logic executor to analyze and operate an expression based on the abstract syntax tree in the JSON file, and combining the first tree structure file to generate a target component which operates in the target development platform;

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 HTML, CSS and JS files by adopting the second plug-in to generate a program code of a target development platform;

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

mapping codes of the HTML file and the CSS file by using the second plug-in to obtain a first program code;

adopting the second plug-in to perform escape on the JS file to obtain a second program code;

10. A project development apparatus, comprising:

the loading module is used for 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;

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

11. An electronic device, characterized in that the electronic device comprises:

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: performing the method according to any one of claims 1 to 9.

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