A dependency-based micro-frontend compatible migration method and system

Abstract

The present invention relates to a dependency-based micro-frontend compatible migration method and system, including configuring a target template set and filling the code of the micro-frontend to be migrated into a corresponding template directory and installing the corresponding template dependency according to a micro-frontend migration command, constructing a target environment code corresponding to the migration target framework, and realizing automatic conversion of the micro-frontend application source code by matching a pre-established code template directory, allowing the micro-frontend application to be integrated on multiple platforms without worrying about the specific environment of the platform, reducing the maintenance cost of the business system, and developers only need to care about the business logic, reducing the workload required to deal with compatibility, and improving work efficiency.

Description

Technical Field

[0001] The present invention relates to the technical field of micro-frontend development, and in particular to a dependency-based micro-frontend compatible migration method and system. Background Art

[0002] In the field of Web development technology, in order to better support increasingly complex business needs and system integration needs, cutting-edge concepts and specific implementation practices such as microservices and micro-frontends have emerged. Microservices refer to splitting a large system server program into several small server programs, and using specific technologies for unified development, integration and deployment; micro-frontends correspond to splitting a large system client program into several small client programs. Since the client program is executed on the client, the server only exposes one entry (i.e., the base) to the client, and the base controls the loading, execution and recycling of other small programs. Usually, a business system not only needs to be able to be used independently as a customer-oriented system, but also should have the ability to be quickly integrated into any platform. For microservices, there are integration frameworks such as Springboot, but there are no mature integration tools for micro-frontends. Most micro-frontend frameworks only implement the base, but lack support for the technical migration of sub-applications, which poses a challenge to the overall architecture of the frontend and the technical solutions for business applications.

[0003] For example, for business system applications in the financial field, the use of Springboot technology stack for development on the server side has been relatively complete, so that the business system can be independently deployed and run as a single application, or easily integrated into various microservice frameworks, and containerized management is performed using technologies such as K8S, forming a very mature set of technical practice solutions in the server-side development field. In the front-end field, although open source micro-front-end frameworks such as Qiankun have rapidly emerged, their microservice solutions compared to the server-side technology system still do not solve how financial business systems can be integrated into multiple platforms and how systems can be migrated between platforms.

[0004] For this problem, many current micro-frontend solutions have achieved rapid integration of independent business systems. Business systems can be easily integrated into a certain micro-frontend framework, but it is difficult to migrate between multiple micro-frontend solutions. On the other hand, when some frameworks are updated with versions, they are prone to interface instability, which requires business developers to spend a lot of experience to deal with environmental compatibility issues. Therefore, in addition to using a unique micro-frontend solution for all business systems, if it is technically possible to achieve smooth migration of business systems between different micro-frontend frameworks with less workload, it is possible to achieve corresponding adaptation and integration of business systems in multiple different micro-frontend frameworks, and it is easier to deal with compatibility issues caused by the iteration of micro-frontend framework versions. Summary of the invention

[0005] In order to address the shortcomings of the prior art, the present invention proposes a dependency-based micro-frontend compatible migration method and system, which realizes the automatic conversion of the micro-frontend application source code by matching a pre-established code template directory, allowing the micro-frontend application to be integrated on multiple platforms without worrying about the specific environment of the platform, thereby reducing the maintenance cost of the business system. Developers only need to care about the business logic, reducing the workload required to deal with compatibility and improving work efficiency.

[0006] To achieve the above objectives, the technical solutions adopted by the present invention include:

[0007] A dependency-based micro-frontend compatible migration method, characterized by comprising:

[0008] S1. Configure a target template set, where the target template set includes at least one set of framework information, template directory, and template dependency corresponding to a migration target framework;

[0009] S2. Receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command;

[0010] S3. Use the target parameters to match the framework information in the target template set to verify whether the target template set supports the migration target framework required by the micro frontend migration command.

[0011] S4. When the target template set does not support the migration target framework required by the micro-frontend migration command, the migration process is stopped and the first error information is fed back;

[0012] S5. When the target template set supports the migration target framework required by the micro-frontend migration command, fill the code of the micro-frontend to be migrated into the corresponding template directory and install the corresponding template dependency to form a temporary code;

[0013] S6. Build the temporary code into the target environment code corresponding to the migration target framework.

[0014] Furthermore, the step S5 includes the sub-steps of:

[0015] S51, creating a temporary directory based on the template directory;

[0016] S52. Extract necessary code items of the code of the micro frontend to be migrated;

[0017] S53, fill the necessary code items into the temporary directory;

[0018] S54. Install corresponding template dependencies to form temporary codes, wherein the template dependencies include an environment dependency library corresponding to the migration target framework.

[0019] Furthermore, the sub-step S53 further includes:

[0020] Determine whether the correspondence between the necessary code items and the items to be filled in the temporary directory matches;

