Communication method, device, medium and electronic equipment of front-end microservice

Abstract

The present disclosure relates to a front-end micro-service communication method, device, medium and electronic equipment, and relates to the technical field of computers, the method comprising: creating a main application and a micro-application, the main application being a main container for loading and coordinating the micro-application, and the micro-application being an independent project created for each front-end function as a micro-service; installing qiankun in the main application and the micro-application; configuring the main application and developing the micro-application; controlling the main application to communicate with the micro-application, the communication comprising the main application passing information to the micro-application and / or the micro-application sending a message to the main application. The present disclosure can split a complex front-end application into a main application and multiple independent micro-applications through the qiankun framework, thereby simply and effectively realizing front-end micro-service.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a communication method, apparatus, medium, and electronic device for front-end microservices. Background Technology

[0002] Currently, implementing front-end microservices and their communication typically faces challenges such as high requirements for a unified technology stack, tight coupling between development and deployment, difficulties in expansion and maintenance, limitations in performance and user experience, inflexible communication mechanisms, and high risks and costs. Therefore, how to better implement communication within front-end microservices is a pressing technical problem that needs to be solved. Summary of the Invention

[0003] To address the shortcomings of related technologies, this disclosure provides a communication method, apparatus, medium, and electronic device for front-end microservices, which can solve the problem of high maintenance costs.

[0004] To achieve the above objectives, the first aspect of this disclosure provides a communication method for front-end microservices, the method comprising: Create a main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications. Each micro-application is a separate project created for each front-end function of a microservice. Install qiankun in the main application and the micro application; Configure the main application and develop the micro-application; The main application controls communication between the main application and the micro application, the communication including the main application transmitting information to the micro application, and / or the micro application sending messages to the main application.

[0005] Optionally, the main application transmits information to the micro-application, including: When the micro-application is registered, the main application is controlled to pass target information to the micro-application based on the props parameter. The target information is used as a parameter in the lifecycle hook function of the micro-application. The micro-application receives the target information passed by the main application through the props parameter in the lifecycle hook function, which includes bootstrap, mount, or unmount.

[0006] Optionally, the micro-application sends a message to the main application, including: The micro-application is controlled to create and trigger custom events, and communicate with the main application based on the custom events. The main application and the micro-application are connected to the same global state management library.

[0007] Optionally, the micro-application sends a message to the main application, including: When it is determined that both the main application and the micro-application share the same global state management library, the global state is updated, and the micro-application is controlled to send messages to the main application based on the updated global state.

[0008] Optionally, configuring the main application includes: Register multiple micro-applications, each of which has at least one of the following: a unique name, an entry address, a container selector, and an activation rule; The qiankun is launched by calling start at the target location. The qiankun is used to load and render the relevant micro-applications according to the activation rules when the main application is accessed. The development of the micro-application includes: Create the entry file for the micro-application and configure the packaging tool for the micro-application, including webpack; The micro-application is loaded into the main application.

[0009] Optionally, the method further includes: Launch the main application and the micro-application; Access the main application in a browser and navigate to the micro-application. Access to the main application is achieved by entering the address of the main application in the browser, and navigation to the micro-application is achieved by clicking a button or performing other operations in the main application. Perform test operations on the communication between the main application and the micro application. The test operations include: testing the main application to transmit information to the micro application, testing the micro application to send messages to the main application, and verifying the communication results.

[0010] Optionally, the method further includes: Identify the target server or target cloud platform, and deploy the main application and the micro-application to the target server or target cloud platform; Monitor the performance and stability of the deployed main application and the micro-applications; The main application and the micro-applications are iteratively developed and their functions are expanded according to user needs.

[0011] Secondly, this disclosure provides a communication device for front-end microservices, the device comprising: The initialization module is used to create the main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications, and each micro-application is an independent project created for each front-end function of a microservice. An installation module is used to install qiankun in the main application and the micro application; A configuration development module is used to configure the main application and develop the micro-applications; A communication module is used to control the communication between the main application and the micro application, wherein the communication includes the main application transmitting information to the micro application, and / or the micro application sending messages to the main application.

[0012] Thirdly, this disclosure provides a computer-readable medium having a computer program stored thereon, which, when executed by a processing device, implements the steps of the method described in the first aspect.

[0013] Fourthly, this disclosure provides an electronic device, comprising: A storage device on which computer programs are stored; A processing device for executing the computer program in the storage device to implement the steps of the method described in the first aspect.

[0014] Fifthly, this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the method described in the first aspect.

[0015] The above technical solution first creates a main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications, while each micro-application is an independent project created as a front-end function of a microservice. Then, Qiankun is installed in both the main application and the micro-applications. Based on this, the main application is configured, and the micro-applications are developed. Finally, the main application and the micro-applications are controlled to communicate. The communication includes the main application sending information to the micro-applications and / or the micro-applications sending messages to the main application. This improves the flexibility and maintainability of front-end development, reduces the coupling between systems, and provides an effective technical means for implementing a front-end microservice architecture.

