An automatic conversion method for converting Flex projects to React projects

Abstract

The present invention relates to an automatic conversion method for converting a Flex project into a React project, including: scanning the Flex project to be converted to obtain the mxml pages of the Flex project; reading the mxml files to obtain the rendering layer view and the logic layer script; respectively converting the scripts of the rendering layer view and the logic layer script; converting the as files; generating a React component skeleton to complete the conversion of the Flex project into a React project. Compared with the prior art, the present invention has the advantages of high automation degree and strong practicability.

Description

Technical Field

[0001] The present invention relates to the field of Internet technologies, and in particular, to an automatic conversion method for converting a Flex project into a React project. Background Art

[0002] Flex is a technology that was previously very common and was mostly used for web development. However, since Adobe no longer maintains Flash, major browsers currently do not support Flash. H5 is a relatively popular web front-end technology at present and can efficiently handle various business scenarios. However, there are still a large number of systems developed with Flex in banks. If all these systems are to be converted to H5, it will consume a large amount of manpower, material resources, and time. Therefore, quickly recoding the original Flex project into H5 will greatly save the resources brought about by system migration.

[0003] In the prior art, Flexjs and Google Swiffy can be used to convert between Flex code and H5 code. Among them:

[0004] Flexjs converts the mxml in the Flex page into html and the as into js by means of re-coding, so as to achieve the purpose that the page remains unchanged after conversion but the programming language changes, thereby realizing project transfer. However, the development progress of Flexjs technology is slow, and it takes half a year to update a small version; the Flex tags are directly converted into HTML DOM, and the layout is very messy, and even the tags are misaligned, which requires a large amount of manual correction in the later stage; the As is directly converted into jQuery, and CreateJS directly controls the HTML DOM, and the rendering effect on the browser is unstable.

[0005] Google Swiffy can convert the SWF of Flash online into HTML, SVG, and CSS. However, this method directly generates HTML from the SWF. Although the performance after generation is stronger than that of Flexjs, due to the decompiled HTML project, the variable names and structure readability are relatively low, and the extensibility is relatively low. The native HTML DOM generated by Swiffy is not conducive to re-development using current mainstream front-end frameworks. Summary of the Invention

[0006] The purpose of the present invention is to overcome the defects existing in the above prior art and provide an automatic conversion method for converting a Flex project into a React project with high automation and strong practicability.

[0007] The purpose of the present invention can be achieved by the following technical solutions:

[0008] An automatic conversion method for converting a Flex project into a React project, the automatic conversion method includes:

[0009] Step 1: Scan the Flex project to be converted to obtain the mxml pages of the Flex project;

[0010] Step 2: Read the mxml file to obtain the rendering layer view and the logic layer script;

[0011] Step 3: Convert the scripts of the rendering layer view and the logic layer script respectively;

[0012] Step 4: Convert the as file;

[0013] Step 5: Generate the React component skeleton to complete the conversion of the Flex project to a React project.

[0014] Preferably, the specific content of Step 1 is as follows:

[0015] Use python to scan the Flex project to be converted to obtain the mxml pages of the Flex project, and classify all pages according to the base class inherited by the pages.

[0016] Preferably, the specific content of Step 2 is as follows:

[0017] Call the lxml library of python to read the mxml file to obtain the rendering layer view and the logic layer script.

[0018] Preferably, the method for converting the rendering layer view in Step 3 is as follows:

[0019] For the extracted view layer, recursively process all the tags in the rendering layer according to the original structure.

[0020] More preferably, the method for recursively processing all the tags in the rendering layer is the tag name mapping sub-method and the tag attribute mapping sub-method;

[0021] The specific content of the tag name mapping sub-method is as follows:

[0022] Process the tag names according to the default mapping rules or the preset mapping table;

[0023] The specific content of the tag attribute mapping sub-method is as follows:

[0024] Retain the original attributes of the tags, and replace the Flex tags with React tags according to the default mapping rules or the preset mapping table.

[0025] Preferably, the method for converting the logic layer script in Step 3 is as follows:

[0026] First, convert the way of referencing the API;

[0027] Secondly, convert global variables;

[0028] Then, convert the global function declaration method;

[0029] Finally, convert the function content.

[0030] More preferably, the method for converting global variables is specifically as follows:

[0031] Convert the strongly typed variables in as to weakly typed variables in js, and retain the variable initial values.

[0032] More preferably, the method for converting the global function declaration method is specifically as follows:

