Construction method and device of front-end architecture, equipment and storage medium

Abstract

The invention discloses a construction method and device of a front-end architecture, equipment and a storage medium, and relates to the technical field of micro front-ends, and the construction method of the front-end architecture comprises the steps: obtaining a business demand and a target function of an entity business field, and an evaluation result of a structure and a module of a single application; determining a front-end technology stack and a micro-front-end architecture according to the business requirement, the target function and the evaluation result; and determining a micro application framework and a main application framework according to the service requirements, the micro front-end architecture and the front-end technology stack, and completing the construction of the front-end architecture. According to the method and the system, functional modules, routing management and state management are determined, so that separation and independence of service logic are realized, the front-end system is ensured to have efficient modularization, good maintainability and flexible expansion capability, a front-end architecture which can be incrementally upgraded and progressively reconstructed is constructed, and the system and the system have the advantages of being simple in structure and convenient to use. And digital-intelligent transformation and future business growth demands of enterprises can be supported.

Description

Technical Field

[0001] The present application relates to the field of micro-frontend technology, and in particular to a method, device, equipment and storage medium for constructing a front-end architecture. Background Art

[0002] With the deepening of digitalization and intelligentization, physical business operators need to achieve comprehensive upgrades and transformation of their businesses through information technology. Traditional management methods are difficult to cope with the complexity of multiple business scenarios, such as the unified collection and analysis of various data such as space management, investment promotion, passenger flow, and sales. In addition, achieving efficient collaboration among multiple roles (including brands, suppliers, etc.) and improving resource utilization efficiency and value closed loop have become key tasks in market competition. Therefore, operators are in urgent need of a set of digital solutions to help them integrate business activities and data and promote the improvement and transformation of operational efficiency.

[0003] In the process of promoting digitalization, enterprises currently generally adopt a multi-system parallel approach, with different technology stacks and platforms used to manage different business areas, such as: (1) Investment promotion system: used to manage the entire process of leads, showings, contracts and delivery. (2) Operation system: supports daily inspections, fault management, and tracking and monitoring of merchant operation data. (3) Customer flow and sales system: collects real-time customer flow and transaction data through sensors or sales platforms to achieve data monitoring and analysis. (4) Equipment management system: covers the maintenance, management, repair and status monitoring processes of shopping mall equipment. These systems often use different front-end frameworks and technology stacks (such as React, Vue, Angular, etc.), are independently developed and deployed, and have weak data and business logic connections. Enterprises try to connect data between these systems through APIs and data middle platforms to support management decisions.

[0004] Although this multi-system parallel model has met the needs of various business departments to a certain extent, it has also exposed a series of problems: (1) System fragmentation: The data between systems are isolated and cannot be efficiently integrated and analyzed, resulting in poor information flow and difficulty in forming a data closed loop. (2) High maintenance costs: Different systems use their own technology stacks, which increases the complexity of maintenance and technology upgrades and causes high operating costs. (3) High upgrade risks: There is a risk of business interruption when fully reconstructing or upgrading existing systems, and it is difficult to ensure continuous operation and system stability. (4) Low development and collaboration efficiency: Progress asynchrony is prone to occur during cross-development and integration, and compatibility between different systems also becomes a challenge. Therefore, how to build a front-end architecture that can be incrementally upgraded and gradually reconstructed has become an urgent problem to be solved.

[0005] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0006] The purpose of this application is to provide a method, device, equipment and storage medium for constructing a front-end architecture, aiming to solve the technical problem of how to construct a front-end architecture that can be incrementally upgraded and progressively reconstructed.

[0007] To achieve the above objectives, the present application proposes a method for constructing a front-end architecture, the method comprising:

[0008] Obtain business requirements, target functions, and evaluation results of the structure and modules of the monolithic application in the physical business field;

[0009] Determine the front-end technology stack and micro-front-end architecture according to the business requirements, the target functions and the evaluation results;

[0010] Determine the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack to complete the construction of the front-end architecture.

[0011] In one embodiment, the steps of determining the micro-application framework and the main application framework according to the business requirements, the micro-frontend architecture, and the frontend technology stack, and completing the construction of the frontend architecture include:

[0012] Determine micro-application functions according to the business requirements and the micro-frontend architecture;

[0013] Determine deployment rules and development rules for each micro-application based on the micro-application function;

[0014] Determine a micro-application framework according to the deployment rules and the development rules;

[0015] Build a unified development environment based on the front-end technology stack;

[0016] Based on the micro front-end architecture and the development environment, the main application framework is determined to complete the construction of the front-end architecture.

[0017] In one embodiment, the step of determining the deployment rules and development rules of each micro-application according to the micro-application function includes:

[0018] Obtain business logic and interface design based on the micro-application functions;

[0019] Determine the development rules of each micro-application according to the business logic and the interface design;

[0020] Set up a continuous integration / continuous delivery process according to the development rules described;

[0021] Determine the deployment rules of the micro-application according to the continuous integration / continuous delivery process.

[0022] In one embodiment, the step of determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions, and the evaluation results includes:

[0023] Determine the selection criteria for the front-end technology stack based on the business requirements and target functions;

[0024] Determine the front-end technology stack according to the selection criteria and the evaluation results;

[0025] Determine the relationship between the main application framework and the micro-application according to the business requirements, the target functions and the evaluation results, wherein the routing and services of the micro-application are based on a central registration center;

[0026] Developing a standardized communication protocol based on the settings of the central registration center;

[0027] A micro front-end architecture is determined according to the relationship between the main application framework and the micro application, the central registration center, and the standardized communication protocol.

[0028] In one embodiment, after the step of determining the micro-application framework and the main application framework according to the business requirements, the micro-frontend architecture, and the frontend technology stack, and completing the step of building the frontend architecture, the step further includes:

[0029] Performing integration testing on the main application framework and the micro-application framework based on the micro-frontend architecture, the routing management, and the state management to obtain test results;

[0030] The main application framework and the micro application framework are adjusted according to the test results.

[0031] In one embodiment, after the step of determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results, the step further includes:

[0032] Determine the style isolation strategy based on the front-end technology stack;

[0033] Use the style isolation strategy to isolate the style of each micro application.

[0034] In one embodiment, the micro-application uses an independent state management library instance;

[0035] The independent state management library instance is obtained according to the state management requirements, initial state and state change logic;

[0036] The initial state and the state change logic are obtained according to the configuration of the state management library;

[0037] The state management library is determined according to the front-end technology stack;

[0038] The state management requirements are determined based on the micro-application framework.

[0039] In addition, to achieve the above purpose, the present application also proposes a front-end architecture construction device, the device comprising:

[0040] The data acquisition module is used to obtain the business requirements, target functions and evaluation results of the structure and modules of the single application in the physical business field;

[0041] A first building module is used to determine the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results;