[0016] Other features and advantages of this disclosure will be described in detail in the following detailed description section. Attached Figure Description

[0017] The accompanying drawings are provided to further illustrate the present disclosure and form part of the specification. They are used together with the following detailed description to explain the present disclosure, but do not constitute a limitation thereof. In the drawings: Figure 1 This is a flowchart illustrating a communication method for a front-end microservice according to an embodiment of this disclosure.

[0018] Figure 2 This is a flowchart illustrating the specific process of implementing front-end microservices and communication in a communication method for front-end microservices according to an embodiment of this disclosure.

[0019] Figure 3 This is a block diagram illustrating a communication device for a front-end microservice according to an embodiment of the present disclosure.

[0020] Figure 4 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present disclosure. Detailed Implementation

[0021] The specific embodiments of this disclosure will be described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are for illustration and explanation only and are not intended to limit this disclosure.

[0022] It should be noted that all actions involving the acquisition of signals, information, or data in this disclosure are carried out in compliance with the relevant data protection laws and policies of the country where the location is situated, and with authorization from the owner of the relevant device.

[0023] As described above, when implementing front-end microservices and communication, related technologies often face problems such as high requirements for unified technology stack, high coupling between development and deployment, difficulties in expansion and maintenance, limited performance and user experience, inflexible communication mechanisms, and high risks and costs.

[0024] To address the aforementioned issues, this disclosure proposes a communication method, apparatus, medium, and electronic device for front-end microservices. The communication method supports the coexistence of micro-applications with different technology stacks, enabling independent development and deployment of micro-applications while reducing system coupling, thus improving ease of expansion and maintenance. Furthermore, this solution enhances performance and user experience by loading micro-applications on demand and provides a flexible communication mechanism, allowing micro-applications to easily and efficiently share data and state, and conveniently implement functions such as single sign-on, authentication, and data allocation. In addition, this disclosure reduces the risks and costs associated with technology upgrades and business changes; therefore, it possesses significant advantages in front-end microservices and communication.

[0025] Figure 1 This is a communication method for front-end microservices illustrated in an exemplary embodiment of this disclosure, such as... Figure 1 As shown, the communication method of this front-end microservice may include the following steps: In step S110, the main application and micro-applications are created.

[0026] The communication method for front-end microservices proposed in this disclosure can be a method for implementing front-end microservices and communication based on Qiankun. In the process of implementing the communication method for front-end microservices, this disclosure embodiment can first perform the creation operation of the main application and the micro-application. This creation operation can also be called the initialization of the project, that is, this disclosure embodiment can first initialize the project.

[0027] As an optional approach, during project initialization, this embodiment of the disclosure can perform the creation operations of a main application and micro-applications. The main application can be the main container for loading and coordinating micro-applications. For example, this embodiment of the disclosure can use Vue or other front-end frameworks to create a new project, which will serve as the main container for loading and coordinating micro-applications. A micro-application can be an independent project created for each front-end function that needs to be used as a microservice; that is, creating a micro-application can be creating an independent project for each front-end function that needs to be used as a microservice.

[0028] As an example, creating a main application can include two steps: environment preparation and project creation. Environment preparation ensures that Node.js and npm / yarn are installed, as well as vue create app (Application). Project creation involves using vue create app to create a new Vue project and navigating to the project directory. Here, installing Node.js and npm / yarn is a prerequisite for initializing the project and installing qiankun, providing the necessary foundational environment for subsequent project creation and dependency installation. In other words, installing Node.js and npm / yarn ensures a standardized and consistent development environment, preventing project creation and dependency installation failures due to environment configuration issues, thereby improving development efficiency and project startup smoothness.

[0029] As another example, creating a microapplication can involve two steps: selecting a framework and creating a project. Selecting a framework allows choosing a suitable front-end framework based on project requirements; creating a project uses appropriate scaffolding tools to create a new project and navigate to the project directory. This allows for flexible selection of the most suitable front-end framework to develop microapplications based on the needs of different business functions, which can significantly improve technical flexibility and team development efficiency, thereby reducing the risks associated with technology stack upgrades and business changes.

[0030] In step S120, qiankun is installed in the main application and the micro application.

[0031] As an alternative approach, after the project initialization is completed, this embodiment of the disclosure can perform the qiankun installation operation, that is, install the qiankun library in the main application and the micro-application.

[0032] For example, during the installation of qiankun, this embodiment of the disclosure can first prepare the installation environment to ensure that Node.js and npm / yarn are installed in the development environment. Node.js is the runtime environment for JavaScript; npm / yarn is the package manager for Node.js, used to install and manage project dependencies.