[0033] Process all functions in as as arrow functions.

[0034] Preferably, step 4 is specifically as follows:

[0035] First, remove the package in the as file;

[0036] Secondly, convert public class to export class;

[0037] Then, call mxml.script to process the content of the class, and splice the processing results into a new class;

[0038] Finally, repackage it as a js file, and the file name is the same as the original name.

[0039] Preferably, the React component skeleton includes a reference component library module, a defined component module, a component variable module, a component logic function module, and a component rendering render module.

[0040] Compared with the prior art, the present invention has the following beneficial effects:

[0041] First, high degree of automation: The automatic conversion method in the present invention can automatically convert a large amount of Flex page code into React-side pages, and can quickly convert a Flex project into a React project.

[0042] Second, strong practicability: The automatic conversion method in the present invention utilizes the component-based development characteristics of React, the high similarity between React and Flex in development, the mutual conversion of the mvc framework, and the similar functions of ref and id to migrate the entire Flex project to React, generate React code, and the generated code can be applied to different React frameworks, such as conventional React frameworks, dva single-page application frameworks, etc., with strong practicability.

[0043] III. High maintainability: The automatic conversion method in the present invention can convert Flex projects into React projects with higher maintainability, which conforms to and continues the original development specifications of project developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 It is a schematic flowchart of the automatic conversion method in the present invention;

[0045] Figure 2 It is a schematic diagram of the mapping relationship between mxml and jsx in an embodiment of the present invention;

[0046] Figure 3 It is a schematic diagram of the mapping relationship between as and js in an embodiment of the present invention;

[0047] Figure 4 It is a schematic diagram of converting the rendering layer view in an embodiment of the present invention;

[0048] Figure 5 It is a schematic diagram of converting the logic layer script in an embodiment of the present invention;

[0049] Figure 6 It is a schematic diagram of converting as files in an embodiment of the present invention;

[0050] Figure 7 It is a schematic diagram of the generated react component skeleton in an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0051] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0052] The descriptions of Flex projects and React projects are as follows:

[0053] In a multi-page application framework, the code of a transaction page consists of four parts: a common library, a configuration file, a utility class, and page code; the difference is that after compilation, the Flex page will generate an executable swf file as the front-end page, and the React page will generate an html file and a js file, which together constitute the front-end page.

[0054] The mapping relationship between mxml and jsx is as Figure 2 shown. Since both are MVC structures, mapping the model, view, and control in the Flex page to the corresponding positions in the React page can complete the preliminary conversion.

[0055] The mapping relationship between as and js is as follows Figure 3 shown. The classes in as are similar to the classes in js, but the class in js is formally a class and actually an object template. According to the mapping relationship between the two, the logic in as can be extracted into js to achieve the same function.

[0056] In a Flex page (mxml), components can usually be indexed by id. The indexed object is the component object, and any public variable properties and methods can be used (similar to the class characteristics of Java). The state of the property can be changed by this.id.xxx, so as to achieve the effect of page rendering on demand. Due to the characteristics of Flex, components can be indexed when they are initially rendered.

[0057] In React, ref has a similar function to id and can be indexed by js after the component is initially rendered. What ref actually refers to is a ReactDOM after rendering. If this ReactDOM points to a class-based component, the global variable properties, methods, sub-components, etc. of the component can be used through indexing. The usage method is similar to id.

[0058] There are certain differences between the two frameworks of Flex and React, such as data binding, rendering mechanism, etc. Therefore, when migrating projects, the following points need to be noted

[0059] 1. In Flex, view and model are two-way bound; in React, there is only one-way binding from model to view. If the view causes the model to change, state control needs to be done in the onchange function. Therefore, when migrating a project and encountering data binding problems, special handling is required.

[0060] 2. In Flex, when the page starts to be rendered, all DOMs can be directly indexed and manipulated; in React, when the rendering is not complete, there is only a virtual DOM in the program. If you need to manipulate the DOM (that is, use ref or add elements to the page, etc.), it needs to be after the complete rendering, that is, after componentDidMount. Therefore, when dealing with such problems, special handling is required.

