Progressive front-end project reconstruction method and device and medium

Abstract

The invention provides a progressive front-end project reconstruction method and device and a medium, and relates to the technical field of front-end development, and the method comprises the steps: obtaining an old system originally developed by a front-end project and a new system used for reconstructing the front-end project; according to the progressive demand of the front-end project, iterative development of a first part of functions of the front-end project is carried out in the old system, and new development or reconstruction development of a second part of functions of the front-end project is carried out in the new system; a new system is embedded into an old system through a micro-front-end technology based on a routing level or a component level. In the continuous iteration process of the front-end project, iteration and reconstruction are synchronously carried out, the project is gradually migrated to a new system, progressive reconstruction is realized, and the development efficiency is improved.

Description

Technical Field

[0001] The present disclosure at least relates to the field of network technology, and in particular to a progressive front-end project reconstruction method, device and medium. Background Art

[0002] I have seen many such cases in actual work. Some companies have ignored the problem of technical debt, resulting in low development efficiency. R&D personnel continue to iterate on the old technology stack, which affects their personal technical capabilities and hinders their continued promotion. Some R&D personnel even choose to resign, causing human or management losses to the company.

[0003] If conventional full reconstruction is adopted, the problems faced are: the full reconstruction system needs to wait until the system is completely reconstructed before it can be deployed online, which has a high time cost; the needs during the full reconstruction period require the old system and the new system to be developed and iterated at the same time, which increases the development cost; after the full reconstruction, even if it is launched through a grayscale release, some customers will face a brand new system, which has a greater probability of error and higher risk. Summary of the invention

[0004] The technical problem to be solved by the present disclosure is to provide a progressive front-end project reconstruction method, device and medium in view of the above-mentioned deficiencies, so as to solve the problem of how to realize progressive front-end project reconstruction.

[0005] In a first aspect, the present disclosure provides a progressive front-end project reconstruction method, the method comprising:

[0006] Obtain the old system originally developed by the front-end project and the new system used to reconstruct the front-end project;

[0007] According to the progressive requirements of the front-end project, iterative development of the first part of the front-end project functions is carried out in the old system, and new development or reconstruction of the second part of the front-end project functions is carried out in the new system;

[0008] Through micro front-end technology, the new system is embedded into the old system based on the routing level or component level.

[0009] Furthermore, the old system originally developed by the front-end project and the new system used to reconstruct the front-end project are obtained, including:

[0010] Obtain the old system originally developed by the front-end project and keep it running, and the old system can be continuously iterated;

[0011] Build a new system for the front-end project based on a completely new architecture, which can run synchronously with the old system.

[0012] Furthermore, according to the progressive requirements of the front-end project, iterative development of the first part of the front-end project functions is carried out in the old system, and new development or reconstruction development of the second part of the front-end project functions is carried out in the new system, specifically including:

[0013] According to a first requirement of iterating at least part of the content of the first page of the front-end project in the old system in the old system, iteratively developing the code of the first page in the old system;

[0014] According to the second requirement of developing all the contents of the new second page in the new system that the front-end project does not have in the old system, the code of the second page is completely developed in the new system;

[0015] According to the third requirement of reconstructing all the intermediate contents of the third page of the front-end project in the old system in the new system, reconstructing the code of developing all the new intermediate contents of the third page in the new system;

[0016] According to the fourth requirement of reconstructing part of the middle content of the fourth page of the front-end project in the old system in the new system, the code for developing new part of the middle content of the fourth page is reconstructed in the new system.

[0017] Furthermore, the new system is embedded into the old system based on the routing level or component level through micro front-end technology, including:

[0018] Embed the second page into the old system based on the routing level through micro front-end technology;

[0019] Through micro-frontend technology, all new intermediate content of the third page is embedded into the old system based on the routing level;

[0020] Through micro front-end technology based on the component level, the new partial intermediate content of the fourth page is embedded into the old system.

[0021] Furthermore, the second page is embedded into the old system based on the routing level through micro front-end technology, including:

[0022] In the old system, through the micro-frontend technology, a new second page route is opened for the second page, and the new second page route points to the code of the second page newly developed in the new system.

[0023] Furthermore, the new intermediate content of the third page is embedded into the old system based on the routing level through the micro front-end technology, including:

[0024] Get the old non-intermediate content of the third page in the old system;

[0025] In the old system, all new intermediate contents of the third page and the old non-intermediate contents of the third page are combined into a new third page;