[0033] Based on this, the embodiments disclosed herein can install qiankun in the main application. Specifically, first, open a terminal, such as a command-line tool like CMD, Terminal, or PowerShell, to locate the main application project directory, for example, by using the `cd` command to switch to the main application project directory. Then, install qiankun, for example, by executing the npm or yarn installation command in the project directory. When using npm, you can run `npm install qiankun --save`; when using yarn, you can run `yarn add qiankun`. Here, the `--save` parameter is optional. Since npm 5.0.0 and yarn, dependencies can be added to the `dependencies` section of `package.json` by default when installing, thus avoiding unnecessary operations due to version differences, thereby improving development efficiency and project maintainability.

[0034] Optionally, installing qiankun in the micro-application is similar to installing it in the main application. You can first open a terminal (command-line tool). Then, navigate to the micro-application project directory, for example, using the `cd` command. Finally, in the project directory, execute the `npm` or `yarn` installation command to install qiankun.

[0035] This disclosure utilizes the qiankun library to build and manage a front-end microservice architecture, enabling functions such as loading, coordination, communication, and unloading between the main application and micro-applications. This allows front-end micro-applications with different technology stacks to run independently and communicate with each other within the same main application, jointly building a complete front-end application. This improves the flexibility and maintainability of front-end development, thereby reducing the coupling between systems and providing an effective technical means for implementing a front-end microservice architecture.

[0036] In step S130, the main application is configured and the micro-application is developed.

[0037] As an optional approach, after qiankun is installed, this embodiment of the disclosure can perform configuration operations for the main application and development operations for the micro-application.

[0038] In some implementations, the configuration operations of the main application may include: registering multiple micro-applications, where each micro-application may have at least one of the following: a unique name, an entry address, a container selector, and an activation rule. Based on this, qiankun is launched, which can be initiated by calling `start` at a target location. Here, qiankun is used to load and render the relevant micro-applications according to the activation rules when the main application is accessed. The target location may be a component's Vue lifecycle hook or a functional component's Vue hook.

[0039] For example, configuring the main application includes: registering micro-applications using the registerMicroApps method provided by qiankun in the main application, and then starting qiankun using the start method. This can initialize the main application and prepare for loading the micro-applications.

[0040] Specifically, during the micro-application registration process, this embodiment can open the main application's entry file and import the qiankun application's access point (AP). Based on this, micro-applications are registered; for example, this embodiment can use the `registerMicroApps` method to register micro-applications. Here, each micro-application can be configured with a unique name, entry address, container selector, and activation rule. These necessary parameters for micro-application registration enable the main application to accurately identify, load, render, and manage each micro-application. In other words, by specifying these parameters, this embodiment can ensure that the qiankun framework can load micro-applications on demand according to preset rules, thereby achieving routing-level microservice integration and improving system configurability and flexibility to a certain extent.

[0041] Optionally, during the startup of qiankun, this embodiment of the disclosure can introduce a `start` method, such as at the top of the file, and then call the `start` method to start qiankun at the appropriate location (target location). This ensures that qiankun only starts listening for route changes and loading micro-applications after the main application has finished initializing, avoiding potential race conditions or loading problems. Calling it in the `mounted` hook of frameworks such as Vue can ensure that DOM elements are ready, providing a stable environment for rendering micro-applications, thereby improving system robustness.

[0042] After qiankun is started, the embodiments disclosed herein can configure and run the main application. If the main application can be confirmed to be configured correctly and can run in a browser, when the main application is detected to be accessed, qiankun can load and render the corresponding micro-application according to the activation rules.

[0043] In other implementations, developing microapplications may include: creating an entry file for the microapplication and configuring a bundler for the microapplication, which may include webpack, and then loading the microapplication in the main application. During microapplication development, each microapplication corresponds to an independent entry file; that is, a separate entry file is configured for each microapplication. Then, some lifecycle hook functions are exported in the microapplication's entry file, which can be called when the microapplication is loaded, rendered, or unloaded. Additionally, the microapplication can receive props passed from the main application, which can be used in the mount lifecycle hook function. For example, these props can be received in the mount lifecycle hook function through the onGlobalStateChanged method of the props variable.

[0044] Here, through props, micro-applications can immediately obtain the information they need upon loading and receive methods provided by the main application for listening to global state changes, thereby achieving closer communication between parent and child applications and improving the timeliness and accuracy of data transmission.

[0045] For example, developing a microapplication includes: creating the microapplication's entry file; configuring the microapplication's packaging tool; and loading the microapplication in the main application. During the creation of the entry file, you can first create the file itself; for example, when creating a microapplication project using vue-cli, you can use `main.js` as the default entry file. Based on this, you configure exports, such as configuring exported lifecycle hook functions in the entry file. Here, the lifecycle hooks supported by qiankun can include `bootstrap`, `mount`, and `unmount`, etc.