[0042] The second construction module is used to determine the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack to complete the construction of the front-end architecture.

[0043] In addition, to achieve the above-mentioned purpose, the present application also proposes a front-end architecture construction device, the device comprising: a memory, a processor, and a computer program stored on the memory and executable on the processor, the computer program being configured to implement the steps of the front-end architecture construction method as described above.

[0044] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the method for constructing the front-end architecture as described above are implemented.

[0045] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, it implements the steps of the method for constructing the front-end architecture as described above.

[0046] One or more technical solutions proposed in this application have at least the following technical effects:

[0047] Obtain the business requirements, target functions and evaluation results of the structure and modules of the single application in the physical business field; determine the front-end technology stack and micro-front-end architecture based on the business requirements, target functions and evaluation results; determine the micro-application framework and the main application framework based on the business requirements, micro-front-end architecture and the front-end technology stack to complete the construction of the front-end architecture. Obtaining the business requirements, target functions and evaluation results of the structure and modules of the single application in the physical business field is the first step of the project. This process clarifies the challenges and specific functional requirements faced in actual operations through in-depth research and communication with key stakeholders, while evaluating the advantages and disadvantages of the existing system, laying the foundation for subsequent system design and technology selection. This stage ensures that subsequent development is closely aligned with actual business needs, thereby improving the practicality and user satisfaction of the system and avoiding unnecessary waste of resources. Next, determine the front-end technology stack and micro-front-end architecture based on the business requirements, target functions and evaluation results. In this process, the choice of technology stack is based on its adaptability, technical capabilities and community support, and the establishment of micro-front-end architecture provides a good foundation for the modular development of the system. This step builds a flexible, scalable and future-friendly technical foundation to improve development efficiency and reduce maintenance costs. Finally, based on the front-end technology stack and micro-front-end architecture, the micro-application framework and the main application framework are clarified to complete the construction of the front-end architecture. This application determines the functional modules, routing management, and state management for each micro-application, thereby achieving the separation and independence of business logic, ensuring that the front-end system has efficient modularization, good maintainability, and flexible expansion capabilities, and constructs an incrementally upgradeable and progressively reconstructible front-end architecture that can support the digital transformation of enterprises and future business growth needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0049] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0050] Figure 1 A flowchart of the first embodiment of the method for constructing the front-end architecture of the present application is provided;

[0051] Figure 2 A flowchart of the second embodiment of the method for constructing the front-end architecture of the present application is provided;

[0052] Figure 3A schematic diagram of the module structure of a device for constructing a front-end architecture according to an embodiment of the present application;

[0053] Figure 4 This is a schematic diagram of the device structure of the hardware operating environment involved in the method for constructing the front-end architecture in the embodiment of the present application.

[0054] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0055] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0056] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0057] As digitalization advances, physical business operators need to use information technology to upgrade their businesses, cope with the complexity of multiple scenarios and improve the efficiency of multi-role collaboration. Currently, enterprises manage various business areas in parallel through multiple systems, but this approach leads to data isolation, high maintenance costs, high upgrade risks and low collaboration efficiency.

[0058] The main solution of the embodiment of this application is to clarify the business needs and functional goals in the physical business field, and lay the foundation for system design and technology selection. Then, based on business needs, the front-end technology stack and micro-front-end architecture are determined to ensure that development is closely connected with business, and improve system practicality and user satisfaction. Finally, based on the selected technology stack and architecture, the micro-application and main application frameworks are established, the front-end architecture is built, the separation and independence of business logic are realized, and the modularity, maintainability and scalability of the system are ensured.

[0059] It should be noted that the execution subject of the embodiment of the present application may be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, a business operation system, etc. The following takes the business operation system as an example to illustrate this embodiment and the following embodiments.

[0060] Based on this, the present application embodiment provides a method for constructing a front-end architecture, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the method for constructing the front-end architecture of the present application.

[0061] In this embodiment, the method for constructing the front-end architecture includes steps S10 to S30:

[0062] Step S10, obtaining business requirements, target functions, and evaluation results of the structure and modules of the single application in the physical business field;

[0063] It should be noted that business needs refer to the specific challenges faced by physical commercial operators in their daily business activities and the problems they hope to solve through the system, mainly including: (1) Space management: the need to efficiently manage commercial space, buildings, mechanical and electrical, fire protection and other facilities. (2) Investment management: covering the entire life cycle of investment activities such as leads, showings, reservations, contracts, delivery and withdrawal. (3) Operation management: the need to track and analyze operational data, such as customer flow and sales data, to improve operational efficiency. (4) Multi-dimensional data integration and analysis: correlation and analysis of commercial space data, customer flow data and sales data to mine business value. (5) Equipment management: ensuring real-time monitoring and timely maintenance of the mall equipment status, etc. These needs reflect the company's desire to achieve efficient management and value mining of various businesses through digital means to promote business process optimization and transformation. Target functions refer to the specific functions that the digital system needs to achieve in order to meet the above business needs, mainly including: (1) Digital management of objects: digital management of commercial space, facilities and equipment, brands, suppliers and other objects. (2) Comprehensive coverage of business scenarios: achieving full-process management of investment attraction, customer flow, operation, rental management and other scenarios. (3) Data collection and value analysis: achieving the evaluation of the value of important resources (such as shops, brands, suppliers) through accurate data collection. (4) Data fusion and operation support: connecting data across modules and systems to help enterprises form a data closed loop in daily operations and support management decisions. The realization of these functions will directly help enterprises improve business efficiency, reduce operating costs, and gradually complete digital transformation. Monolithic applications refer to traditional integrated software systems used by enterprises before the evolution of system architecture. Such systems usually concentrate all functions in one application, and the modules are highly coupled. They have the following characteristics: (1) Overall development and deployment: All functional modules are in the same code base, and the development and deployment cycles must be consistent. (2) Lack of flexibility: It is impossible to upgrade or replace modules individually, resulting in complex system maintenance, and the overall service needs to be suspended during upgrades. (3) Severe coupling between modules: Investment attraction, operation, equipment management and other functions share the same code structure, and modifying one part may affect the stability of other modules. The evaluation results refer to the conclusions drawn after analyzing the architecture and modules of the existing monolithic application before the system is refactored. These conclusions provide a basis and direction for the introduction of the micro-frontend architecture. The main evaluation contents include: (1) The possibility of module disassembly: determine which modules in the existing monolithic application (such as investment promotion, operation, equipment management, etc.) can be independently disassembled into micro-applications. (2) System coupling degree: evaluate the degree of coupling between modules and determine the difficulty of decoupling. (3) Refactoring priority: analyze the importance of each module and the urgency of upgrading, and formulate a reconstruction plan (such as splitting investment promotion management first, and then splitting equipment management). (4) Upgrade risks and costs: evaluate the risks that may arise during the coexistence of the old and new systems, as well as the technical solutions for gradual replacement and migration.