[0026] In the old system, a new third-page route is opened for the new third-page through the micro-frontend technology. The new third-page route points to the code of all the new intermediate contents of the third page reconstructed and developed in the new system.

[0027] Keep the old third page and old third page routing in the old system.

[0028] Furthermore, the new intermediate content of the fourth page is embedded into the old system based on the component level through the micro front-end technology, including:

[0029] Obtain the old other part of the middle content of the fourth page and the old non-middle content of the fourth page in the old system;

[0030] In the old system, the new part of the middle content of the fourth page, the old another part of the middle content of the fourth page, and the old non-middle content of the fourth page are combined into a new fourth page;

[0031] In the old system, for the new fourth page, the new part of the middle content of the fourth page is used as the first sub-application, and the other part of the old middle content of the fourth page is used as the second sub-application. The first sub-application and the second sub-application are embedded in the main application. In the main application, the first sub-application is mapped to the code of the new part of the middle content of the fourth page reconstructed and developed in the new system based on the component mode;

[0032] Keep the old fourth page and old fourth page routing in the old system.

[0033] Further, wherein:

[0034] Sources of the third / fourth requirements include requirements to update the technology stack;

[0035] Non-center content includes the top header and side menu.

[0036] In a second aspect, the present disclosure provides a progressive front-end project reconstruction device, the device comprising:

[0037] Acquisition module, used to acquire the old system originally developed by the front-end project and the new system used to reconstruct the front-end project;

[0038] The development module is connected to the acquisition module and is used to iteratively develop the first part of the functions of the front-end project in the old system and to newly develop or reconstruct the second part of the functions of the front-end project in the new system according to the progressive requirements of the front-end project;

[0039] The embedding module is connected to the development module and is used to embed the new system into the old system based on the routing level or component level through the micro front-end technology.

[0040] In a third aspect, the present disclosure provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the progressive front-end project reconstruction method as described above is implemented.

[0041] The present invention provides a progressive front-end project reconstruction method, device and medium. In the continuous iteration process of the front-end project, according to the progressive requirements of the front-end project, the iteration and reconstruction of different functions of the project in different systems are carried out simultaneously, and the new system is embedded into the old system based on the micro front-end, and the project is gradually migrated to the new system, so as to realize progressive reconstruction and improve development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 is a flowchart of a progressive front-end project reconstruction method according to an embodiment of the present disclosure;

[0043] Figure 2 It is a structural schematic diagram of a progressive front-end project reconstruction device according to an embodiment of the present disclosure;

[0044] Figure 3 is a flowchart of a progressive front-end project reconstruction development method according to an embodiment of the present disclosure;

[0045] Figure 4 is a schematic diagram of the structure of a new third page in an embodiment of the present disclosure;

[0046] Figure 5 It is a structural schematic diagram of a new fourth page of an embodiment of the present disclosure. DETAILED DESCRIPTION

[0047] In order to enable those skilled in the art to better understand the technical solution of the present disclosure, the embodiments of the present disclosure will be further described in detail below with reference to the accompanying drawings.

[0048] It should be understood that the specific embodiments and drawings described herein are only used to explain the present disclosure rather than to limit the present disclosure.

[0049] It can be understood that, in the absence of conflict, the various embodiments of the present disclosure and the various features in the embodiments can be combined with each other.

[0050] It can be understood that, for the convenience of description, the drawings of the present disclosure only show parts related to the present disclosure, while parts irrelevant to the present disclosure are not shown in the drawings.

[0051] It can be understood that each module or unit involved in the embodiments of the present disclosure may correspond to only one entity structure, or may be composed of multiple entity structures, or multiple modules or units may be integrated into one entity structure.

[0052] It will be understood that, in the absence of conflict, the functions and steps marked in the flowcharts and block diagrams of the present disclosure may occur in an order different from that marked in the drawings.

[0053] It is understood that the flowcharts and block diagrams of the present disclosure illustrate the possible architectures, functions, and operations of the systems, devices, equipment, and methods according to the various embodiments of the present disclosure. Each box in the flowchart or block diagram may represent a module, unit, program segment, or code, which contains executable instructions for implementing the specified functions. Moreover, each box or combination of boxes in the block diagram and flowchart may be implemented by a hardware-based device that implements the specified functions, or may be implemented by a combination of hardware and computer instructions.

[0054] It can be understood that the modules and units involved in the embodiments of the present disclosure can be implemented by software or hardware, for example, the modules and units can be located in a processor.