[0046] Optionally, configuring the bundler for the micro-application can include modifying the webpack configuration and building the micro-application. Modifying the webpack configuration allows you to use webpack as the bundler and modify its configuration file to ensure the entry file is processed correctly. Building the micro-application can use webpack or other bundlers to generate JavaScript files that can be loaded by the main application.

[0047] Modifying webpack configurations and building micro-applications ensures that micro-applications are packaged in a way that allows them to be independently and correctly loaded by the main application. Furthermore, configuring webpack can handle issues such as resource paths, common dependencies, and code splitting for micro-applications, enabling them to be deployed and run independently while seamlessly integrating into the main application. This improves the independence and maintainability of micro-applications.

[0048] Optionally, loading a microapp in the main application may include registering the microapp, passing props, and starting qiankun. Registering the microapp can be done in the main application's entry file using the qiankun's registerMicroApps method, specifying its entry file, container selector, and activation rules. Passing props is used to pass data to the microapp through the props property during registration; this data will be available in the microapp's mount lifecycle hook function. Starting qiankun involves calling the qiankun's start method in the main application to initiate the microapp loading process.

[0049] In step S140, the main application and the micro application communicate with each other.

[0050] As an optional approach, after configuring the main application and developing the micro-applications, this embodiment of the disclosure implements communication, thereby controlling communication between the main application and the micro-applications. This communication includes the main application transmitting information to the micro-applications, and / or the micro-applications sending messages to the main application.

[0051] In other words, during the communication between the main application and the micro-application, this embodiment of the disclosure allows the main application to transmit information to the micro-application. For example, the main application can register actions variables through the initGlobalState method in the qiankun framework and transmit information to the micro-application through the setGlobalState method in actions. Additionally, sending messages from the micro-application to the main application can also be considered communication between the micro-application and the main application. Specifically, the micro-application can communicate with the main application through custom events, global state management, or other mechanisms.

[0052] During the process of the main application transmitting information to the micro-application, when the micro-application is determined to be registered, this embodiment of the disclosure can control the main application to transmit target information to the micro-application based on the props parameter. The target information can be received as a parameter in the micro-application's lifecycle hook function. Based on this, the micro-application is controlled to receive the target information transmitted by the main application through the props parameter in its lifecycle hook function. The lifecycle hook functions include bootstrap, mount, or unmount.

[0053] For example, embodiments of this disclosure can use the `props` property of the `registerMicroApps` method. When registering a microapp, the main application can pass information to the microapp through the `props` property. This information can be received as parameters in the microapp's `mount` lifecycle hook function. Subsequently, the microapp can receive props, such as props passed from the main application in its `mount` lifecycle hook function.

[0054] Optionally, during the process of a micro-application sending a message to the main application, embodiments of this disclosure can control the micro-application to create and trigger custom events, and communicate with the main application based on these custom events. Here, the main application and the micro-application can be connected to the same global state management library. Furthermore, when it is determined that both the main application and the micro-application share the same global state management library, embodiments of this disclosure can update the global state and control the micro-application to send messages to the main application based on the updated global state.

[0055] For example, embodiments of this disclosure can use custom events. Microapplications can communicate with the main application by creating and triggering custom events, after which the main application can listen to and process these events accordingly. Here, the microapplication does not need to directly depend on the main application; it only needs to trigger one event, which the main application listens to and responds to. This reduces the coupling between applications, thereby improving the system's scalability and flexibility.

[0056] In this process, embodiments of this disclosure can utilize global state management. For example, when it is determined that the main application and micro-applications share the same global state management library, communication can be achieved by updating the global state. Furthermore, embodiments of this disclosure can configure the global state management library to ensure that both the main application and micro-applications can connect to the same global state management library instance, thus ensuring the consistency and real-time synchronization of the global state between the main application and micro-applications. By sharing the same state management instance, complex functions such as single sign-on, authentication, and theme switching can be implemented, thereby avoiding data chaos and user experience problems caused by state asynchrony and improving the system's collaborative capabilities.

[0057] As an alternative approach, after the main application establishes communication between the micro-applications, this embodiment of the disclosure performs a run and test (run test) operation. For example, it uses `npm run serve` or corresponding commands to start the main application and the micro-application respectively. Then, it accesses the main application in a browser and navigates to the path specified by the micro-application's route or activation rule to check if the micro-application loads and displays correctly. Finally, it tests whether the communication between the main application and the micro-application is normal to ensure that information can be correctly transmitted and processed.