[0021] When it is determined that the correspondence between the necessary code item and the item to be filled in the temporary directory matches, the necessary code item is filled in the temporary directory;

[0022] When it is determined that the correspondence between the necessary code items and the items to be filled in the temporary directory do not match, the migration process is stopped and the second error information is fed back.

[0023] Furthermore, the first error information includes target parameters and lack of target framework support information.

[0024] Furthermore, the second error information includes the first error information and the template directory error information.

[0025] Furthermore, the sub-step S53 further includes:

[0026] When the second error information is fed back, the use of the framework information and template directory corresponding to the second error information is stopped.

[0027] Furthermore, the template directory is a demo example corresponding to the migration target framework.

[0028] The present invention also relates to a dependency-based micro-frontend compatible migration system, which is characterized by comprising:

[0029] Template management module, used to configure the target template set;

[0030] A parameter receiving template is used to receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command;

[0031] The code filling module is used to fill the code of the micro frontend to be migrated into the corresponding template directory;

[0032] Dependency installation module, used to install corresponding template dependencies;

[0033] The application building module is used to build the temporary code into the target environment code corresponding to the migration target framework.

[0034] The present invention also relates to a computer-readable storage medium, characterized in that a computer program is stored on the storage medium, and the computer program implements the above method when executed by a processor.

[0035] The present invention also relates to an electronic device, characterized in that it comprises a processor and a memory;

[0036] The memory is used to store a target template set;

[0037] The processor is used to execute the above method by calling the target template set.

[0038] The beneficial effects of the present invention are:

[0039] By adopting the dependency-based micro-frontend compatible migration method and system described in the present invention, the automatic conversion of the micro-frontend application source code is realized by matching the pre-established code template directory without worrying about the specific environment of the platform, allowing the micro-frontend application to be integrated on multiple platforms, solving the problem of migrating codes between micro-applications on different platforms, reducing the maintenance cost of developers for one set of codes to be compatible with different platforms, reducing the maintenance cost of business systems, and developers only need to care about business logic, reducing the workload required to deal with compatibility, and improving work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 The figure is a flow chart of the dependency-based micro-frontend compatible migration method of the present invention.

[0041] Figure 2 This is a schematic diagram of the structure of the dependency-based micro-frontend compatible migration system of the present invention. DETAILED DESCRIPTION

[0042] In order to more clearly understand the content of the present invention, it will be described in detail with reference to the drawings and embodiments.

[0043] The first aspect of the present invention relates to a process of steps as follows Figure 1 The method shown comprises:

[0044] S1. Configuring a target template set, wherein the target template set includes at least one set of framework information, a template directory, and template dependencies corresponding to a migration target framework.

[0045] The framework information corresponds to the identifying information of the migration target framework, which may include, for example, the common name of the framework, the abbreviation of the framework generally used within the organization, and the version information of the framework. The framework information is used to mark each target framework supported in the existing target template set.

[0046] The template directory is the general code writing rules used by the corresponding framework, especially including the API used by the corresponding framework. Preferably, the template directory can use the demo example of the corresponding migration target framework so that the template directory can achieve the best compatibility. For the demo examples of various frameworks, they generally include the API of the corresponding framework, so the demo example can be used directly as the template directory.

[0047] The template dependency includes the environment dependency library corresponding to the migration target framework. Since almost all existing front-end technology systems are managed using NPM, a common NPM dependency is set up so that each project can build the project into deployable code for the corresponding platform after introducing this dependency.

[0048] S2. Receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command.

[0049] It is preferred to use the NodeJS standard library, process.argv to complete the command line parameter reception, and can support the use of chalk, figlet and other third-party libraries for user interface input and output.

[0050] S3. Use the target parameters to match the framework information in the target template collection to verify whether the target template collection supports the migration target framework required by the micro frontend migration command.

[0051] The target parameters are obtained by extracting key information from the micro-frontend migration command. It can be required to accurately match all items of the corresponding framework information to ensure the accuracy of the migration. A non-opposite matching method can also be used to set some matching items that require complete consistency, and set the remaining matching items to pass the verification without conflict. This is suitable for situations where the target parameters cannot contain all items in the framework information.

[0052] S4. When the target template set does not support the migration target framework required by the micro-frontend migration command, the migration process is stopped and the first error information is fed back.

[0053] The first error message includes the target parameters and the lack of target framework support information, that is, the first error message needs to feedback to the user the execution status of the two operation steps of extracting the target parameters and matching the target parameters with the framework information in the target template set in the micro-frontend migration command, so that the user can judge the error and perform targeted processing. For target parameter extraction errors, it is necessary to adjust the execution method and corresponding extraction strategy of step S2 in a targeted manner; for target parameters and framework information that cannot be matched, on the one hand, it is necessary to check whether the target template set has saved the specific framework. If not, it needs to be added in a targeted manner. On the other hand, it is necessary to check whether there is a problem with the content or matching method of the framework information, resulting in failure to correctly match the target parameters.