[0055] Embodiment 1:

[0056] like Figure 1 As shown, the present disclosure provides a progressive front-end project reconstruction method, the method comprising:

[0057] S1. Obtain the old system originally developed by the front-end project and the new system used to reconstruct the front-end project;

[0058] S2. According to the progressive requirements of the front-end project, iterative development of the first part of the front-end project functions is carried out in the old system, and new development or reconstruction of the second part of the front-end project functions is carried out in the new system;

[0059] S3. Embed the new system into the old system based on the routing level or component level through micro front-end technology.

[0060] In this embodiment, during the continuous iteration of the front-end project, according to the progressive needs of the front-end project, the iteration and reconstruction of different functions of the project in different systems are carried out simultaneously, the new system is embedded into the old system based on the micro front-end, and the project is gradually migrated to the new system to achieve progressive reconstruction and improve development efficiency. Figure 1 The method shown is applicable to Figure 2 The device shown.

[0061] Specifically, the progressive reconstruction of the front-end project means that in the continuous iteration process of the project, iteration and reconstruction are performed simultaneously to gradually migrate the project to the new technology stack. This can not only ensure the continuous iteration of the system and maintain the vitality of the system, but also gradually reduce technical debt, improve development efficiency, enhance the technical capabilities of R&D personnel, and lay the foundation for the long-term development of the system. Therefore, this embodiment provides a progressive front-end project reconstruction method based on micro front-end.

[0062] Progressive refactoring can solve the following problems: Progressive refactoring is to gradually replace the functions of the original system on the basis of the operation of the original system until it is completely replaced. One module or one page can be refactored each time. It is a strategy of small steps and fast progress with very low time cost; new requirements can be selected for development in the new system, so that the old system (original system) does not involve the development of new requirements, saving development costs; customers only need to enter new pages in the new system, so that any problems will be controlled within the scope of the new system, effectively controlling risks. The new system refers to the refactored system, and the old system refers to the system before the refactoring.

[0063] The reason for choosing micro frontend technology as a tool for progressive refactoring: Micro frontends can embed page components of one system into another system. Based on micro frontends, new system pages can be embedded into the old system to achieve the need to isolate the two systems. Micro frontends can embed the system. Based on the refactoring method designed in this way, the refactored system can be completely isolated from the system and code before the refactoring. The new system starts from scratch and is only embedded into the old system through micro frontends to achieve the purpose of isolating the new and old systems.

[0064] In one implementation, S1, obtaining an old system originally developed for a front-end project and a new system for reconstructing the front-end project, specifically includes:

[0065] Obtain the old system originally developed by the front-end project and keep it running, and the old system can be continuously iterated;

[0066] Build a new system for the front-end project based on a completely new architecture, which can run synchronously with the old system.

[0067] In this embodiment, in order to achieve progressive reconstruction, the following conditions are required: the existing system cannot be directly abandoned, it must remain running and can be continuously iterated; a new system based on a new architecture is built, and the system and the existing system can run synchronously; the iterative functions continue to be developed on the existing system, but the new functions should be developed on the new system; the new system can be embedded in the existing system through routing, and when the user accesses the new function, it can be seamlessly switched to the new system; the parts that need to be reconstructed are gradually migrated to the new system through routing. Micro front-end technology can meet the embedding based on the routing level or component level, and can achieve the above-mentioned progressive reconstruction goals.

[0068] Putting aside the technology stack and tools used, the following points should be noted when performing a front-end project refactoring: Do not affect the use of the currently running system (old system); The refactored system (new system) is decoupled from the current running system as much as possible (separate two or more components, systems or functions that were originally closely connected and interdependent, so that they can be operated, modified or expanded independently without causing too much impact on each other). Because system refactoring is mostly a technical requirement rather than a business requirement. Technical requirements should not have a significant impact on the currently running system. From the perspective of refactoring, the reconstructed system is decoupled from the running system as much as possible to minimize the impact.

[0069] In one embodiment, S2, according to the progressive requirements of the front-end project, iterative development of the first part of the functions of the front-end project is performed in the old system, and new development or reconstruction development of the second part of the functions of the front-end project is performed in the new system, specifically including:

[0070] According to a first requirement of iterating at least part of the content of the first page of the front-end project in the old system in the old system, iteratively developing the code of the first page in the old system;

[0071] According to the second requirement of developing all the contents of the new second page in the new system that the front-end project does not have in the old system, the code of the second page is completely developed in the new system;