[0058] As can be seen, during execution and testing, this embodiment of the disclosure can first launch the main application and the micro-application. Based on this, the main application is accessed in a browser, and navigation to the micro-application is performed. Here, access to the main application can be achieved by entering the address of the main application in the browser, while navigation to the micro-application can be achieved by clicking a button or performing other operations in the main application. Based on this, test operations are performed on the communication between the main application and the micro-application. These test operations may include: testing the transmission of information from the main application to the micro-application, testing the sending of messages from the micro-application to the main application, and verifying the communication results.

[0059] For example, during the startup of the main application, this embodiment of the disclosure can open the terminal or command line window of the main application and use `npm run serve` or a corresponding command to start the main application, ensuring that the main application starts successfully and can be accessed in a browser. Similar to starting the main application, during the startup of the micro-application, this embodiment of the disclosure can also open the terminal or command line window of the micro-application and use `npm run serve` or a corresponding command to start the micro-application, ensuring that the micro-application starts successfully and can be accessed on its specified port.

[0060] After the main application and the micro-application are successfully launched, this embodiment of the disclosure allows access to the main application and navigation to the micro-application in a browser. Specifically, accessing the main application can be done by entering the address of the main application in the browser to ensure that the main application can be loaded and displayed normally; navigating to the micro-application can be done by clicking a link or performing other operations in the main application to navigate to the path specified by the routing or activation rules of the micro-application to ensure that the micro-application can be correctly loaded and displayed in the container specified by the main application.

[0061] Based on this, embodiments of this disclosure can test communication between the main application and the micro-application. As an example, embodiments of this disclosure can test the transmission of information from the main application to the micro-application. For instance, in the main application, it can ensure that information is passed through the props property when registering the micro-application, and in the mount lifecycle hook function of the micro-application, the received props information can be printed or used to ensure that the micro-application can correctly receive and use the information transmitted from the main application.

[0062] During the operation and testing phase, in addition to verifying the loading and display of micro-applications, detailed testing can be conducted to ensure the communication between the main application and the micro-applications is normal. This includes printing or using received props information in the micro-application's mount hook, and viewing the console output in the browser's developer tools to ensure there are no errors or warnings. It also involves checking whether the interface is correctly updated or displayed based on the transmitted information. This ensures the integrity and correctness of the microservice system in terms of functionality and communication. Through detailed testing procedures, communication problems, data transmission errors, or interface rendering anomalies can be identified and resolved promptly, thereby improving system stability and user experience, and reducing post-deployment maintenance costs.

[0063] As another example, embodiments of this disclosure can test micro-applications sending messages to a main application. That is, in a micro-application, custom events, global state management, or other mechanisms can be used to send messages to the main application. In the main application, the micro-application listens for events sent by the micro-application or subscribes to changes in the global state to ensure that the main application can correctly receive and process messages from the micro-application.

[0064] Finally, the embodiments of this disclosure can verify the communication results, such as by viewing the console output in the browser's developer tools to ensure there are no errors or warnings. Additionally, the embodiments of this disclosure can check the interfaces of the main application and micro-applications to ensure that both have been correctly updated or displayed based on the transmitted information.

[0065] As an alternative approach, this disclosure embodiment can also perform deployment and maintenance (deployment and maintenance) operations, through which the main application and micro-applications can be deployed to appropriate servers or cloud platforms, and the performance and stability of the applications can be monitored to ensure the normal operation of the microservice architecture, while iterative development and functional expansion can be carried out as needed.

[0066] When performing deployment and maintenance operations, the embodiments of this disclosure can first determine the target server or target cloud platform, and then deploy the main application and the micro application to the target server or target cloud platform. On this basis, the performance and stability of the deployed main application and the micro application can be monitored, and the main application and the micro application can be iteratively developed and expanded according to user needs.

[0067] For example, before deploying the main application and micro-applications to servers and cloud platforms, embodiments of this disclosure may first select a suitable server or cloud platform, i.e., determine the target server or target cloud platform. In this process, requirements may be assessed, cloud service providers compared, and server types selected to determine the target server or target cloud platform.

[0068] When assessing requirements, embodiments of this disclosure can evaluate the needs of both the main application and micro-applications. These requirements may include computing resources, storage needs, and network bandwidth. Comparing cloud service providers involves comparing the services, prices, and performance offered by different providers based on the requirements to select the most suitable cloud platform. Selecting the server type involves choosing a suitable server type within the cloud platform based on the specific needs of the application. Through these assessment operations, the reasonable allocation of deployment resources can be ensured, avoiding performance bottlenecks or resource waste caused by insufficient resources. Pre-assessment allows for the selection of the most suitable server type and cloud service provider, thereby optimizing deployment costs and application performance, and improving system scalability and stability.