[0054] S5. When the target template set supports the migration target framework required by the micro-frontend migration command, fill the code of the micro-frontend to be migrated into the corresponding template directory and install the corresponding template dependency to form a temporary code. Specifically, it includes the following sub-steps: S51. Create a temporary directory based on the template directory; S52. Extract the necessary code items of the code of the micro-frontend to be migrated; S53. Determine whether the correspondence between the necessary code items and the items to be filled in the temporary directory matches. When it is determined that the correspondence between the necessary code items and the items to be filled in the temporary directory matches, fill the necessary code items into the temporary directory. When it is determined that the correspondence between the necessary code items and the items to be filled in the temporary directory does not match, stop the migration process and feedback the second error message. When the second error message is fed back, stop using the framework information and template directory corresponding to the second error message; S54. Install the corresponding template dependency to form a temporary code. The template dependency includes the environment dependency library corresponding to the migration target framework.

[0055] The temporary directory is a corresponding directory copied from the structure and project of the template directory. The code position is left blank and the content to be filled in is marked to form the items to be filled in. The necessary code items are compared with the items to be filled in and filled in the temporary directory according to the preset rules, thereby converting the original code into new code that adapts to the target framework. The second error message includes the first error message and the template directory error message, that is, the feedback of the second error message needs to remind the user to check the configuration errors of the template directory while checking all the items related to the first error message, such as the project settings or project interpretation and the corresponding filling relationship with the code.

[0056] Preferably, the converted new code (temporary code) can also be subjected to corresponding compatibility tests according to the requirements of the target framework. Since the temporary code is made using a template directory based on the demo example settings, it is easy to perform standard compatibility tests of the framework without the user having to perform too many additional settings.

[0057] S6. Build the temporary code into the target environment code corresponding to the migration target framework.

[0058] In actual applications, take NPM dependency as an example. After completing the configuration of the template directory and template dependency, name the dependency micro-env (or any suitable name, which is only for example purposes). To install micro-env, you need to execute npm imicro-env-g. If the business system uses micro-env, you need to add an item "micro-env build--target cool-front" in the scripts field in package.json. --target indicates the environment to be built. Here, you can choose the cool-front micro-frontend solution. Then the compiled static resources should be directly deployed to the cool-front base without worrying about what API the framework uses to load the business system.

[0059] The following operations can be performed for the execution of a specific micro-frontend migration command (shown in pseudo code):

[0060]

[0061]

[0062] After forming the temporary code, build the target environment code by doing the following:

[0063] vue-cli-service build

[0064] Another aspect of the present invention also relates to a system, the structure of which is as follows Figure 2 As shown, including:

[0065] The template management module is used to configure the target template set, including at least one set of framework information, template directory and template dependency corresponding to the migration target framework, and make changes in a timely manner according to the administrator configuration.

[0066] The parameter receiving template is used to receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command. The target parameters need to match the framework information. Therefore, it is necessary to refer to the content of the framework information to set the extraction operation of the micro-frontend migration command.

[0067] The code filling module is used to fill the code of the micro frontend to be migrated into the corresponding template directory, especially to extract the necessary code items of the code of the micro frontend to be migrated and fill the necessary code items into the temporary directory created based on the template directory. When performing the filling, it is also necessary to determine whether the corresponding relationship between the necessary code items and the items to be filled in the temporary directory matches, and promptly feedback the abnormal situation of mismatch.

[0068] The dependency installation module is used to install the corresponding template dependencies. The installed dependencies are preferably public NPM dependencies to make them more applicable.

[0069] The application building module is used to build the temporary code into the target environment code corresponding to the migration target framework.

[0070] By using this system, the above-mentioned processing method can be executed and the corresponding technical effects can be achieved.

[0071] An embodiment of the present invention also provides a computer-readable storage medium capable of implementing all the steps in the method in the above embodiment, wherein a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, all the steps in the method in the above embodiment are implemented.

[0072] An embodiment of the present invention also provides an electronic device for executing the above method. As an implementation device of the method, the electronic device has at least a processor and a memory, and in particular, the memory stores data and related computer programs required for executing the method, such as a target template set, etc., and the processor calls the data and programs in the memory to execute all the steps of the implementation method and obtains the corresponding technical effect.

[0073] Preferably, the electronic device may include a bus architecture, the bus may include any number of interconnected buses and bridges, and the bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripherals, voltage regulators, and power management circuits, which are all well known in the art and are therefore not further described herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same component, i.e., a transceiver, providing a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used to store data used by the processor when performing operations.