[0061] Flex is a J2EE application that can compile running MXML (Flex's markup language) and ActionScript into FLASH applications (swf files). React is a JavaScript library for building user interfaces. Compile js into HTML, css, and js to form a runnable page. The two technologies have many similarities: MVC framework, declarative and component-based. Especially in component-based development, Flex and React are exactly the same. You can build encapsulated components that manage their own state, and then combine them to form complex UIs. Because component logic uses JavaScript instead of templates, it is easy to pass data in the application and keep the state separate from the DOM.

[0062] Moreover, the logic languages (ActionScript and JavaScript) used by both are similar in the core, both are ECMAScript, most of the syntax is the same, and there are only a few differences. In addition, in class components, both have the characteristics of object-oriented development. Flex can index components (objects) by the id of the tag, while React can index components (objects) by the ref of the tag.

[0063] After project verification, Flex projects for general business scenarios (forms) can be quickly recoded into React projects using the idea of component-based development. If the project has a lot of flash animations, it is not recommended to convert it directly into a React project because the difference in animation between the two is very large.

[0064] Based on the above foundation, this embodiment proposes an automatic conversion method for converting a Flex project to a React project, and the process is as follows: Figure 1 As shown, including:

[0065] Step 1: Scan the Flex project to be converted and obtain the mxml page of the Flex project;

[0066] Step 2: Read the mxml file to obtain the rendering layer view and logic layer script;

[0067] Step 3: Convert the scripts of the rendering layer view and the logic layer script respectively;

[0068] Step 4: Convert as file;

[0069] Step 5: Generate a React component skeleton to complete the conversion from a Flex project to a React project.

[0070] The following describes each step separately:

[0071] Step 1: Use Python to scan the target project, list all mxml pages of the target project, and classify all pages according to the base class (such as: BaseModule) inherited by the pages.

[0072] List all APIs used in the target project (i.e., imported APIs), sort them according to the systems to which the APIs belong, and at the same time allow developers to decide: retain, remove, replace.

[0073] List all components used in the target project, including page components and form components. At the same time, you can refer to the mapping table to find out the components that have not been developed and develop them.

[0074] Step 2: Use the Python open-source library lxml to read the mxml file and obtain the rendering layer view and the logic layer script;

[0075] Step 3:

[0076] (1) Rendering layer view conversion

[0077] As Figure 4 shown, for the extracted view layer (a recursive structure), according to the original structure, recursively process all tags in the rendering layer, and the processing rules are as follows: Example: <bbos:CHGroup id=”chg1”> is converted to <bbos.CHGroup ref={e=>{this.chg1=e}}>

[0078] The method for recursively processing all tags in the rendering layer: tag name mapping sub-method and tag attribute mapping sub-method;

[0079] The tag name mapping sub-method is specifically:

[0080] According to the default mapping rules or a preset mapping table, process the tag name. For example: bbos:CHGroup will be processed into bbos.CHGroup. This way of retaining the original name is the most common processing method. In addition, there is also a way of changing the name, such as processing s:button into Button.

[0081] The tag attribute mapping sub-method is specifically:

[0082] Retain the original attributes of the tag, such as: name=“container 1”;

[0083] Replace the Flex tags with React tags according to the default mapping rules or the preset mapping table. Specifically: replace "id" with "ref", and only after the replacement can the tag be operated through "ref", and the function is similar to "id" in Flex; replace the response event functions such as "click" with "onClick", etc., because React has its own set of response event functions, which correspond one by one to those in Flex.

[0084] (2) Conversion of the logic layer script

[0085] Such as Figure 5 As shown, process the extracted script layer (AS-based logic text) into a JS-based script according to the following rules.

[0086] First, convert the way of referencing APIs;

[0087] The import path in AS uses "." as the delimiter; the import path in JS uses " / " as the delimiter, and the import path in JS can be customized according to the framework in the new project;

[0088] Secondly, convert global variables;

[0089] Process the strongly typed variables in AS into weakly typed variables in JS, and retain the initial values of the variables;

[0090] Then, convert the way of declaring global functions;

[0091] Process all functions in AS into arrow functions. The advantage of arrow functions is that global variables and functions can be called anywhere.

[0092] Finally, convert the function content;

[0093] 1) In the function, whenever a component, global variable, or global function on this page is called, it needs to be called through "this.+name";

[0094] 2) The native APIs of Flash used in the function need to be mapped to the native APIs of JS. For example, the Timer timer is mapped to "setInterval" and "setTimeout" in JS, etc.;

[0095] 3) Local functions need to be defined before use. In JS, if an arrow function is defined after use, the function body will be "undefined";