[0069] Furthermore, after identifying the target server or target cloud platform, this embodiment of the disclosure can deploy the main application and micro-applications to the target server or target cloud platform. In this process, this embodiment of the disclosure can first configure the server environment and then deploy the application. Configuring the server environment may include installing the operating system, configuring network and security settings, and installing necessary software. These operations ensure the stability, security, and efficiency of the application's operating environment. Through standardized server configuration, the normal operation of the application can be guaranteed, network attacks can be prevented, and necessary runtime support and data storage services can be provided for the application, thereby improving the system's reliability and security.

[0070] Installing an operating system can mean installing a suitable operating system on the server; configuring network and security settings can mean setting the server's IP address and firewall rules to ensure network connectivity and security; installing necessary software can mean installing a web server, database server, and application runtime environment (such as Java or Node.js). Web servers can include Nginx, Apache, etc., database servers can include MySQL, PostgreSQL, etc., and application runtime environments can include Java, Node.js, etc.

[0071] Deploying an application can include uploading application code, configuring the application, and launching the application. Uploading application code can be done by using FTP, SCP, or other tools to upload the code of the main application and micro-applications to the server; configuring the application can be done by configuring database connections and environment variables according to the application's requirements; launching the application can be done by using command line or other management tools to start the main application and micro-applications.

[0072] Optionally, after deploying the main application and micro-applications to the target server or target cloud platform, embodiments of this disclosure can monitor the performance and stability of the deployed main application and micro-applications. This monitoring process can include: selecting monitoring tools, configuring monitoring metrics, and periodic analysis and optimization. Selecting monitoring tools involves choosing suitable tools to monitor the application's performance and stability; configuring monitoring metrics can be done according to the application's needs; periodic analysis and optimization can be used to periodically analyze monitoring data to identify potential performance bottlenecks and stability issues. Based on the analysis results, embodiments of this disclosure can optimize application configuration, code, or server resources to improve performance and stability.

[0073] It should be noted that the embodiments of this disclosure can iteratively develop and expand the main application and micro-applications according to user needs, specifically including requirements analysis and planning, development and testing, deployment and verification, iteration and expansion. Requirements analysis and planning can be used to collect and analyze user needs, determine the goals and functional expansion points of iterative development, and formulate a detailed iterative development plan. Here, the iterative development plan includes a timeline and resource allocation; development and testing can be used to perform coding, testing, and debugging work according to the iterative development plan, and to automate the build, testing, and deployment processes using continuous integration / continuous deployment (CI / CD) tools; deployment and verification can be used to deploy new functions to a test environment for verification, ensuring that the functions work as expected and do not affect existing functions, and further adjustments and optimizations can be made to the functions by collecting user feedback; iteration and expansion can be used to conduct the next round of iterative development or functional expansion based on user feedback and market demands, continuously optimizing the application architecture and code quality to improve the scalability and maintainability of the application.

[0074] The above-mentioned automated building, testing, and deployment processes can significantly improve development efficiency and code quality. The CI / CD process ensures that testing is performed automatically after each code commit, problems are identified in a timely manner, and new features are deployed to the production environment quickly and reliably, thereby reducing the error rate and deployment risks of manual operations and accelerating the product iteration cycle.

[0075] As a specific implementation, the communication method for front-end microservices shown in this disclosure may include, for example: Figure 2 The steps shown can include initializing the project, installing Qiankun, configuring the main application, developing micro-applications, implementing communication, running tests, and deployment and maintenance. Through these processes, the embodiments of this disclosure can flexibly and efficiently realize communication between front-end microservices.

[0076] Additionally, the main application can include lightweight modules that collect and analyze user navigation paths and behavioral patterns on the platform. When a user is detected to have remained on the current micro-application page for a preset duration (e.g., more than 3-5 seconds without interaction) or hovering the mouse over a navigation link, the main application can silently load the resources of these micro-applications in the background using the loadMicroApp API provided by qiankun, based on preset or dynamically analyzed high-probability next micro-applications, without immediately mounting them. Afterward, the preloading module can prioritize preloading tasks based on the size, importance, and predicted access probability of the micro-applications. Simultaneously, it can limit the number of concurrent preloading operations to avoid excessive consumption of network and CPU resources, thus affecting the performance of currently active micro-applications.

[0077] This disclosure, through the Qiankun mechanism, supports the coexistence of micro-applications with different technology stacks. By introducing the Qiankun mechanism, this disclosure allows for the flexible integration of micro-applications developed using different frameworks such as React, Vue, and Angular into the main application, significantly improving technological flexibility and team development efficiency. Furthermore, micro-applications in this disclosure can be developed and deployed as independent projects, enabling agile development and rapid iteration to a certain extent. Each micro-application can have its own dedicated code repository, dependency management, and deployment process. This not only reduces coupling between systems but also, due to the independence of micro-applications, makes adding or modifying features easier. Users can focus only on the micro-applications that need changing without modifying the entire system's code. This modular design greatly reduces system maintenance costs.