[0064] It is understandable that, first of all, it is necessary to conduct in-depth research and analysis on the core business needs of operators to understand the challenges and goals they face in daily operations such as space management, investment management, operation management, passenger flow monitoring, and equipment management, such as improving management efficiency, enhancing data integration capabilities, and optimizing customer experience. Then, based on these needs, clarify the target functions that the system needs to have, such as realizing digital management of commercial space and brands, opening up data links in various business links, supporting decision-making through data analysis, and ensuring flexible expansion and management of different modules. Subsequently, a comprehensive assessment of existing monolithic applications is conducted, including analyzing their code structure, module division, coupling between systems, and maintenance difficulty, to determine which functional modules can be disassembled into micro-applications to run independently, and which parts need to be reconstructed first. Through this process, enterprises can develop a clear system upgrade roadmap to ensure that business is not interrupted during the transformation process, while realizing functional expansion and full mining of data value.

[0065] Step S20, determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results;

[0066] It should be noted that the front-end technology stack refers to a combination of tools, frameworks, libraries, and technologies used to develop, build, and maintain the front-end interface of the system. It covers technologies that implement key functions such as user interface (UI), user experience (UX), data interaction, and state management. In this embodiment, the front-end technology stack mainly includes: (1) Frameworks: Vue, React, Angular, etc., which are used to develop different business modules or micro-applications. (2) State management: Vuex, Redux, etc., which are used to manage and synchronize state information between different modules. (3) Routing management: vue-router, React Router, which are used for navigation between pages and lazy loading of modules. (4) Data interaction: HTTP clients such as Axios, which are used to communicate data with the back-end API. (5) Visualization and data analysis: chart libraries such as Echarts and SVG, which are used for visual display of commercial space, customer flow, and sales data. (6) UI component library: such as Element-UI, which is used to build an interface with high consistency and good user experience. The micro-frontend architecture is an architectural model that breaks down a large-scale monolithic front-end application into multiple independently developed and deployed small micro-applications. In this embodiment, it is used to solve the upgrade difficulties and module coupling problems of traditional monolithic applications. Through the micro-frontend architecture, each business module such as investment management, equipment management, passenger flow monitoring, etc. can be developed and maintained as a separate micro-application without affecting the normal operation of other modules.

[0067] It is understandable that, first of all, it is necessary to clarify the specific needs and target functions of each business module (such as investment promotion management, passenger flow monitoring, operation management, etc.) to ensure that the choice of technology stack can meet the needs of these business scenarios, such as efficient data processing, flexible user interface, and support for data visualization. Then, combined with the evaluation results, analyze the current architectural status of the monolithic application and determine which modules are suitable for disassembly into independent micro-applications. According to the characteristics of different modules, select the appropriate front-end technology stack, such as Vue or React for flexible construction of user interfaces, Vuex or Redux for state management, Axios for front-end and back-end data communication, and Echarts for data visualization. Then, a micro-front-end architecture (such as Qiankun micro-front-end) is used to achieve the decoupling and independent deployment of each module, so that each micro-application can work with the main framework while maintaining the independence of its own framework and state. Ultimately, the determination of the micro-front-end architecture must not only meet the needs of existing businesses, but also ensure that the system has good scalability, so that it supports incremental upgrades and progressive reconstruction, and provides technical support for the digital transformation of enterprises.

[0068] As an example, the steps of determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results include: determining the selection criteria of the front-end technology stack according to the business requirements and the target functions; determining the front-end technology stack according to the selection criteria and the evaluation results; determining the relationship between the main application framework and the micro-application according to the business requirements, the target functions and the evaluation results, the routing and service of the micro-application being based on a central registration center; formulating a standardized communication protocol according to the settings of the central registration center; determining the micro-front-end architecture according to the relationship between the main application framework and the micro-application, the central registration center and the standardized communication protocol.

[0069] Selection criteria refer to the basis for evaluating and selecting technologies based on business requirements and target functions when determining the front-end technology stack. These criteria include: (1) Technology adaptability: The selected technology must be able to meet the needs of each business module, such as high-performance rendering capabilities, flexible component-based design, easy maintenance and expansion, etc. (2) Technical capabilities: Choose a familiar technology stack to reduce the learning curve and development risks. (3) Ecosystem support: Choose technologies with active communities and good documentation support to ensure that help and resources are available during the development process. (4) Compatibility with micro-frontend architecture: Ensure that the selected technology can effectively support the micro-frontend architecture, such as being able to be independently developed, deployed and run. The main application framework refers to the core component of the entire system, responsible for coordinating and loading different micro-applications. Micro-applications are small independent applications that implement specific functions. The relationship between the two is mainly reflected in: (1) Coordination and integration: The main application framework is responsible for loading and managing micro-applications to ensure that different micro-applications can be seamlessly switched on the same interface. (2) Routing management: The main application framework needs to maintain a unified routing table so that it can dynamically load the corresponding micro-applications based on user operations. (3) Resource sharing: The main application framework can provide common resources (such as styles and component libraries) for micro-applications to use to maintain consistency. The routing of micro-applications refers to the fact that each micro-application independently manages its own routing system in the micro-frontend architecture, which can achieve modular page navigation. The service of a micro-application refers to the interface for micro-applications to interact with the backend for data, which means: (1) Routing independence: Each micro-application can customize its own routing rules to ensure that there will be no conflicts when dynamically loaded in the main application framework. (2) Service flexibility: Micro-applications can communicate with the backend for data through independent API interfaces, ensuring their functional independence and flexibility. The central registration center is a key component in the micro-frontend architecture and is responsible for managing the registration information of all micro-applications. Its main functions include: (1) Application registration: Each micro-application registers its routing, service and configuration information with the central registration center when it starts so that the main application framework can identify and load them. (2) Dynamic update: When a new micro-application is launched or an existing micro-application is updated, the central registration center can update the information in a timely manner so that the main application framework can automatically adapt to these changes. The standardized communication protocol is a unified specification for data and event exchange between different micro-applications and the main application framework in the micro-frontend architecture. It includes: (1) Data format: defines the data structure and format transmitted between micro-applications so that applications with different technology stacks can understand and process data with each other. (2) Message type: specifies the types of various events or messages to ensure that each micro-application can correctly respond to requests from the main framework or other micro-applications. (3) Interface specification: provides a clear interface definition for the interaction between micro-applications and the main application to ensure the consistency and scalability of the system.