[0096] 4) In addition to the above cases, AS also has some syntax that JavaScript does not have. For example, for each is mapped to for(...of...), AS's forced type conversion (directly removed), and the is type check is processed as typeof xxx of xxx, etc.;

[0097] 5) In addition to the special syntax of AS, custom logic can also be added to the processing logic. For example, ConnectUtil.sendRequest is processed as ConnectUtil.sendRequest (a function for requesting the background in a React project), and the method of obtaining teller information in bbos is modified, etc.

[0098] Step 4: Convert the AS file

[0099] As Figure 6 shown, reference the mxml.script module in the original Python program and encapsulate it into a new module for converting AS to JS.

[0100] First, remove the package in the AS file;

[0101] Secondly, convert public class to export class;

[0102] Then, call mxml.script to process the content of the class, and splice the processing result into a new class;

[0103] Finally, re-encapsulate it into a JS file with the same file name as the original.

[0104] Step 5: Generate the React project skeleton

[0105] As Figure 7 shown, it includes: referencing the component library module, defining the component module, the component variable module, the component logic function module, and the component rendering render module.

[0106] The automatic conversion method in this embodiment also includes converting other contents, specifically:

[0107] The original project may use db files or xml to store the values of some dropdown boxes. The processing method for such files can be:

[0108] 1. When encapsulating the form component, the db file or xml file can be requested in the component, and the corresponding values are parsed and assigned to the dropdown select, so that the same function as the original component can be achieved.

[0109] 2. In H5, data is usually stored in the form of JSON, which is also conducive to requests and processing. Therefore, the db file and xml file can also be parsed into JSON files first. Converting the dictionary into JSON manually requires a large amount of work. This tool additionally writes scripts to convert the db file and xml file into JSON files according to the original structure. The JSON files can be used for quick requests, greatly saving the manual workload.

[0110] The automatic conversion method in this embodiment is combined with the code generator to extract the core elements (including business logic, page elements, request APIs, etc.) from the original Flex code project. According to the similarity with the React framework, through certain rules, it is generated into React project code. Since the generated code is business element code, it can be placed in different React frameworks to form a new React project, with good adaptability. The currently adapted frameworks are: the regular React framework, the react + redux framework, etc.

[0111] As described above, only the specific embodiments of the present invention are provided, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of various equivalent modifications or substitutions, and these modifications or substitutions should be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.

Claims

1. An automatic conversion method for converting a Flex project into a React project, characterized in that, The described automatic conversion method includes: Step 1: Scan the Flex project to be converted to obtain the mxml pages of the Flex project; Step 2: Read the mxml file to obtain the rendering layer view and the logic layer script; Step 3: Convert the scripts of the rendering layer view and the logic layer script respectively; The method for converting the script of the rendering layer view in Step 3 is: For the extracted rendering layer view, recursively process all tags in the rendering layer view according to the original structure, including the tag name mapping sub-method and the tag attribute mapping sub-method; The specific tag name mapping sub-method is: Process the tag names according to the default mapping rules or the preset mapping table; The specific tag attribute mapping sub-method is: Retain the original attributes of the tag, and replace the Flex tags with React tags according to the default mapping rules or the preset mapping table; The method for converting the script of the logic layer script in Step 3 is: First, convert the way of referencing the API; Second, convert the global variables. Specifically: Convert the strongly typed variables in as to the weakly typed variables in js and retain the initial values of the variables; Then, convert the way of declaring global functions. Specifically, process all functions in as as arrow functions; Finally, convert the function content; Step 4: Convert the as file. Specifically: First, remove the package in the as file; Second, convert public class to export class; Then, call mxml.script to process the content of the export class, and splice the processing results into a new class; Finally, repackage it as a js file with the same file name as the original name; Step 5: Generate the React component skeleton to complete the conversion of the Flex project to a React project.

2. The automatic conversion method for converting a Flex project into a React project according to claim 1, characterized in that The specific Step 1 is: Use python to scan the Flex project to be converted to obtain the mxml pages of the Flex project, and classify all pages according to the base class inherited by the pages.

3. The automatic conversion method for converting a Flex project into a React project according to claim 1, characterized in that, The specific Step 2 is: Call the lxml library of python to read the mxml file to obtain the rendering layer view and the logic layer script.

4. The automatic conversion method for converting a Flex project into a React project according to claim 1, characterized in that The React component skeleton includes a reference component library module, a defined component module, a component variable module, a component logic function module, and a component rendering render module.

Images