[0078] Based on the same inventive concept, this disclosure also provides a communication device for front-end microservices, such as... Figure 3 As shown, the communication device 300 of the front-end microservice may include an initialization module 310, an installation module 320, a configuration development module 330, and a communication module 340.

[0079] The initialization module 310 is used to create a main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications. Each micro-application is an independent project created as a front-end function of a microservice. The installation module 320 is used to install qiankun in the main application and the micro application; The configuration development module 330 is used to configure the main application and develop the micro-application; The communication module 340 is used to control the communication between the main application and the micro application. The communication includes the main application transmitting information to the micro application, and / or the micro application sending messages to the main application.

[0080] In some implementations, the communication module 340 is further configured to, when determining that the micro-application is to be registered, control the main application to pass target information to the micro-application based on the props parameter, the target information being received as a parameter in the micro-application's lifecycle hook function; and control the micro-application to receive the target information passed by the main application through the props parameter in the lifecycle hook function, the lifecycle hook function including bootstrap, mount, or unmount.

[0081] In some implementations, the communication module 340 is also used to control the micro-application to create and trigger custom events, and to communicate with the main application based on the custom events, wherein the main application and the micro-application are connected to the same global state management library.

[0082] In some implementations, the communication module 340 is further configured to update the global state when it is determined that the main application and the micro application share the same global state management library, and control the micro application to send messages to the main application based on the updated global state.

[0083] In some implementations, the configuration and development module 330 is also used to register multiple micro-applications, each of which has at least one of the following: a unique name, an entry address, a container selector, and an activation rule; launch qiankun, which is initiated by calling start at a target location, and qiankun is used to load and render the relevant micro-applications according to the activation rules when the main application is accessed; create the entry file of the micro-application and configure the packaging tool of the micro-application, the packaging tool including webpack; and load the micro-application in the main application.

[0084] In some implementations, the communication device 300 for the front-end microservices may further include: The test module is used to launch the main application and the micro-application; access the main application in a browser and navigate to the micro-application. Access to the main application is achieved by entering the address of the main application in the browser, and navigation to the micro-application is achieved by clicking a button or performing other operations in the main application; test operations are performed on the communication between the main application and the micro-application, including: testing the transmission of information from the main application to the micro-application, testing the sending of messages from the micro-application to the main application, and verifying the communication results.

[0085] In some implementations, the communication device 300 for the front-end microservices may further include: The deployment and maintenance module is used to determine the target server or target cloud platform and deploy the main application and the micro application to the target server or target cloud platform; Monitor the performance and stability of the deployed main application and the micro-applications; The main application and the micro-applications are iteratively developed and their functions are expanded according to user needs.

[0086] This embodiment first creates a main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications, and each micro-application is an independent project created as a front-end function of a microservice. Then, Qiankun is installed in both the main application and the micro-applications. Based on this, the main application is configured, and the micro-applications are developed. Finally, the main application and the micro-applications are controlled to communicate. The communication includes the main application transmitting information to the micro-applications and / or the micro-applications sending messages to the main application. This improves the flexibility and maintainability of front-end development, reduces the coupling between systems, and provides an effective technical means for implementing a front-end microservice architecture.

[0087] Regarding the apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.

[0088] Figure 4 This is a block diagram illustrating an electronic device 400 according to an exemplary embodiment, which may be a server. Figure 4 As shown, the electronic device 400 may include a processor 401 and a memory 402. The electronic device 400 may also include one or more of a multimedia component 403, an input / output (I / O) interface 404, and a communication component 405.