[0070] First, by deeply analyzing business needs and target functions, set the selection criteria for the front-end technology stack, such as considering the adaptability of the technology, the technical capabilities and ecological support, to ensure that the selected technology can effectively support the development needs of different modules. Then, based on these selection criteria and the evaluation results of the existing monolithic applications, select a suitable front-end technology stack, such as React or Vue, to ensure that the system flexibility and performance requirements can be met. Then, clarify the relationship between the main application framework and the micro-application, set the routing and service mechanism of the micro-application, all of which are based on a central registration center, which is responsible for managing the registration information and dynamic updates of the micro-application, ensuring that the main application can identify and load the corresponding micro-application. According to the setting of the central registration center, formulate a standardized communication protocol to unify the data exchange format, message type and interface specification between the micro-application and the main application framework, so as to achieve efficient communication between modules. Finally, the relationship between the main application framework and the micro-application, the central registration center and the standardized communication protocol are comprehensively considered to determine the final micro-front-end architecture to ensure that the system has good scalability, maintainability and flexibility to support future incremental upgrades and progressive reconstruction.

[0071] As an example, after determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results, it also includes: determining a style isolation strategy according to the front-end technology stack; and using the style isolation strategy to perform style isolation on each micro-application.

[0072] Style isolation strategy refers to a series of methods and techniques adopted in the micro-frontend architecture to ensure that the styles of different micro-applications do not conflict. These strategies are designed to solve the CSS style interference problem that may be caused by the simultaneous loading of multiple micro-applications, so as to ensure that the visual performance of each micro-application is consistent and independent. Common style isolation strategies include using CSS Modules to localize CSS class names to avoid global style pollution; using CSS-in-JS (CSS inJavaScript) technology to bundle styles with component logic to achieve dynamic generation and application of styles; or using Scoped CSS to ensure that styles are only valid in their corresponding components. In addition, Shadow DOM technology can be used to create an independent Document Object Model (DOM) tree for micro-applications, thereby achieving style isolation at a higher level. The implementation of these strategies can effectively avoid style conflicts and improve the maintainability and user experience of the system. Micro-applications refer to small, independently developed and deployed front-end applications in the micro-frontend architecture according to their functions. Each micro-application is usually responsible for implementing specific functional modules, such as investment management, passenger flow monitoring, and operation management. Micro-applications can use different technology stacks, work with the main application framework, and dynamically load and communicate through the central registration center to achieve business flexibility and scalability.

[0073] After determining the front-end technology stack and micro-front-end architecture, the next step is to develop a style isolation strategy to ensure that the styles of different micro-applications do not interfere with each other and maintain their respective visual consistency. First, according to the characteristics and compatibility of the selected front-end technology stack, select a suitable style isolation method, such as using CSS Modules to localize the style to avoid global CSS class name conflicts; or using CSS-in-JS technology to closely integrate the style with the component logic so that the style is dynamically generated and only takes effect in a specific component. Then, for each micro-application, apply the selected style isolation strategy, including configuring the corresponding style management tool for each micro-application to ensure that its CSS file generates a unique class name when compiling or limiting the scope of the style through Scoped CSS. If Shadow DOM is used, create an independent DOM environment for each micro-application to fundamentally avoid style interference. Through this series of measures, ensure that each micro-application is independent and stable in interface performance, improve the overall user experience, and reduce the complexity of future style maintenance.

[0074] Step S30, determining a micro-application framework and a main application framework according to the business requirements, the micro-front-end architecture, and the front-end technology stack, and completing the construction of the front-end architecture.

[0075] It should be noted that the micro-application framework refers to the development and operation environment provided for each independent micro-application in the micro-frontend architecture. These frameworks allow developers to use specific front-end technology stacks (such as Vue, React or Angular) to build the user interface and functional logic of the micro-application. The micro-application framework is responsible for managing the state, routing and interaction with the backend of each application, ensuring that the micro-application can be independently developed, tested and deployed. They are usually flexible and scalable and can be customized according to specific business needs. The main application framework is the core framework of the entire system, which is responsible for coordinating and managing the loading and running of all micro-applications. The main application framework usually handles functions such as routing management, style isolation, dependency loading and global state management of micro-applications. It registers the information of each micro-application through the central registration center so as to dynamically load and unload micro-applications. The design of the main application framework ensures seamless switching between different micro-applications and a good user experience, while providing shared resources and service interfaces for micro-applications.

[0076] It is understandable that, first of all, it is necessary to deeply understand the business requirements to identify the specific functions and interaction methods of each business module, so as to select the appropriate framework for each micro-application. For example, if some micro-applications require a highly responsive user interface, a micro-application framework based on React can be selected; for modules that require complex state management, a framework based on Vue can be selected. Next, the selection of the main application framework should take into account the overall design of the micro-frontend architecture. It needs to have strong routing management capabilities and the ability to dynamically load micro-applications so that it can effectively coordinate the operation of each micro-application, while handling state sharing and resource management across micro-applications. Through the central registration center, the main application framework must also ensure that the information of all micro-applications can be updated and managed in real time, ensuring seamless integration and interaction between micro-applications. In the construction of the front-end architecture, the micro-application framework and the main application framework together constitute the foundation of the entire system, enabling the micro-frontend architecture to achieve efficient integration and management of applications while ensuring the independence of modules. By reasonably selecting and configuring these two frameworks, the development can respond to business needs more effectively and achieve a flexible and maintainable front-end system.

[0077] As an example, after determining the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack, and completing the step of building the front-end architecture, it also includes: performing integration testing on the main application framework and the micro-application framework based on the micro-front-end architecture, the routing management and the state management to obtain test results; and adjusting the main application framework and the micro-application framework according to the test results.

[0078] Integration testing refers to the process of systematically verifying the interaction and functions between the main application framework and the micro-application framework. It aims to ensure that different micro-applications can work seamlessly under the management of the main application framework and verify the correctness and stability of each micro-application in terms of data sharing, route switching, state management, and style isolation. Integration testing usually includes the following aspects: (1) Routing test: Ensure that the main application framework can correctly load and switch each micro-application and verify the accuracy of the routing configuration. (2) State management test: Check whether the micro-applications can effectively share and synchronize states and verify the effectiveness of the global state management solution. (3) Functional test: Verify whether the functions of the micro-application under the main framework are running normally, including UI interaction and data processing. (4) Performance test: Evaluate the response speed and resource consumption of the integrated system to ensure that the performance of the overall application meets expectations. Test results refer to the data and feedback collected during the integration test process. These results include information such as the pass rate of test cases, defects found, performance indicators, and overall system stability. Specifically, the test results cover: (1) Pass / fail status: Whether each test case is successfully executed and its related error information. (2) Performance indicators: such as loading time, response time, memory usage, and CPU usage, help evaluate the performance of the system. (3) State consistency: Check whether the data between micro-applications is consistent and whether there are state synchronization issues. (4) User experience feedback: Evaluate the overall experience from the perspective of user interaction, whether there are problems such as operation delays or interface freezes.