[0074] In addition, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operation control) used may include a microprocessor or other processor device and / or a logic device, which receives input and controls the operation of various components of the electronic device; the memory may be one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory, or other suitable devices, which may store the above-mentioned related data information, and may also store a program for executing related information, and the processor may execute the program stored in the memory to realize information storage or processing, etc.; the input unit is used to provide input to the processor, for example, it may be a key or a touch input device; the power supply is used to provide power to the electronic device; the display is used to display display objects such as images and text, for example, it may be an LCD display. The communication module is a transmitter / receiver that sends and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal. Based on different communication technologies, multiple communication modules may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless local area network module, etc. The communication module (transmitter / receiver) is also coupled to a speaker and a microphone via an audio processor to provide an audio output via the speaker and receive an audio input from the microphone, thereby realizing a common telecommunication function. The audio processor may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor is also coupled to a central processor, so that recording can be performed on the machine through the microphone, and the sound stored on the machine can be played through the speaker.

[0075] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0076] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A system that specifies the functions of a box or multiple boxes.

[0077] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a product including an instruction system, which is implemented in the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0078] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps of the functions specified in a box or multiple boxes. Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they know the basic creative concept. Therefore, the attached claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0079] The above is only a preferred specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A dependency-based micro-frontend compatible migration method, characterized in that: include: S1. Configure a target template set, where the target template set includes at least one set of framework information, template directory, and template dependency corresponding to a migration target framework; S2. Receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command; S3. Use the target parameters to match the framework information in the target template set to verify whether the target template set supports the migration target framework required by the micro frontend migration command. S4. When the target template set does not support the migration target framework required by the micro-frontend migration command, the migration process is stopped and the first error information is fed back; S5. When the target template set supports the migration target framework required by the micro-frontend migration command, fill the code of the micro-frontend to be migrated into the corresponding template directory and install the corresponding template dependency to form a temporary code; S6, constructing the temporary code into a target environment code corresponding to the migration target framework; The step S1 includes: the template directory uses a demo example corresponding to the migration target framework to achieve the best compatibility of the template directory; for demo examples of various frameworks, the demo examples include the API corresponding to the framework, and the demo examples can be directly used as the template directory; The template dependency includes the environment dependency library corresponding to the migration target framework. The existing front-end technology system is managed by NPM, so a public NPM dependency is set; after each project introduces the public NPM dependency, the project can be built into deployable code for the corresponding platform; The step S4 includes: the first error information includes the target parameters and the lack of target framework support information, that is, the first error information needs to feedback to the user the execution status of the two operation steps of extracting the target parameters and matching the target parameters with the framework information in the target template set in the micro-frontend migration command, so that the user can judge the error and perform targeted processing; for the target parameter extraction error, the execution method and corresponding extraction strategy of step S2 are adjusted in a targeted manner; for the target parameters and framework information that cannot be matched, on the one hand, check whether the target template set saves the target framework, if not saved, it needs to be added in a targeted manner, and on the other hand, check whether there is a problem with the content or matching method of the framework information, resulting in the inability to correctly match the target parameters.

2. The method according to claim 1, characterized in that The step S5 comprises the following sub-steps: S51, creating a temporary directory based on the template directory; S52. Extract necessary code items of the code of the micro frontend to be migrated; S53, fill the necessary code items into the temporary directory; S54. Install corresponding template dependencies to form temporary codes, wherein the template dependencies include an environment dependency library corresponding to the migration target framework.

3. The method according to claim 2, characterized in that The sub-step S53 further includes: Determine whether the correspondence between the necessary code items and the items to be filled in the temporary directory matches; When it is determined that the correspondence between the necessary code item and the item to be filled in the temporary directory matches, the necessary code item is filled in the temporary directory; When it is determined that the correspondence between the necessary code items and the items to be filled in the temporary directory do not match, the migration process is stopped and the second error information is fed back.

4. The method according to claim 3, characterized in that The first error information includes target parameters and lack of target framework support information.

5. The method according to claim 4, characterized in that The second error information includes the first error information and the template directory error information.

6. The method according to claim 5, characterized in that The sub-step S53 further includes: When the second error information is fed back, the use of the framework information and template directory corresponding to the second error information is stopped.

7. The method according to claim 2, characterized in that The template directory is a demo example corresponding to the migration target framework.

8. A dependency-based micro-frontend compatible migration system, characterized in that: include: Template management module, used to configure the target template set; A parameter receiving template is used to receive the micro-frontend migration command and extract the target parameters from the micro-frontend migration command; The code filling module is used to fill the code of the micro frontend to be migrated into the corresponding template directory; Dependency installation module, used to install corresponding template dependencies; An application building module is used to build the temporary code into the target environment code corresponding to the migration target framework; The system is used to perform the method according to any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: including a processor and a memory; The memory is used to store a target template set; The processor is used to execute the method according to any one of claims 1 to 7 by calling a target template set.

Images