[0089] The processor 401 controls the overall operation of the electronic device 400 to complete all or part of the steps in the aforementioned communication method of the front-end microservices. The memory 402 stores various types of data to support the operation of the electronic device 400. This data may include, for example, instructions for any application or method operating on the electronic device 400, and application-related data such as contact data, sent and received messages, pictures, audio, video, etc. The memory 402 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as Static Random Access Memory (SRAM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Erasable Programmable Read-Only Memory (EPROM), Programmable Read-Only Memory (PROM), Read-Only Memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The multimedia component 403 may include a screen and audio components. The screen may be, for example, a touchscreen, and the audio component is used to output and / or input audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signals may be further stored in memory 402 or transmitted via communication component 405. The audio component also includes at least one speaker for outputting audio signals. I / O interface 404 provides an interface between processor 401 and other interface modules, such as a keyboard, mouse, buttons, etc. These buttons may be virtual or physical buttons. Communication component 405 is used for wired or wireless communication between the electronic device 400 and other devices. Wireless communication, such as Wi-Fi, Bluetooth, Near Field Communication (NFC), 2G, 3G, 4G, NB-IoT, eMTC, or other 5G technologies, or combinations thereof, is not limited here. Therefore, the corresponding communication component 405 may include: a Wi-Fi module, a Bluetooth module, an NFC module, etc.

[0090] In an exemplary embodiment, the electronic device 400 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to execute the communication method of the aforementioned front-end microservices.

[0091] In another exemplary embodiment, a computer-readable storage medium including program instructions is also provided, which, when executed by a processor, implement the steps of the aforementioned communication method for front-end microservices. For example, the computer-readable storage medium may be the aforementioned memory 402 including program instructions, which may be executed by the processor 401 of the electronic device 400 to complete the aforementioned communication method for front-end microservices.

[0092] In another exemplary embodiment, a computer-readable storage medium including program instructions is also provided, which, when executed by a processor, implement the steps of the communication method for the front-end microservice described above.

[0093] In another exemplary embodiment, a computer program product is also provided, the computer program product comprising a computer program executable by a programmable device, the computer program having a code portion for performing the communication method of the aforementioned front-end microservice when executed by the programmable device.

[0094] The preferred embodiments of this disclosure have been described in detail above with reference to the accompanying drawings. However, this disclosure is not limited to the specific details of the above embodiments. Within the scope of the technical concept of this disclosure, various simple modifications can be made to the technical solutions of this disclosure, and these simple modifications all fall within the protection scope of this disclosure.

[0095] It should also be noted that the various specific technical features described in the above specific embodiments can be combined in any suitable manner without contradiction. In order to avoid unnecessary repetition, this disclosure will not describe the various possible combinations separately.

[0096] Furthermore, various different embodiments of this disclosure can be combined in any way, as long as they do not violate the spirit of this disclosure, they should also be regarded as the content disclosed in this disclosure.

Claims

1. A communication method for front-end microservices, characterized in that, The method includes: Create a main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications. Each micro-application is a separate project created for each front-end function of a microservice. Install qiankun in the main application and the micro application; Configure the main application and develop the micro-application; The main application controls communication between the main application and the micro application, the communication including the main application transmitting information to the micro application, and / or the micro application sending messages to the main application.

2. The method according to claim 1, characterized in that, The main application transmits information to the micro-application, including: When the micro-application is registered, the main application is controlled to pass target information to the micro-application based on the props parameter. The target information is used as a parameter in the lifecycle hook function of the micro-application. The micro-application receives the target information passed by the main application through the props parameter in the lifecycle hook function, which includes bootstrap, mount, or unmount.

3. The method according to claim 1, characterized in that, The micro-application sends messages to the main application, including: The micro-application is controlled to create and trigger custom events, and communicate with the main application based on the custom events. The main application and the micro-application are connected to the same global state management library.

4. The method according to claim 3, characterized in that, The micro-application sends messages to the main application, including: When it is determined that both the main application and the micro-application share the same global state management library, the global state is updated, and the micro-application is controlled to send messages to the main application based on the updated global state.

5. The method according to claim 1, characterized in that, The configuration of the main application includes: Register multiple micro-applications, each of which has at least one of the following: a unique name, an entry address, a container selector, and an activation rule; The qiankun is launched by calling start at the target location. The qiankun is used to load and render the relevant micro-applications according to the activation rules when the main application is accessed. The development of the micro-application includes: Create the entry file for the micro-application and configure the packaging tool for the micro-application, including webpack; The micro-application is loaded into the main application.

6. The method according to claim 1, characterized in that, The method further includes: Launch the main application and the micro-application; Access the main application in a browser and navigate to the micro-application. Access to the main application is achieved by entering the address of the main application in the browser, and navigation to the micro-application is achieved by clicking a button or performing other operations in the main application. Perform test operations on the communication between the main application and the micro application. The test operations include: testing the main application to transmit information to the micro application, testing the micro application to send messages to the main application, and verifying the communication results.

7. The method according to claim 1, characterized in that, The method further includes: Identify the target server or target cloud platform, and deploy the main application and the micro-application to the target server or target cloud platform; Monitor the performance and stability of the deployed main application and the micro-applications; The main application and the micro-applications are iteratively developed and their functions are expanded according to user needs.

8. A communication device for front-end microservices, characterized in that, The device includes: The initialization module is used to create the main application and micro-applications. The main application is the main container for loading and coordinating the micro-applications, and each micro-application is an independent project created for each front-end function of a microservice. An installation module is used to install qiankun in the main application and the micro application; A configuration development module is used to configure the main application and develop the micro-applications; A communication module is used to control the communication between the main application and the micro application, wherein the communication includes the main application transmitting information to the micro application, and / or the micro application sending messages to the main application.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements the steps of the method described in any one of claims 1-7.

10. An electronic device, characterized in that, include: A memory on which computer programs are stored; A processor for executing the computer program in the memory to implement the steps of the method according to any one of claims 1-7.

Images