[0079] First, the integration test will focus on verifying whether the interaction between the main application framework and each micro-application is smooth, focusing on checking the correctness of routing management, ensuring that users can seamlessly switch between different micro-applications in the application, and verifying whether the state management can achieve state synchronization and sharing between micro-applications. During the test, the developer will run a series of test cases covering user interaction, data loading, and function calls in different scenarios, and monitor key performance indicators such as response time, data accuracy, and user experience. Through these tests, detailed test results will be collected, including the pass rate of each function, possible defects, performance data, and user experience feedback. Based on these results, the developer will identify the problems and optimization space in the system, so as to make necessary adjustments to the main application framework and micro-application framework to ensure that in the next development and launch phase, the system can efficiently and stably meet business needs and improve user experience.

[0080] As an example, a micro-application uses an independent state management library instance; the independent state management library instance is obtained based on state management requirements, initial state, and state change logic; the initial state and the state change logic are obtained based on the state management library configuration; the state management library is determined based on the front-end technology stack; the state management requirements are determined based on the micro-application framework.

[0081] The state management library instance refers to the specific implementation of the independent state management tool used by each micro-application in the micro-frontend architecture, such as using Vuex, Redux or MobX. These instances are responsible for maintaining the state data within the micro-application, ensuring that the micro-application can effectively share and manage the state between different components. For example, when a user performs an operation on the interface (such as adding an item to the shopping cart), the state management library instance will update the relevant state and notify the interface to render accordingly. State management requirements refer to the state management capabilities required by the micro-application when implementing its functions. For example, in a passenger flow monitoring micro-application, it may be necessary to track and update passenger flow data in real time, which requires a good state management mechanism to handle data collection, update and display. The initial state refers to the initial value of the state data in the state management library when the micro-application is started. These initial values ​​are preset according to business requirements to ensure that the application presents the correct information and interface when loading. The state change logic refers to the rules and methods for how the micro-application updates the state according to user operations or external events during operation. It includes state update mechanisms triggered by various operations (such as adding, deleting, modifying data, etc.). The state management library refers to a tool or framework for managing application state, which aims to help developers efficiently manage state sharing and updates between components. In this embodiment, according to the selection of the front-end technology stack (such as selecting Vuex when using Vue.js and selecting Redux when using React), the state management library provides a series of APIs and methods to support state creation, acquisition, update and event notification.

[0082] In the micro-frontend architecture, each micro-application uses an independent state management library instance to handle its internal state management. This instance is designed based on specific state management requirements, initial state, and state change logic. First, according to the characteristics of the micro-application framework, the state management requirements are determined, which involves how the application needs to manage state data when implementing specific functions (such as passenger flow monitoring or investment management). For example, passenger flow monitoring may require real-time update and display of passenger flow data. Next, define the initial state of the micro-application, that is, the default value of each state when the application is loaded. These initial values ​​are set through the configuration of the state management library to ensure that the application can start in the correct state. The state change logic specifies how to update the state based on user interaction or data changes, for example, how to change the state by triggering a specific event when the user performs an operation on the interface. Finally, the selected state management library (such as Vuex or Redux) is selected based on the determination of the front-end technology stack to ensure compatibility with the overall architecture and technical environment of the micro-application. Through this series of steps, the micro-application can efficiently manage its state and ensure the consistency and smoothness of the user experience.

[0083] In this embodiment, the system includes the following modules: (1) Base: mainly provides a stable and consistent foundation for the development team, so that developers can focus on the implementation of business logic without having to build all the infrastructure from scratch. (2) Business module: focuses on the implementation of business functions. (3) Public module: focuses on the implementation of public functions, such as data analysis, subject database, space management, equipment management, etc. (4) System module: focuses on the implementation of system modules, such as personal center, process management, basic configuration, etc.

[0084] This embodiment provides a method for constructing a front-end architecture, obtaining business requirements, target functions, and evaluation results of the structure and modules of a single application in the physical business field; determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions, and the evaluation results; determining the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture, and the front-end technology stack to complete the construction of the front-end architecture. Obtaining the business requirements, target functions, and evaluation results of the structure and modules of the single application in the physical business field is the first step of the project. This process clarifies the challenges and specific functional requirements faced in actual operations through in-depth research and communication with key stakeholders, while evaluating the advantages and disadvantages of the existing system, laying the foundation for subsequent system design and technology selection. This stage ensures that subsequent development is closely aligned with actual business requirements, thereby improving the practicality and user satisfaction of the system and avoiding unnecessary waste of resources. Next, the front-end technology stack and the micro-front-end architecture are determined according to the business requirements, target functions, and evaluation results. In this process, the selection of the technology stack is based on its adaptability, technical capabilities, and community support, and the establishment of the micro-front-end architecture provides a good foundation for the modular development of the system. This step builds a flexible, scalable, and future-iteration-supporting technical foundation, improving development efficiency and reducing maintenance costs. Finally, based on the front-end technology stack and micro-front-end architecture, the micro-application framework and the main application framework are clarified to complete the construction of the front-end architecture. This embodiment determines the functional modules, routing management, and state management for each micro-application, thereby achieving the separation and independence of business logic, ensuring that the front-end system has efficient modularization, good maintainability, and flexible expansion capabilities, and constructs an incrementally upgradeable and progressively reconstructable front-end architecture that can support the digital transformation of enterprises and future business growth needs.

[0085] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar contents as those in the above-mentioned embodiment 1 can refer to the above introduction, and will not be repeated later. Figure 2 , Figure 2 This is a flow chart of the second embodiment of the method for constructing the front-end architecture of the present application. Step S30 of the method for constructing the front-end architecture includes steps S31 to S35:

[0086] Step S31, determining the micro-application function according to the business requirements and the micro-front-end architecture;

[0087] It should be noted that micro-application functions refer to the specific functions and business logic that each micro-application needs to implement under the micro-frontend architecture. These functions should match business requirements and be designed for specific business scenarios. Micro-application functions may include but are not limited to the following aspects: (1) Business logic implementation: Each micro-application should focus on processing specific business logic, such as investment management, customer flow analysis, sales data statistics, etc. (2) User interaction: Micro-applications need to provide a good user interface and user experience, including various interactive elements (such as buttons, forms, charts, etc.) so that users can easily operate and obtain information. (3) Data processing: Micro-applications need to have the ability to collect, display and analyze data, including calls to back-end APIs, real-time data updates and status management. (4) Route management: Micro-applications need to independently manage their internal routes, support users to seamlessly switch between different functional modules, and ensure the smoothness of the application. (5) State management: Each micro-application should be able to manage its own state data to ensure that the current state can be correctly reflected when users interact or data changes, and synchronize the state with other micro-applications when necessary. (6) Style and brand consistency: Micro-applications must follow design specifications to ensure that the interface style is consistent with the overall application, and at the same time be able to independently manage their own style to avoid conflicts with other micro-applications.