[0072] According to the third requirement of reconstructing all the intermediate contents of the third page of the front-end project in the old system in the new system, reconstructing the code of developing all the new intermediate contents of the third page in the new system;

[0073] According to the fourth requirement of reconstructing part of the middle content of the fourth page of the front-end project in the old system in the new system, the code of developing new part of the middle content of the fourth page is reconstructed in the new system.

[0074] In this embodiment, if Figure 3 As shown, the development content during system reconstruction can be divided into three types according to the type, and different development strategies need to be used in a targeted manner: Iteration of pages corresponding to existing routes: only do code iteration development on the original system (old system); Development of brand new pages corresponding to new routes: only do code development on the new system; Reconstruction of pages corresponding to existing routes: only do code reconstruction development on the new system, the old system route does not change, and a new route is opened to point to the new system, which can facilitate comparative testing.

[0075] Refactoring refers to redesigning, replanning, and redeveloping existing functions, and generally solves some current pain points. Refactoring is generally a technical requirement (such as updating existing functions in the old system to the new technology stack). Iteration refers to adding new functions to existing functions or improving new functions. Iteration requirements are generally business requirements.

[0076] The new system refers to the refactored system, which can be compared before and after the refactoring. Generally, refactoring is a technical requirement, but it can also be a business requirement. If the refactoring is purely to ensure that the functions remain unchanged, it is generally proposed by the developer. If the functions of the page itself are increased, decreased or modified, and there are also modifications at the code level, then it may be a requirement proposed by the business side. Iterative requirements refer to new requirements for continuing to develop on existing pages.

[0077] In one implementation, S3, embedding the new system into the old system based on the routing level or the component level through the micro front-end technology, specifically including:

[0078] Embed the second page into the old system based on the routing level through micro front-end technology;

[0079] Through micro-frontend technology, all new intermediate content of the third page is embedded into the old system based on the routing level;

[0080] Through micro front-end technology based on the component level, the new partial intermediate content of the fourth page is embedded into the old system.

[0081] In this embodiment, the old front-end application must have a corresponding method for opening routing. Different development frameworks use different routing systems, but all have the function of opening routing. Apps that have changes in the URL that trigger page changes all have methods for opening routing, but the means of implementation are different. Brand-new business requirements (new routing) are developed on the new system. Each time a page is reconstructed, a new route is opened to point to the new system. Routes and pages are in a one-to-one correspondence. If you want to reconstruct a page, you can first open a new route to point to the micro-front-end sub-application.

[0082] In one implementation, the second page is embedded into the old system based on the routing level through the micro front-end technology, specifically including:

[0083] In the old system, through the micro-frontend technology, a new second page route is opened for the second page, and the new second page route points to the code of the second page newly developed in the new system.

[0084] In this embodiment, the new system refers to a front-end reconstruction system based on a micro-front-end. The content developed in the new system is the content of the reconstructed old system. At the same time, during the reconstruction process, there may be new requirements that have not been developed in the old system. During the reconstruction process, the new requirements are incorporated into the reconstructed front-end project for development. Therefore, the content developed in the new system = reconstruction of the old system + development of new requirements (on demand); the front-end system renders different pages through the routing function. The old system has a routing function. Embedding means that a certain page originally mapped the routing of the old system to the code of the old system. Now the routing of the old system is mapped to the micro-front-end component. The micro-front-end component points to the code of the new system, realizing the old system as the base and using the new system to implement the function of the page to be reconstructed.

[0085] In one implementation, all new intermediate contents of the third page are embedded into the old system based on the routing level through the micro front-end technology, specifically including:

[0086] Get the old non-intermediate content of the third page in the old system;

[0087] In the old system, all new intermediate contents of the third page and the old non-intermediate contents of the third page are combined into a new third page;

[0088] In the old system, a new third-page route is opened for the new third-page through the micro-frontend technology. The new third-page route points to the code of all the new intermediate contents of the third page reconstructed and developed in the new system.

[0089] Keep the old third page and old third page routing in the old system.

[0090] In this embodiment, if Figure 4 As shown in the figure, taking a common backend management system as an example, the general page of the system will contain the following three parts: top title, side menu, and middle content. The middle content part generally points to different page codes according to the page route. The top title and menu are both existing functions in the old system. This part belongs to the basic functions and generally does not need to be reconstructed, or it is reconstructed in the final stage of the entire system when all pages are about to be reconstructed. Completing this part also means the completion of the reconstruction of the entire system. The new route points to the new page, that is, the new code after reconstruction. The old route points to the old page, that is, the old code before reconstruction. Page routing refers to the jump and data transfer between different pages in the application. The Router module is provided. Through different URL addresses, page routing can be easily performed and different pages can be easily accessed.