[0088] Understandably, it is necessary to first deeply understand the specific requirements collected in the business requirements analysis, including customer expectations, market trends, and problems with the current system. This process involves communication with key stakeholders to ensure that all business goals and key scenarios (such as investment management, customer flow analysis, sales data monitoring, etc.) are fully identified. Next, based on the characteristics of the micro-frontend architecture, determine the functional modules that each micro-application should focus on implementing. These modules should have independence and autonomy, and can effectively handle specific business logic, user interaction, data processing, and state management. In addition, the interaction and data sharing requirements between micro-applications must be considered to ensure that they can work together in the overall architecture. Through this systematic approach, the specific functions and responsibilities of micro-applications can be clarified to ensure that each designed micro-application can not only meet user needs, but also adapt to future expansion and changes, thereby improving the flexibility and maintainability of the entire system.

[0089] Step S32, determining the deployment rules and development rules of each micro-application according to the micro-application function;

[0090] It should be noted that deployment rules refer to a series of standards and processes followed when deploying micro-applications to the production environment. These rules ensure that micro-applications can be successfully launched and seamlessly integrated with the main application framework and other micro-applications. Specifically, they include: (1) Independent deployment: Each micro-application should be able to be deployed independently and not rely on the release cycle of other micro-applications, which means that they can run on different servers or services. (2) Version control: Each micro-application needs to be managed using a version control system (such as Git) to ensure that changes can be tracked and rolled back to the previous version when updated. (3) Automated deployment: The deployment process should be automated as much as possible, using CI / CD tools (such as Jenkins, GitLab CI, etc.) to achieve automatic building, testing, and release, reduce manual intervention, and improve efficiency. (4) Environment configuration: The configuration of each micro-application in different environments (development, testing, and production) should be clear to ensure that its behavior is consistent in different environments. (5) Monitoring and logging: After deployment, a monitoring and logging mechanism should be set up to track the performance and errors of micro-applications in real time and respond quickly to potential problems. Development rules refer to a series of coding standards and best practices that should be followed when developing each micro-application. These rules help ensure the readability, maintainability and scalability of the code, including: (1) Coding standards: The system should unify the coding style and naming conventions, such as using tools such as ESLint and Prettier to check the code style and ensure the consistency of the code. (2) Modular development: Micro-applications should adopt modular design, separate functional logic, and ensure the independence and reusability of each module. (3) Componentized design: When developing the UI, a componentized approach should be adopted so that each component can be independently developed, tested and maintained. (4) Documentation standards: Detailed documentation should be written during the development process, including API documentation, instructions for use and development guides, so that other team members can get started quickly. (5) Test coverage: It should be ensured that the micro-application has sufficient unit test and integration test coverage during the development process to ensure the correctness and stability of the functions.

[0091] It is understandable that the specific functions undertaken by each micro-application need to be analyzed first to ensure that these functions can run efficiently and stably in the production environment. The formulation of deployment rules requires consideration of the independence of micro-applications, ensuring that each application can be independently versioned and automatically deployed to avoid the risk of going online due to mutual dependence. In addition, it is necessary to clarify the configuration requirements of different environments (such as development, testing, and production) to ensure that micro-applications behave consistently in each environment, and to establish monitoring and logging mechanisms to track performance and errors in real time. At the same time, the setting of development rules aims to improve code quality and team collaboration efficiency, including unified coding standards, modular and componentized design principles, to ensure the readability and maintainability of the code. At the same time, document specifications should also be included in the rules to facilitate information sharing and communication among team members. By formulating these rules in detail, the system can ensure that micro-applications are efficient, maintainable, and stable during development and deployment, thereby supporting the flexible expansion and long-term development of the entire system.

[0092] As an example, the steps of determining the deployment rules and development rules of each micro-application based on the micro-application function include: obtaining business logic and interface design based on the micro-application function; determining the development rules of each micro-application based on the business logic and the interface design; setting a continuous integration / continuous delivery process based on the development rules; and determining the deployment rules of the micro-application based on the continuous integration / continuous delivery process.

[0093] Business logic refers to the rules and processes that a micro-application must follow when implementing specific functions. It defines how the system handles these operations, how to calculate the results, and how to interact with data when users perform operations in the application. For example, in a micro-application for investment management, business logic may include the process of reviewing investment information, the rules for calculating rent and fees, and how to record and display investment progress. These logics ensure that the micro-application can accurately perform its core functions. Interface design refers to the overall layout, visual style, and user interaction elements of the user interface of the micro-application. This part includes the design of the style, color, font, icon of each page and component, and the way users interact with the application, such as buttons, forms, drop-down menus, etc. The goal of interface design is to ensure the friendliness and ease of use of the user experience, so that users can intuitively understand and operate the functions of the micro-application. Development rules refer to a series of standards and best practices that should be followed in the development of micro-applications. These rules include coding specifications, naming conventions, file structure, component design principles, code review processes, etc., to ensure smooth collaboration between team members and improve the readability and maintainability of the code. For example, the system stipulates the use of specific code style guides (such as ESLint or Prettier) to unify the code style; it may also require the functional modularization of micro-applications to ensure that each module can be independently developed and tested. In addition, the development rules may also cover the requirements of unit testing and integration testing to ensure the stability and reliability of the application. The continuous integration / continuous delivery process (CI / CD) refers to a software development practice that achieves continuous integration, testing, and delivery of code in an automated manner. This process usually includes the following steps: (1) Continuous Integration (CI): Developers frequently merge code into the main branch and verify the quality of the code through automated building and testing. This can timely discover and fix problems and reduce conflicts that may arise during later integration. (2) Continuous Delivery (CD): After the code passes all tests, it is automatically deployed to the production environment or pre-production environment for more extensive testing and final release. Continuous delivery ensures that the application can be quickly delivered to users and shortens the release cycle.

[0094] The steps of determining the deployment rules and development rules of each micro-application according to the micro-application functions first start with the specific functions of the micro-application, analyze and clarify its business logic and interface design. Business logic defines how the system should respond when the user performs a specific operation in the application, including data processing, calculation rules and operation processes, such as how to review investment information and calculate fees in the investment management micro-application. Interface design involves the layout, style and interactive elements of the user interface to ensure a friendly user experience so that users can intuitively understand and operate micro-applications. Then, based on these business logics and interface designs, the system formulates development rules for each micro-application, which include coding specifications, component structure, naming conventions, and testing requirements to ensure the readability and maintainability of the code, thereby improving the efficiency of team collaboration. Subsequently, a continuous integration / continuous delivery process (CI / CD) will be set up according to the set development rules, which involves automated building, testing and deployment to ensure that the code is fully verified every time it is updated and reduce the risk of introducing defects. Finally, according to the designed CI / CD process, the deployment rules of micro-applications are clarified, including independent deployment, version control, environment configuration and monitoring requirements, to ensure that each micro-application can be successfully launched and effectively integrated with the main application framework and other micro-applications. Through this series of steps, the system can systematically manage the development and deployment process of micro-applications and improve software quality and delivery efficiency.

[0095] Step S33, determining a micro-application framework according to the deployment rule and the development rule;

[0096] Understandably, it is necessary to first analyze and understand the pre-set deployment rules, which define the standards that each micro-application needs to follow when it goes online and runs, such as independent deployment, version control, environment configuration, and monitoring mechanisms. This ensures that micro-applications can run stably in different environments and can quickly respond to changes in business needs. Next, it is necessary to review the development rules, which cover aspects such as coding standards, component structure, state management, routing management, and interface design to ensure the readability and maintainability of the code and promote efficient collaboration among team members. Combining the two, the system will design a micro-application framework suitable for the micro-frontend architecture, which will include a reusable component library, a unified state management solution, a flexible routing system, and an API that complies with the interface specification. The design of this framework will ensure that each micro-application can independently and efficiently implement specific functions, while being able to seamlessly integrate with the main application framework and other micro-applications, ultimately forming a stable, flexible, and easy-to-expand overall system. Through this process, the system can ensure that micro-applications have efficient deployment capabilities while meeting business needs, thereby improving the overall performance and user experience of the system.

[0097] Step S34, building a unified development environment based on the front-end technology stack;

[0098] It should be noted that the development environment refers to the collection of tools, software, and configurations used by developers to write, test, and debug code. This environment is built to provide a consistent and efficient workspace to support system collaboration and development throughout the project life cycle.

[0099] It is understandable that the first step is to choose a suitable framework (such as React or Vue), state management library, and build tool. Next, configure the code editor (such as Visual Studio Code) to support syntax highlighting and debugging functions, and introduce a version control system (such as Git) to manage code versions. Then, use dependency management tools (such as npm or Yarn) to manage third-party libraries, and set up code quality tools (such as ESLint and Prettier) to maintain code style. Next, integrate a testing framework (such as Jest or Cypress) to ensure the correctness of the code, and configure a local development server (such as webpack-dev-server) to support real-time preview and hot reload. Through these steps, an efficient and consistent development environment can be established to support the smooth progress of the project.

[0100] Step S35, determining the main application framework based on the micro front-end architecture and the development environment, and completing the construction of the front-end architecture.

[0101] Understandably, the core requirements of the micro-frontend architecture need to be analyzed first, including interactions between micro-applications, routing management, state sharing, and resource loading. This process will take into account the functional modules of the micro-applications, the compatibility of the technology stack, and the development capabilities of the team. Next, select a suitable main application framework, such as using technologies such as React, Vue, or Angular. This framework needs to support dynamic loading of micro-applications and coordinate their operation. The main application framework will be responsible for managing the life cycle of micro-applications, including registration, loading, unloading, and state management. At the same time, based on the established development environment, configure the main application framework to ensure seamless integration with micro-applications, such as setting up routing management, API interfaces, and style isolation mechanisms to ensure the independence and consistency of different micro-applications. After completing these steps, the main application framework will provide a stable operating environment for micro-applications, thus forming an efficient and flexible front-end architecture that meets business needs and supports future expansion and maintenance.

[0102] This embodiment determines the micro-application function according to the business needs and the micro-front-end architecture; determines the deployment rules and development rules of each micro-application according to the micro-application function; determines the micro-application framework according to the deployment rules and the development rules; builds a unified development environment according to the front-end technology stack; determines the main application framework based on the micro-front-end architecture and the development environment, and completes the construction of the front-end architecture. First, the system deeply analyzes the business needs and clarifies the specific functions that each micro-application needs to implement, which includes identifying key scenarios (such as investment management, passenger flow monitoring, etc.) and their corresponding business logic and user interaction, ensuring that the design closely fits the actual needs, thereby improving the user experience and providing clear goals for subsequent development. Then, based on these micro-application functions, the system formulates corresponding deployment rules and development rules, including independent deployment, version management, environment configuration, coding specifications and testing standards. The beneficial effect of this stage is to establish a unified development and deployment standard, ensure efficient team collaboration, and reduce errors and inconsistencies in the development process. Then, based on these rules, the system selects a suitable micro-application framework (such as React or Vue) to provide a structured development environment for micro-applications, including componentized design and state management. This step ensures that micro-applications can run independently and efficiently integrate with the main application framework and other micro-applications, improving the maintainability and scalability of the system. After that, the system builds a unified development environment based on the selected front-end technology stack, including code editors, version control, build tools, and testing frameworks to provide a consistent working environment, which can quickly respond to changes in business needs and reduce learning and communication costs. Finally, based on the micro-front-end architecture and the established development environment, the main application framework is selected and configured to complete the construction of the front-end architecture. The main application framework will coordinate the interactions between micro-applications and manage their life cycles, ultimately forming a flexible, efficient, and scalable front-end architecture that can support the company's digital transformation and future business growth.

[0103] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the method of constructing the front-end architecture of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.

[0104] This application also provides a front-end architecture construction device, please refer to Figure 3 , the construction device of the front-end architecture includes:

[0105] The data acquisition module 10 is used to obtain the business requirements, target functions and evaluation results of the structure and modules of the single application in the physical business field;

[0106] A first construction module 20 is used to determine the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results;

[0107] The second construction module 30 is used to determine the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack, and complete the construction of the front-end architecture.

[0108] In one embodiment, the second construction module 30 is also used to determine the micro-application functions according to the business requirements and the micro-front-end architecture; determine the deployment rules and development rules of each micro-application according to the micro-application functions; determine the micro-application framework according to the deployment rules and the development rules; build a unified development environment according to the front-end technology stack; determine the main application framework based on the micro-front-end architecture and the development environment, and complete the construction of the front-end architecture.

[0109] In one embodiment, the second construction module 30 is also used to obtain business logic and interface design based on the micro-application function; determine the development rules of each micro-application based on the business logic and the interface design; set up a continuous integration / continuous delivery process based on the development rules; and determine the deployment rules of the micro-application based on the continuous integration / continuous delivery process.

[0110] In one embodiment, the first construction module 20 is also used to determine the selection criteria of the front-end technology stack according to the business requirements and the target functions; determine the front-end technology stack according to the selection criteria and the evaluation results; determine the relationship between the main application framework and the micro-application according to the business requirements, the target functions and the evaluation results, and the routing and service of the micro-application are based on the central registration center; formulate a standardized communication protocol according to the settings of the central registration center; determine the micro-front-end architecture according to the relationship between the main application framework and the micro-application, the central registration center and the standardized communication protocol.

[0111] In one embodiment, the second construction module 30 is also used to perform integration testing on the main application framework and the micro-application framework based on the micro-front-end architecture, the routing management, and the state management to obtain test results; and adjust the main application framework and the micro-application framework according to the test results.

[0112] In one embodiment, the first construction module 20 is further used to determine a style isolation strategy according to the front-end technology stack; and use the style isolation strategy to perform style isolation on each micro-application.