[0091] When the system is refactored, the refactored page is embedded as the intermediate content (with a micro front end) in the old system. Through the routing function of the old system, the refactored page ( Figure 4The embedded pages in the are routed to the new system, and the unreconstructed pages still point to the old system. This can completely isolate the new system from the old system without affecting the old system.

[0092] In the front-end SPA (Single Page Application) system, page jumps are achieved through routing without reloading the entire application. For example, the function implemented by the front-end routing is the mapping of URL addresses to pages, and one route is mapped to one page. This means assigning new routes to point to the reconstructed new system controlled by the micro-frontend. Overloading is to rewrite a class in a class, with the same method name but different parameters, and the return type can be the same or different.

[0093] For example, a page route / route1 originally pointed to the code of the old system in the old system. On the basis of retaining the page route / route1, the code of the old system is replaced with a micro-frontend component. The micro-frontend component points to the micro-frontend sub-application. At this time, / route1 renders the page corresponding to the sub-application.

[0094] In one implementation, the new intermediate content of the fourth page is embedded into the old system based on the component level through the micro front-end technology, specifically including:

[0095] Obtain the old other part of the middle content of the fourth page and the old non-middle content of the fourth page in the old system;

[0096] In the old system, the new part of the middle content of the fourth page, the old another part of the middle content of the fourth page, and the old non-middle content of the fourth page are combined into a new fourth page;

[0097] In the old system, for the new fourth page, the new part of the middle content of the fourth page is used as the first sub-application, and the other part of the old middle content of the fourth page is used as the second sub-application. The first sub-application and the second sub-application are embedded in the main application. In the main application, the first sub-application is mapped to the code of the new part of the middle content of the fourth page reconstructed and developed in the new system based on the component mode;

[0098] Keep the old fourth page and old fourth page routing in the old system.

[0099] In this embodiment, if Figure 5 As shown, consider a scenario where part of the intermediate content belongs to the new system and part to the old system. Figure 4 Not exactly the same. Figure 4 This means that the embedded page is a completely reconstructed system. Figure 5Refers to a mixed mode in which part of the system is before reconstruction and part of the system is after reconstruction.

[0100] Many micro frontend tools support methods based on the routing level mapping to sub-applications, but the routing level does not meet the Figure 5 The scenario shown is a scenario where the main application and sub-application exist on the same page at the same time, because it is necessary to support the coexistence of sub-applications and main applications. The main sub-application is a concept in micro-frontends. The main application refers to the object that provides the micro-frontend service interface (embedded object), and the sub-application refers to the object that consumes the micro-frontend service interface (embedded object). For example, the qiankun1.0 version can only map sub-applications based on routes, not components. Figure 5 The situation in this example cannot be achieved in qiankun 1.0.

[0101] To cope with this scenario, micro-frontend tools use a multi-instance mode, that is, a mapping mode based on a component mode, which means that multiple sub-applications are allowed to exist at the same time, that is, it is not a mode that uses a routing address to map applications, but a mode that manually starts sub-applications. Currently, some mainstream micro-frontend tools on the market support this mode. Taking vue (a JavaScript framework for building user interfaces) as the main application as an example, you can write a component for loading a micro-frontend as follows:

[0102]

[0103] The functions of this code are as follows: create a vue component to load the qiankun sub-application; pass the vue-router related information of the main application to the sub-application through props; enable the sandbox mode to isolate the CSS style. This can ensure that more refactoring scenarios are met. This embodiment does not focus on a certain technology, but provides a general front-end refactoring methodology.

[0104] In micro front-end technology, there are two important terms: the embedded one is called the micro front-end base or main application, and the embedded one is called the micro front-end sub-application. To implement micro front-end, both the main application and the sub-application need to be modified for the micro front-end framework, which is a code-level modification for the micro front-end framework used.

[0105] In one embodiment, wherein:

[0106] Sources of the third / fourth requirements include requirements to update the technology stack;

[0107] Non-center content includes the top header and side menu.

[0108] In this embodiment, after the engineering of Web front-end development matures, various new technologies emerge in an endless stream, and the changes in front-end development technology can be described as "changing with each passing day". Driven by the open source community, various front-end frameworks, libraries and tools continue to emerge, such as from JQuery to React, Vue, Angular, from Gulp, Grunt to Webpack, Vite, from CoffeeScript to TypeScript, etc. These new technologies and tools not only provide more efficient and convenient development methods, but also promote the advancement and standardization of front-end technology.

[0109] At the same time, the challenges faced by front-end developers are not only learning and mastering new technologies, but also upgrading and engineering the project's dependencies. Many projects have accumulated a large amount of code and dependency libraries in the long-term development process. If they are not upgraded and transformed in time, it may lead to the accumulation of "technical debt", that is, the version of the project's dependency library is too low, making it difficult to introduce new features or unable to meet current needs. At the same time, with the development of business and the advancement of technology, whether from the demand side or from the perspective of R&D comfort, it may be urgent to introduce a new technology stack.

[0110] However, for large projects, full migration to a new technology stack is a difficult task that requires a lot of time and manpower, and may not necessarily bring obvious positive effects. The new technology stack refers to any technology stack that improves the system architecture.

[0111] Based on the actual situation of the company, most of the company's projects have been accumulated for many years, with huge amounts of code, complex dependencies, and varying degrees of engineering. These projects are often the core business of the company, so large-scale reconstruction is not easy.

[0112] Therefore, a process method using micro front-end technology as a tool for progressive reconstruction of the front-end system is provided to solve the pain points of high time and labor costs of the traditional full reconstruction system process, including: Technical architecture: Provide a technical architecture for organizing old and new projects when using micro front-ends as progressive front-end projects for reconstruction. This architecture can embed new projects into old projects and simultaneously perform reconstruction and business demand development; Process: Provide a development process that is recommended to be followed when using micro front-ends as progressive front-end projects for reconstruction, so that less human resources are consumed during reconstruction, the scope of impact is smaller, and the project security is higher; Configuration: Provide a configuration that is recommended to be used when using micro front-ends as progressive front-end projects for reconstruction, which can meet more system scenarios.

[0113] Micro front-ends are used to carry new projects in front-end reconstruction so that they can be embedded in old projects to achieve synchronous development of new and old projects, that is, progressive reconstruction. It can also be used to carry new projects. You can also choose iframe as an embedding solution. However, iframe itself is not a complete engineering solution. The inability of its internal components to be positioned relative to the old project window is the most serious flaw of this solution. At the same time, the cross-system communication of iframe is also relatively complicated. That is, iframe (creating an inline frame containing another document) can also be used as an embedding tool, but it has the following obvious pain points, which makes it impossible to choose: the dialog box that pops up in the iframe cannot be centered relative to the overall page; the iframe cannot save the url (uniform resource locator) status; iframe is very complicated to realize communication between two systems. Url is generally used for front-end routing status, used to map from address to page, or save some current status of the page such as request conditions.

[0114] The reconstruction method provided in this embodiment is very suitable for use in the middle office systems in the banking, communications and other industries. These systems are usually developed at an early time, and the technology stack used is relatively backward now. In addition, due to long-term iterations and the lack of regular and effective code review mechanisms, these projects have accumulated a considerable amount of technical debt. Since most of these systems are the core systems of the company, they cannot meet the conditions for overall reconstruction. In this scenario, the incremental reconstruction method can effectively ensure the stable operation of the original system while partially reconstructing the original system.

[0115] Embodiment 2:

[0116] like Figure 2 As shown, the present disclosure provides a progressive front-end project reconstruction device, the device comprising:

[0117] Acquisition module 1 is used to acquire the old system originally developed by the front-end project and the new system used to reconstruct the front-end project;

[0118] Development module 2, connected to acquisition module 1, is used to iteratively develop the first part of the functions of the front-end project in the old system and to newly develop or reconstruct the second part of the functions of the front-end project in the new system according to the progressive requirements of the front-end project;

[0119] The embedding module 3 is connected to the development module 2 and is used to embed the new system into the old system based on the routing level or the component level through the micro front-end technology.

[0120] In one embodiment, the acquisition module 1 specifically includes:

[0121] Obtain the old system unit, which is used to obtain the old system originally developed by the front-end project and keep it running, and the old system can be continuously iterated;

[0122] Get new system units to build a new system for the front-end project based on a completely new architecture, which can run synchronously with the old system.

[0123] In one embodiment, the development module 2 specifically includes:

[0124] An iterative development unit, configured to iteratively develop the code of the first page in the old system according to a first requirement of iterating at least part of the content of the first page of the front-end project in the old system in the old system;

[0125] A new development unit is used to completely develop the code of the second page in the new system according to the second requirement of developing all the contents of the new second page that the front-end project does not have in the old system in the new system;

[0126] A first refactoring unit is used to refactor the code for developing all new intermediate contents of the third page in the new system according to a third requirement of refactoring all the intermediate contents of the third page of the front-end project in the old system in the new system;

[0127] The second reconstruction unit is used to reconstruct the code of developing new partial intermediate content of the fourth page in the new system according to the fourth requirement of reconstructing partial intermediate content of the fourth page of the front-end project in the old system in the new system.

[0128] In one embodiment, the embedding module 3 specifically includes:

[0129] A first embedding unit is used to embed the second page into the old system based on the routing level by using the micro front-end technology;

[0130] The second embedding unit is used to embed all new intermediate contents of the third page into the old system based on the routing level by using the micro front-end technology;

[0131] The third embedding unit is used to embed the new partial intermediate content of the fourth page into the old system based on the component level by using the micro front-end technology.

[0132] In one embodiment, the first embedded unit is specifically used for:

[0133] In the old system, through the micro-frontend technology, a new second page route is opened for the second page, and the new second page route points to the code of the second page newly developed in the new system.

[0134] In one embodiment, the second embedded unit is specifically used for:

[0135] Get the old non-intermediate content of the third page in the old system;

[0136] In the old system, all new intermediate contents of the third page and the old non-intermediate contents of the third page are combined into a new third page;

[0137] In the old system, a new third-page route is opened for the new third-page through the micro-frontend technology. The new third-page route points to the code of all the new intermediate contents of the third page reconstructed and developed in the new system.

[0138] Keep the old third page and old third page routing in the old system.

[0139] In one embodiment, the third embedded unit is specifically used for:

[0140] Obtain the old other part of the middle content of the fourth page and the old non-middle content of the fourth page in the old system;

[0141] In the old system, the new part of the middle content of the fourth page, the old another part of the middle content of the fourth page, and the old non-middle content of the fourth page are combined into a new fourth page;

[0142] In the old system, for the new fourth page, the new part of the middle content of the fourth page is used as the first sub-application, and the other part of the old middle content of the fourth page is used as the second sub-application. The first sub-application and the second sub-application are embedded in the main application. In the main application, the first sub-application is mapped to the code of the new part of the middle content of the fourth page reconstructed and developed in the new system based on the component mode;

[0143] Keep the old fourth page and old fourth page routing in the old system.

[0144] In one embodiment, wherein:

[0145] Sources of the third / fourth requirements include requirements to update the technology stack;

[0146] Non-center content includes the top header and side menu.

[0147] Embodiment 3:

[0148] Embodiment 3 of the present disclosure provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the progressive front-end project reconstruction method as described in Embodiment 1 is implemented, or the progressive front-end project reconstruction device as described in Embodiment 2 is implemented.

[0149] The computer-readable storage medium includes volatile or non-volatile, removable or non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, computer program elements or other data). Computer-readable storage media include, but are not limited to, RAM (Random Access Memory), ROM (Read-Only Memory), EEPROM (Electrically Erasable Programmable read only memory), flash memory or other memory technology, CD-ROM (Compact Disc Read-Only Memory), digital versatile disk (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store the desired information and can be accessed by a computer.

[0150] In addition, the present disclosure may also provide a computer device, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor runs the computer program stored in the memory, the processor executes the progressive front-end project reconstruction method as described in Example 1. The computer device may be the progressive front-end project reconstruction device as described in Example 2.

[0151] The memory is connected to the processor, the memory may be a flash memory or a read-only memory or other memory, and the processor may be a central processing unit or a single-chip microcomputer.

[0152] Embodiments 1-3 of the present disclosure provide a method, device and medium for progressive front-end project reconstruction. During the continuous iteration of the front-end project, according to the progressive requirements of the front-end project, the iteration and reconstruction of different functions of the project in different systems are performed simultaneously, and the new system is embedded into the old system based on the micro front-end, and the project is gradually migrated to the new system to achieve progressive reconstruction and improve development efficiency.

[0153] It is to be understood that the above embodiments are merely exemplary embodiments used to illustrate the principles of the present disclosure, but the present disclosure is not limited thereto. For those of ordinary skill in the art, various modifications and improvements can be made without departing from the spirit and substance of the present disclosure, and these modifications and improvements are also considered to be within the scope of protection of the present disclosure.

Claims

1. A progressive front-end project reconstruction method, characterized in that: The method comprises: Obtain the old system originally developed by the front-end project and the new system used to reconstruct the front-end project; According to the progressive requirements of the front-end project, iterative development of the first part of the front-end project functions is carried out in the old system, and new development or reconstruction of the second part of the front-end project functions is carried out in the new system; Through micro front-end technology, the new system is embedded into the old system based on the routing level or component level.

2. The method according to claim 1, characterized in that Obtain the old system originally developed by the front-end project and the new system used to reconstruct the front-end project, including: Obtain the old system originally developed by the front-end project and keep it running, and the old system can be continuously iterated; Build a new system for the front-end project based on a completely new architecture, which can run synchronously with the old system.

3. The method according to claim 1 or 2, characterized in that: According to the progressive requirements of the front-end project, iterative development of the first part of the front-end project functions is carried out in the old system, and new development or reconstruction of the second part of the front-end project functions is carried out in the new system, including: According to a first requirement of iterating at least part of the content of the first page of the front-end project in the old system in the old system, iteratively developing the code of the first page in the old system; According to the second requirement of developing all the contents of the new second page in the new system that the front-end project does not have in the old system, the code of the second page is completely developed in the new system; According to the third requirement of reconstructing all the intermediate contents of the third page of the front-end project in the old system in the new system, reconstructing the code of developing all the new intermediate contents of the third page in the new system; According to the fourth requirement of reconstructing part of the middle content of the fourth page of the front-end project in the old system in the new system, the code for developing new part of the middle content of the fourth page is reconstructed in the new system.

4. The method according to claim 3, characterized in that Through micro front-end technology, the new system is embedded into the old system based on the routing level or component level, including: Embed the second page into the old system based on the routing level through micro front-end technology; Through micro-frontend technology, all new intermediate content of the third page is embedded into the old system based on the routing level; Through micro front-end technology based on the component level, the new partial intermediate content of the fourth page is embedded into the old system.

5. The method according to claim 4, characterized in that Through the micro front-end technology, the second page is embedded into the old system based on the routing level, including: In the old system, through the micro-frontend technology, a new second page route is opened for the second page, and the new second page route points to the code of the second page newly developed in the new system.

6. The method according to claim 4, characterized in that Through the micro-frontend technology, all new intermediate contents of the third page are embedded into the old system based on the routing level, including: Get the old non-intermediate content of the third page in the old system; In the old system, all new intermediate contents of the third page and the old non-intermediate contents of the third page are combined into a new third page; In the old system, a new third-page route is opened for the new third-page through the micro-frontend technology. The new third-page route points to the code of all the new intermediate contents of the third page reconstructed and developed in the new system. Keep the old third page and old third page routing in the old system.

7. The method according to claim 4, characterized in that Through the micro front-end technology, the new intermediate content of the fourth page is embedded into the old system based on the component level, including: Obtain the old other part of the middle content of the fourth page and the old non-middle content of the fourth page in the old system; In the old system, the new part of the middle content of the fourth page, the old another part of the middle content of the fourth page, and the old non-middle content of the fourth page are combined into a new fourth page; In the old system, for the new fourth page, the new part of the middle content of the fourth page is used as the first sub-application, and the other part of the old middle content of the fourth page is used as the second sub-application. The first sub-application and the second sub-application are embedded in the main application. In the main application, the first sub-application is mapped to the code of the new part of the middle content of the fourth page reconstructed and developed in the new system based on the component mode; Keep the old fourth page and old fourth page routing in the old system.

8. The method according to claim 6 or 7, characterized in that: in: Sources of the third / fourth requirements include requirements to update the technology stack; Non-center content includes the top header and side menu.

9. A progressive front-end project reconstruction device, characterized in that: The device comprises: Acquisition module, used to acquire the old system originally developed by the front-end project and the new system used to reconstruct the front-end project; The development module is connected to the acquisition module and is used to iteratively develop the first part of the functions of the front-end project in the old system and to newly develop or reconstruct the second part of the functions of the front-end project in the new system according to the progressive requirements of the front-end project; The embedding module is connected to the development module and is used to embed the new system into the old system based on the routing level or component level through the micro front-end technology.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the progressive front-end project reconstruction method according to any one of claims 1 to 8 is implemented.

Images