[0113] In one embodiment, in the second construction module 30, the micro-application uses an independent state management library instance; the independent state management library instance is obtained according to state management requirements, initial state and state change logic; the initial state and the state change logic are obtained according to the state management library configuration; the state management library is determined according to the front-end technology stack; the state management requirements are determined according to the micro-application framework.

[0114] The front-end architecture construction device provided by the present application adopts the front-end architecture construction method in the above-mentioned embodiment, which can solve the technical problem of how to build a front-end architecture that can be incrementally upgraded and progressively reconstructed. Compared with the prior art, the beneficial effects of the front-end architecture construction device provided by the present application are the same as the beneficial effects of the front-end architecture construction method provided by the above-mentioned embodiment, and the other technical features in the front-end architecture construction device are the same as the features disclosed in the above-mentioned embodiment method, which will not be repeated here.

[0115] The present application provides a front-end architecture construction device, the front-end architecture construction device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the front-end architecture construction method in the above-mentioned embodiment one.

[0116] Reference below Figure 4 , which shows a schematic diagram of a structure of a construction device suitable for implementing the front-end architecture of the embodiment of the present application. The construction device of the front-end architecture in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The construction device of the front-end architecture shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0117] like Figure 4As shown, the construction device of the front-end architecture may include a processing device 1001 (such as a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM: Read Only Memory) 1002 or the program loaded from the storage device 1003 to the random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the construction device of the front-end architecture to operate are also stored. The processing device 1001, ROM1002 and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the construction device of the front-end architecture to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows the construction device of the front-end architecture with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have alternatively.

[0118] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0119] The front-end architecture construction device provided by the present application adopts the front-end architecture construction method in the above-mentioned embodiment, which can solve the technical problem of how to build a front-end architecture that can be incrementally upgraded and progressively reconstructed. Compared with the prior art, the beneficial effects of the front-end architecture construction device provided by the present application are the same as the beneficial effects of the front-end architecture construction method provided by the above-mentioned embodiment, and the other technical features in the front-end architecture construction device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0120] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0121] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0122] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the method for constructing the front-end architecture in the above-mentioned embodiment.

[0123] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0124] The computer-readable storage medium may be included in the construction device of the front-end architecture; or may exist independently without being assembled into the construction device of the front-end architecture.

[0125] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the construction device of the front-end architecture, the construction device of the front-end architecture: obtains the business needs, target functions and evaluation results of the structure and modules of the single application in the physical business field; determines the front-end technology stack and the micro-front-end architecture according to the business needs, the target functions and the evaluation results; determines the micro-application framework and the main application framework according to the business needs, the micro-front-end architecture and the front-end technology stack, and completes the construction of the front-end architecture.

[0126] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0127] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0128] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0129] The readable storage medium provided by the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the method for constructing the above-mentioned front-end architecture, and can solve the technical problem of how to construct a front-end architecture that can be incrementally upgraded and progressively reconstructed. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the method for constructing the front-end architecture provided by the above-mentioned embodiment, and will not be repeated here.

[0130] The present application also provides a computer program product, including a computer program, which implements the steps of the method for constructing a front-end architecture as described above when executed by a processor.

[0131] The computer program product provided by this application can solve the technical problem of how to build a front-end architecture that can be incrementally upgraded and progressively reconfigured. Compared with the prior art, the beneficial effects of the computer program product provided by this application are the same as the beneficial effects of the front-end architecture construction method provided by the above embodiment, and will not be repeated here.

[0132] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A method for constructing a front-end architecture, characterized in that: The method comprises: Obtain business requirements, target functions, and evaluation results of the structure and modules of the single application in the physical business field; Determine the front-end technology stack and micro-front-end architecture according to the business requirements, the target functions and the evaluation results; Determine the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack to complete the construction of the front-end architecture.

2. The method according to claim 1, characterized in that The step of determining the micro-application framework and the main application framework according to the business requirements, the micro-frontend architecture, and the frontend technology stack, and completing the construction of the frontend architecture includes: Determine micro-application functions according to the business requirements and the micro-frontend architecture; Determine deployment rules and development rules for each micro-application based on the micro-application function; Determine a micro-application framework according to the deployment rules and the development rules; Build a unified development environment based on the front-end technology stack; Based on the micro front-end architecture and the development environment, the main application framework is determined to complete the construction of the front-end architecture.

3. The method according to claim 2, characterized in that The step of determining the deployment rules and development rules of each micro-application according to the micro-application function includes: Obtain business logic and interface design based on the micro-application functions; Determine the development rules of each micro-application according to the business logic and the interface design; Set up a continuous integration / continuous delivery process according to the development rules described; Determine the deployment rules of the micro-application according to the continuous integration / continuous delivery process.

4. The method according to claim 1, characterized in that The step of determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results includes: Determine the selection criteria for the front-end technology stack based on the business requirements and target functions; Determine the front-end technology stack according to the selection criteria and the evaluation results; Determine the relationship between the main application framework and the micro-application according to the business requirements, the target functions and the evaluation results, wherein the routing and services of the micro-application are based on a central registration center; Developing a standardized communication protocol based on the settings of the central registration center; A micro front-end architecture is determined according to the relationship between the main application framework and the micro application, the central registration center, and the standardized communication protocol.

5. The method according to claim 1, characterized in that After the step of determining the micro-application framework and the main application framework according to the business requirements, the micro-frontend architecture and the frontend technology stack and completing the construction of the frontend architecture, the step further includes: Performing integration testing on the main application framework and the micro-application framework based on the micro-frontend architecture, the routing management, and the state management to obtain test results; The main application framework and the micro application framework are adjusted according to the test results.

6. The method according to claim 1, characterized in that After the step of determining the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results, the step further includes: Determine the style isolation strategy based on the front-end technology stack; Use the style isolation strategy to isolate the style of each micro application.

7. The method according to any one of claims 1 to 6, characterized in that The micro-application uses an independent state management library instance; The independent state management library instance is obtained according to the state management requirements, initial state and state change logic; The initial state and the state change logic are obtained according to the configuration of the state management library; The state management library is determined according to the front-end technology stack; The state management requirements are determined based on the micro-application framework.

8. A device for constructing a front-end architecture, characterized in that: The device comprises: The data acquisition module is used to obtain the business requirements, target functions and evaluation results of the structure and modules of the single application in the physical business field; A first building module is used to determine the front-end technology stack and the micro-front-end architecture according to the business requirements, the target functions and the evaluation results; The second construction module is used to determine the micro-application framework and the main application framework according to the business requirements, the micro-front-end architecture and the front-end technology stack to complete the construction of the front-end architecture.

9. A front-end architecture construction device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the method for constructing a front-end architecture as claimed in any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the method for constructing a front-end architecture as described in any one of claims 1 to 7 are implemented.

Images