Multi-application micro-frontend implementation method derived based on software development framework

Abstract

The application relates to the technical field of micro front-end development, and provides a multi-application micro front-end implementation method based on a software development framework, which comprises the following steps: step A, according to the needs of engineering management, splitting an application to form a base disc application and a sub-application; wherein the base disc application is the bottom layer architecture of a system, and the base disc application contains an application architecture of basic functions; the sub-application can be specifically divided according to industries; step B, establishing a common UI component library and a tool class library; step C, using module extension, rewriting N framework core logic to complete the access requirement of qiankun for the sub-application; and step D, creating a scaffold project for each sub-application. The application can realize the reusability of the base disc among projects, reduce the maintenance cost, and improve the development efficiency.

Description

Technical Field

[0001] This invention relates to the field of micro-frontend development technology, and in particular to a method for implementing multi-application micro-frontends based on a software development framework. Background Technology

[0002] Micro-frontends are a technical approach and strategy for multiple teams to collaboratively build modern web applications by independently releasing features. Drawing inspiration from microservices architecture, micro-frontends break down a large frontend application into multiple independent and flexible smaller applications. Each application can be developed, run, and deployed independently, and then these smaller applications are combined into a complete application. Micro-frontends can both integrate multiple projects into one and reduce coupling between projects, improving project scalability. Compared to a single frontend repository, frontend repositories under a micro-frontend architecture tend to be smaller and more flexible.

[0003] Currently, single-page application (SPA) development based on Vue, React, and Angular has become the industry mainstream. Benefiting from their rich ecosystems, these technologies allow for the rapid construction of new applications and quick market response. However, as business grows, the strong coupling between application modules leads to applications becoming bloated and unwieldy, gradually turning into monolithic applications that are difficult to maintain. Furthermore, each time new features are developed and deployed, significant time is spent building the project, negatively impacting developer efficiency and experience.

[0004] The currently commonly used development methods have the following problems:

[0005] 1. When building a new business application, a base codebase is copied as a scaffolding project. Minor modifications are then made to adapt to the new business requirements before business development can begin. This approach, if continued indefinitely, leads to difficulties in maintaining the base codebase. If one part fails, all versions of the base code for all businesses must be modified. Furthermore, as the business grows, it becomes a monolithic application. Therefore, each new business application requires repeating previous operations and modifications, resulting in high development and maintenance costs.

[0006] 2. Typically, the process from system login to the various basic maintenance pages that make up a system is a complete business flow. Any business can build upon this flow for higher-level development. However, while it's easy to achieve component commonality within a single project with a framework like Vue, it's difficult to implement a common module across different projects. Therefore, the base code is not reusable, and in the Vue framework development model, it's challenging to reuse common modules across projects.

[0007] 3. The N framework is not supported by the official open-source micro-frontend framework qiankun, and therefore cannot effectively implement the micro-frontend concept.

[0008] Therefore, it is necessary to introduce micro-frontend technology to solve the problems encountered in the development process. Summary of the Invention

[0009] This invention primarily addresses the problems of high development costs, difficult code maintenance, and inability to share code between projects in existing technologies. It proposes a multi-application micro-frontend implementation method based on a software development framework to achieve reusability of the base platform across projects, improve development efficiency, and reduce maintenance costs.

[0010] This invention provides a method for implementing multi-application micro-frontends based on a software development framework, comprising the following processes:

[0011] Step A: Based on the needs of project management, the application is split into a base application and sub-applications; wherein, the base application is the underlying architecture of the system, and the base application contains the application architecture of basic functions; the sub-applications can be specifically divided according to industry.

[0012] Step B: Establish a common UI component library and utility library;

[0013] Step C: Use module extension to rewrite the core logic of the N framework to fulfill qiankun's access requirements for sub-applications;

[0014] Step D: Create scaffolding projects for each sub-application.

[0015] Furthermore, step A includes steps A1 to A5:

[0016] Step A1: Create the basic functions of the base application;

[0017] Step A2: Perform route management;

[0018] Step A3: Establish communication mechanisms for the base application and sub-applications respectively;

[0019] Step A4: Use tabs to manage each page;

[0020] Step A5: Establish a dynamic management mechanism for component caching.

[0021] Furthermore, step A2 includes the following steps A2-1 to A2-2:

[0022] Step A2-1: Perform page-level modifications to the system;

[0023] Step A2-1-1: Add dynamic configuration management for micro-applications to the main application, allowing you to add / modify / delete configuration information for sub-applications as needed;

[0024] Step A2-1-2: Configure the menu definition;

[0025] Step A2-2: Perform framework-level modifications;

[0026] Step A2-2-1: Add a routing plugin;

[0027] Step A2-2-2 involves loading and unloading the base application and its sub-applications.

[0028] Furthermore, in step B, the UI component library and utility library are managed using the npm public package.

[0029] Furthermore, step B includes the following steps B1 to B2:

[0030] Step B1: Create the UI component library according to steps B1-1 to B1-5 below;

[0031] Step B1-1: Build a component library project based on the scaffolding, and first implement and run a test program component;

[0032] Step B1-2: Extract all UI components into this project and refine the design of component APIs, component templates, and styles;

[0033] Steps B1-3, Bundling the component library: Use webpack to bundle the component library's JS code and use gulp to bundle the style code;

[0034] Steps B1-4: Publish the component library to npm for installation and use by the base application and sub-applications;

[0035] Steps B1-5: Build a component library documentation site, which includes the interface definition, use cases and detailed examples for each component;

[0036] Step B2: Create the utility class library according to steps B2-1 to B2-5 below;

[0037] Step B2-1: Create an initial project based on Rollup;

[0038] Step B2-2: Extract all the utility libraries from the original system into this project and split the modules.

[0039] Steps B2-3: Use Rollup to package utility libraries.

[0040] Steps B2-4: Publish the utility library to npm for installation and use by the base application and its sub-applications;

[0041] Steps B2-5: Build a tool library documentation site.

[0042] Furthermore, step C includes steps C1 to C3:

[0043] Step C1: Rewrite the client.js template file under the N framework;

[0044] Step C2: Define an instance and register the plugin;

[0045] Step C3: Write the client.js module file.

[0046] Furthermore, step C1 includes:

[0047] Step C1-1: When using qiankun, expose the bootstrap, mount, update, and unmount lifecycle functions required by the qiankun framework; otherwise, retain the original logic and perform screen rendering.

[0048] In step C1-2, in the case of qiankun, the value of webpack_public_path is not changed;

[0049] Step C1-3: In Qiankun mode, when creating an app, the data parameters passed from the base application need to be set into the global configuration variables.

[0050] In steps C1-4, when loading asynchronous components, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is done, and the subsequent route jump logic is skipped and executed.

[0051] Steps C1-5: During screen rendering, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is done, and the subsequent route jump logic is skipped and executed.

[0052] Steps C1-6: During component normalization, in Qiankun mode, if the route jump is first to the path of the micro-application, then the normalization logic operation is executed.

[0053] In steps C1-7, when mountingApp, in Qiankun mode, the mount point of the sub-application needs to be changed; in non-Qiankun mode, the original logic remains unchanged.

[0054] Steps C1-8 define a global app instance so that the app instance can be accessed in various function logics;

[0055] Furthermore, step C3 includes:

[0056] Step C3-1: Receive externally defined parameters;

[0057] Step C3-2: Add a template plugin to this module;

[0058] Step C3-3: Extend the webpack configuration and output umd or a custom library;

[0059] Step C3-4: Add a template file for this module;

[0060] Step C3-5: Add the hook function listen => set the absolute path of the HTML entry so that the sub-application can be retrieved correctly;

[0061] Step C3-6, add the hook function render:route => set Access-Control-Allow-Origin for the compiled file.

[0062] Furthermore, step D includes the following steps D1 to D2:

[0063] Step D1: Create a sub-application template project based on the N framework through the following steps D1-1 to D1-4:

[0064] Step D1-1: Establish the basic directory structure used under the N framework;

[0065] Steps D1-2: Integrate various front-end UI component libraries and test automation framework libraries into the project;

[0066] Steps D1-3: Customize various template files that will generate different content based on different settings;

[0067] Steps D1-4 establish common processing logic that needs to be performed in a series of micro-applications after accessing Qiankun.

[0068] Step D1-4-1: Add the internal logic implementation files for various functions in the qiankun lifecycle to be exported;

[0069] Step D1-4-2: The N framework configuration file adds the import of bridge engineering; and the import of compilation modules for UI component library; and utility class library;

[0070] Step D1-4-3: Add the bridge project, UI component library, and utility library to package.json;

[0071] Step D1-4-4: Common handling of include and exclude in component caching;

[0072] Step D1-4-5: Add logic processing for data communication with the main application;

[0073] Step D1-4-6: Add the plugin file for route management;

[0074] Step D2: Create a sub-application project by following steps D2-1 to D2-2:

[0075] Step D2-1: Write the entry file cli.js;

[0076] Step D2-1-1: Receive various parameters input from the command line and verify the rationality of the parameters;

[0077] Step D2-1-2: Initialize the cac object;

[0078] Step D2-1-3: Register the commands and option values ​​for cac;

[0079] Step D2-1-4: Obtain command-line arguments and pass them to the sao library to configure the project and generate project files;

[0080] Step D2-2: Write the template processing file saofile.js;

[0081] Step D2-2-1, Prepare the template;

[0082] Step D2-2-1-1, Prepare the N framework project template: including all files that can run the N framework and dynamically configurable template files;

[0083] Step D2-2-1-2: Prepare the template file for the third-party framework;

[0084] Step D2-2-1-3: Prepare the logic processing files for the baseboard to interface with Qianku and the dynamically configurable template files;

[0085] Step D2-2-2: Set up the configuration file for the questions and answers;

[0086] Step D2-2-3: Based on the answer selected by the user in the CLI, add, move, modify, and remove operations for the various template files in step D2-2-1 in the action.

[0087] Step D2-2-4: Following the execution order and instructions defined in the action, dynamically modify all template files to generate the completed project.

[0088] The present invention provides a multi-application micro-frontend implementation method based on a software development framework, which has the following advantages compared with the prior art:

[0089] 1. Reusability of the baseboard: This invention achieves reusability of the baseboard across projects by extracting the baseboard code from the entire code and managing it separately. Step A extracts the baseboard application to form a complete business flow. After connecting to Qiankun, the sub-application can fully use all the business within the baseboard application. Step B allows for the reuse of components and utility libraries with common properties. The benefits of componentization are: (1) Encapsulation: Components shield internal details, and users of components can focus only on the component's properties, events, and methods. (2) Decoupling: Components themselves isolate changes, and component developers and business developers can independently develop and test according to the component's conventions. (3) Reuse: Components will be used in multiple places as a reusable unit. (4) Abstraction: Components provide a unified pattern for describing the UI through infrastructure such as properties, events, and methods, reducing the mental cost for users to learn.

[0090] 2. This invention modifies the existing technology framework based on the N framework, enabling seamless integration with the open-source micro-frontend framework Qiankun. The modified framework allows for seamless integration with Qiankun. Step C completes the initial integration between the N framework and Qiankun, making it possible to address the issue of Qiankun not supporting the N framework. The advantage of this approach is that development can proceed within the existing technology stack, rather than requiring significant modifications or reimplementation of other native frameworks (such as Vue), which would be extremely costly.

[0091] 3. This invention provides a rapid method for building new businesses. By placing reusable functions into the base application, these functions can be directly reused when creating new businesses, eliminating repetitive work. Step D of this invention creates an initial project for the sub-application, which includes all the repetitive and complex business logic processing required for interfacing with Qiankun. The advantage of this approach is that the sub-application does not need to be built from scratch, saving time and costs in sub-application development; it is ready to use immediately. Attached Figure Description

[0092] Figure 1 This is a flowchart illustrating the implementation of the multi-application micro-frontend implementation method based on a software development framework provided by the present invention.

[0093] Figure 2 This is a flowchart of the creation process of the base application provided by the present invention. Detailed Implementation

[0094] To make the technical problems solved by this invention, the technical solutions adopted, and the technical effects achieved clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings, not all of them.

[0095] This method is a qiankun access solution under the N framework, providing a standardized and process-oriented approach and solution to implement a micro-frontend application framework.

[0096] Qiankun is an open-source micro-frontend implementation library based on single-spa, designed to help users build a production-ready micro-frontend architecture system more easily and painlessly. Qiankun primarily supports integration with native frameworks such as Eact / Vue / Angular. However, it also provides integration solutions for non-Webpack-based projects, such as jQuery and JSP projects.

[0097] The N framework used in this method is based on Vue.js and is not within the scope of support provided by qiankun. It needs to be integrated with the qiankun framework.

[0098] like Figure 1 As shown, the multi-application micro-frontend implementation method based on a software development framework provided in this embodiment of the invention includes the following processes:

[0099] Step A: Based on the needs of project management, the application is split into a base application and sub-applications.

[0100] This invention is a method for implementing micro-frontends. Micro-frontends apply the concept of microservices to the browser side, that is, the web application is broken down from a single monolithic application into an application that integrates multiple small frontend applications.

[0101] In real-world system applications, some functions are repeatedly used, such as login / logout, user / organization / permission management, log management, and global exception handling. Every system has these basic functions, which belong to the core applications. Other functions are specific to different industries and natures, and belong to sub-applications; for example, inventory management, stocktaking, and accounting in production systems; and student management, dormitory management, and grade management in school systems.

[0102] According to the concept of micro front-end, we need to separate the parts with common functions from the parts with different characteristics in various systems, and re-plan and reorganize them in the form of base application (common functions) and sub-application (production system / school system / financial system).

[0103] The base application (main application) is the underlying architecture of the system, including but not limited to user login, organization management, access control, log management, etc. It is a complete business flow integrating multiple functions, and the base application also provides some common components to the outside world. The base application contains the application architecture (xx-fw) of basic functions.

[0104] The sub-applications can be specifically divided according to industry, including but not limited to production sub-applications (xx-product), school sub-applications (xx-school), and finance sub-applications (xx-finance).

[0105] The process of creating the sub-application is as follows: Using the command line `npx create-miro-frontend xx-product`, an initial sub-application that integrates with the Qiankun micro-frontend can be generated. Subsequent development of business interfaces can then be based on this project, achieving seamless integration with Qiankun.

[0106] After integrating Qiankun, the base application should retain these basic functionalities. However, due to the separation of the main and sub-applications, routing management, communication between the main and sub-applications, tab management, and component caching also need to be implemented. Specifically, such as... Figure 2 As shown, the base application is built following this process:

[0107] Step A1: Create the basic functions of the base application.

[0108] In various application systems that are delivered and put into use, a series of basic functions are created, including but not limited to: user login authentication control, user role and permission control, organizational structure management, menu definition and configuration, user theme changes, tabbed page browsing, message notification, component caching, etc.

[0109] Step A2: Perform route management.

[0110] A2-1, perform system-wide page-level modifications.

[0111] A2-1-1: Add dynamic configuration management for micro-applications to the main application, allowing users to add, modify, or delete configuration information for sub-applications as needed.

[0112] The configuration information center includes: the name of the sub-application, and the sub-application route root node (i.e., the sub-route prefix).

[0113] A2-1-2, configure the menu definition.

[0114] Previously: Routing was centrally managed. All pages within the system could be displayed in the navigation menu through menu item configuration, and users could browse the corresponding pages by clicking the menu options.

[0115] In response: Due to the separation of the base application and sub-applications, routes are physically isolated, operating on a separate basis. Therefore, if you want to continue managing all route information within the main application, you need to distinguish which application the route belongs to in the menu definition configuration.

[0116] Therefore, the menu information was expanded to include whether it is a micro-application and, if it is a micro-application, its root route information needs to be defined.

[0117] This is done for two reasons: first, to help distinguish which application the defined route belongs to; and second, to ensure that when the menu is clicked or switched, the sub-application is loaded correctly and the corresponding page is displayed.

[0118] A2-2, perform framework-level modification.

[0119] A2-2-1, Add a routing plugin.

[0120] Under the N framework, routing information is automatically generated based on the directory structure of the current project and is managed uniformly by the N framework. Because the pages of sub-applications are physically isolated from the main application, after integrating qiankun, the N framework will issue a 404 error because it cannot find the relevant routing information for the sub-applications, thus preventing the sub-applications from loading normally.

[0121] The solution is to add a routing plugin that uses routing wildcards to dynamically add routes for sub-applications to the base application based on the managed sub-application information. This allows the sub-application information to be stored in the routes in advance, ensuring that the sub-applications can be loaded normally under the N framework.

[0122] A2-2-2 performs loading and unloading processes for base applications and sub-applications.

[0123] When the navigation menu is clicked, if it is a base application route, the route will be loaded normally as before; if it is a sub-application route, a cache list will be created to control the loading of sub-applications, route navigation, and the number of routes of loaded sub-applications.

[0124] When you click the close button on the tab bar, you can uninstall sub-applications as needed. The rule is: if all pages under a sub-application have been closed, then uninstall that sub-application.

[0125] Step A3: Establish communication mechanisms for the base application and sub-applications respectively.

[0126] 1) The base application provides client-side cached information (data dictionary, system parameters, etc.). Sub-applications can access and use this information anytime, anywhere.

[0127] 2) The base application provides unified theme management functionality, allowing users to adjust the style and format of the system as needed. Sub-applications can maintain consistency with the main application's style.

[0128] 3) The base application provides a unified system error message and handling mechanism. Sub-applications can directly interface with this mechanism without any additional processing work.

[0129] Based on the above requirements, the modification at the base application level requires passing the following information to the sub-application through the API functions provided by qiankun when loading the sub-application: state storage object / style library object.

[0130] Step A4: Use tabs to manage each page.

[0131] The application system provides a browser-like behavior, which involves managing each page using tabs.

[0132] Tabbed management requires routing information, but because of the separation between the base application and sub-applications, the base application cannot obtain detailed routing information from the sub-applications.

[0133] At this point, during the loading process of the sub-application, its routing information needs to be sent back to the base application through reverse communication. After receiving the returned information, the base application performs unified cache management to implement tab behavior.

[0134] The base application can obtain routing information through its own routing management mechanism, which allows for the creation and management of page tags for both the base application and its sub-applications.

[0135] Similar to browsers, the tabs offer convenient ways to close them, such as: close other / close the right side / close all.

[0136] In different closing processes, it is necessary to decrement the count of the sub-application pages to which the closed page belongs. When the count of the sub-application pages is 0, it means that all pages under the sub-application have been closed, and at this time, the sub-application needs to be uninstalled.

[0137] Step A5: Establish a dynamic management mechanism for component caching.

[0138] To avoid the efficiency overhead of creating components and to preserve component state, application systems provide component caching mechanisms. However, depending on different business conditions, users can often decide whether to retain component state and whether to retrieve data again, etc.

[0139] for example:

[0140] 1. When clicking a tab to switch tabs (when switching between multiple tabs), the page should be cached;

[0141] 2. Page redirects occurring within the same tag should be cached;

[0142] 3. When a page jump occurs between tabs, the page before the jump should be in an uncached state;

[0143] Therefore, regardless of whether the pages within a tab belong to the base application or a sub-application, dynamic management of component caching is necessary.

[0144] The keepAlive parameter needs to be added to the routing management of each application, and different values ​​need to be dynamically assigned to it under different business conditions.

[0145] When developing business scenarios, you only need to check the value of keepAlive to complete various different business scenarios.

[0146] Since both the base application and sub-applications need to handle this logic, the component caching logic will be extracted into a separate utility class for use. (This functionality will be implemented in the utility class library.)

[0147] Step B: Establish a common UI component library and utility class library.

[0148] In the original management of a single application, there are some common UI component libraries and utility libraries that can be freely used within the application project.

[0149] Following the above division, the UI component library and utility library are managed using the npm (Ninja Pumpkin Mutants) public package manager. npm is the default package management system for Node.js, written in JavaScript. By packaging and publishing public resources to npm, users only need to install the resource with the specified version number to directly integrate it into their projects. Therefore, common components also need to be created as separate projects, such as the UI component library (xx-ui) and the utility library (xx-util).

[0150] Step B1, create the UI component library according to the following process:

[0151] Step B1-1: Build a component library project based on the scaffolding, and first implement and run a demo (small test program) component.

[0152] Step B1-2 involves extracting all UI (User Interface) components from the original system into this project, and improving the design of the component API (Application Program Interface), the implementation of component templates and styles, etc.

[0153] Steps B1-3, Packaging the component library: Use webpack to bundle the component library's JS code and use gulp to bundle the style code.

[0154] Webpack is a code compilation tool, a static module bundler for modern JavaScript applications. JS generally refers to JavaScript, a lightweight, interpreted or just-in-time (JIT) programming language with a function-first approach. Gulp.js is an open-source JavaScript toolkit created by Eric Schoffstall, used as a stream-based build system in front-end web development. It can automate specified tasks, offering simplicity and efficiency.

[0155] Steps B1-4: Publish the component library to npm for installation and use by the base application and sub-applications.

[0156] Steps B1-5 involve setting up a component library documentation site, which includes the interface definition, usage scenarios, and detailed examples for each component.

[0157] Step B2, create the utility class library according to the following process:

[0158] Step B2-1: Create an initial project based on Rollup. Rollup.js is a JavaScript module bundler that can compile small pieces of code into larger, more complex code, such as libraries or applications.

[0159] Step B2-2 involves extracting all utility libraries from the original system into this project and splitting them into modules, with each module implementing its own corresponding methods. This reduces maintenance costs.

[0160] Modules can be divided into categories such as: base, date, file, data, security, etc.

[0161] Step B2-3, Packaging utility library: Use the rollup packaging utility library.

[0162] Steps B2-4: Publish the utility library to npm for base applications and sub-applications to install and use.

[0163] Steps B2-5 involve setting up a tool library documentation site, which includes the interface definition, usage scenarios, and detailed examples for each module.

[0164] Step C: Use module extensions to rewrite the core logic of the N framework to fulfill qiankun's access requirements for sub-applications.

[0165] The N framework has a fully modular architecture. In order to connect to the Qiankun framework, it is necessary to use module extensions to rewrite the core logic of the N framework and establish a bridge project (Qiankun Bridge).

[0166] Specifically, sub-applications need to export three lifecycle hooks—bootstrap (initialization), mount (mounting), and unmount (unmounting)—on their own entry JS files so that the base application can call them at the appropriate time.

[0167] Bridge engineering should be constructed according to the following process:

[0168] Step C1, rewrite the client.js template file under the N framework:

[0169] Step C1-1: When using qiankun, expose the bootstrap (initialization), mount (mounting), update (updating), and unmount (unmounting) lifecycle functions required by the qiankun framework; otherwise, retain the original logic and perform screen rendering.

[0170] In step C1-2, in the case of qiankun, the value of the global path variable (webpack_public_path) is not changed. Here, publicPath specifies the base path for all resources in the application. Webpack exposes a global variable named __webpack_public_path__, which can be set at runtime.

[0171] In step C1-3, when creating an app in Qiankun mode, the data parameters passed from the base application need to be set in the global configuration variables so that the base application instance can be registered later.

[0172] In steps C1-4, when loading asynchronous components, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is done, and the subsequent route jump logic is skipped and executed.

[0173] In steps C1-5, during screen rendering, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is performed, and the subsequent route jump logic is skipped and executed.

[0174] In steps C1-6, during component normalization, in Qiankun mode, if the route jump is first to the path of the micro-application, then the normalization logic operation is executed.

[0175] In steps C1-7, when mounting the application (mountApp), in Qiankun mode, the mount point of the sub-application needs to be changed; in non-Qiankun mode, the original logic remains unchanged.

[0176] Steps C1-8 define a global app instance so that the app instance can be accessed in various function logics.

[0177] Step C2: Define an instance and register the plugin.

[0178] This step injects various instances into the micro-application.

[0179] Step C3: Write the client.js module file. The client.js template file is used to write the implementation logic for connecting to Qiankun.

[0180] Step C3-1: Receive externally defined parameters. These parameters include, but are not limited to, hookFilePath: the file path for the business logic in the hook function; webpackOutput: defining webpack's output options; and unique: whether the package name of the sub-application needs to be unique, etc.

[0181] Step C3-2: Add a template plugin to this module.

[0182] Specifically, add the registered plugin from step C2.

[0183] Step C3-3: Extend the webpack configuration and output umd or custom libraries (exposing mount points).

[0184] Step C3-4: Add a template file for this module.

[0185] Specifically, add the template file obtained in step C1.

[0186] Step C3-5: Add the hook function listen => set the absolute path of the HTML entry so that the sub-application can be retrieved correctly.

[0187] Step C3-6, add the hook function render:route => set Access-Control-Allow-Origin for the compiled file.

[0188] This project will be published as a common resource to the npm public repository so that various sub-applications can directly install and reference it, and configure it as part of the sub-application's module for use.

[0189] Step D: Create scaffolding projects for each sub-application.

[0190] Considering that application systems can be rapidly iterated, deployed, and put into use, providing a quick method for creating sub-applications would save a lot of unnecessary repetitive work and time. Therefore, this invention provides a sub-application scaffolding project, which can directly generate an initial, runnable sub-application system with a single command.

[0191] The scaffolding project CLI includes, but is not limited to: sub-application template project (xx-template) and creation sub-application project (xx-cli).

[0192] Step D1: Create a sub-application template project based on the N framework through the following process:

[0193] Step D1-1: Establish the basic directory structure used under the N framework.

[0194] Steps D1-2 integrate various front-end UI component libraries and test automation framework libraries into the project.

[0195] Steps D1-3 resulted in the creation of various template files that would generate different content based on different settings.

[0196] The template files in this step include code files and various code style verification files.

[0197] Steps D1-4 establish common processing logic that needs to be performed in a series of micro-applications after accessing Qiankun.

[0198] This step simplifies the logic processing of the micro-frontend part in the sub-application, allowing the sub-application to focus more on business-oriented development.

[0199] Step D1-4-1: Add the internal logic implementation files for various functions in the qiankun lifecycle to be exported.

[0200] In step D1-4-2, the N framework configuration file adds the introduction of the bridge project (xx-bridge-module module), and the compilation modules for the UI component library (xx-ui) and utility library (xx-util).

[0201] In step D1-4-3, add the bridge project (xx-bridge-module), UI component library (xx-ui), and utility library (xx-util) to package.json.

[0202] Step D1-4-4: Common processing of include and exclude in component caching.

[0203] Step D1-4-5: Add logic processing for data communication with the main application.

[0204] Step D1-4-6: Add the plugin file for route management.

[0205] Step D2, create the sub-application project through the following process:

[0206] Objective: To provide an interactive command-line tool for quickly generating initial projects for sub-applications.

[0207] Functions: (including but not limited to the functions listed below)

[0208] Step D2-1: Write the entry file cli.js;

[0209] Step D2-1-1: Receive various parameters input from the command line and verify the rationality of the parameters;

[0210] Step D2-1-2: Initialize the cac (third-party command-line application library) object;

[0211] Step D2-1-3: Register the commands and option values ​​for cac;

[0212] Step D2-1-4: Obtain command line parameters and pass them to the sao library (sao is a front-end scaffolding tool that can create many templates and generate initialization code in batches based on the templates) to configure the project and generate project files.

[0213] Step D2-2: Write the template processing file saofile.js;

[0214] Step D2-2-1, Prepare the template;

[0215] Step D2-2-1-1: Prepare the N framework project template: including all files that can run the N framework and dynamically configurable template files, etc.

[0216] Step D2-2-1-2: Prepare the template files for the third-party framework. These template files include the UI library, test library, lint, etc.

[0217] Step D2-2-1-3: Prepare the logic processing files for the baseboard to interface with Qianku, as well as dynamically configurable template files, etc.

[0218] Step D2-2-2: Set up the configuration file for the questions and answers;

[0219] Step D2-2-3: Based on the answer selected by the user in the CLI, add, move, modify, and remove operations for the various template files in step D2-2-1 in the action.

[0220] Step D2-2-4: Following the execution order and instructions defined in the action, dynamically modify all template files to generate the completed project.

[0221] This completes the division of all application projects, as detailed below:

[0222] Base application: The application architecture that includes basic functions;

[0223] Sub-applications: need to be categorized according to specific industries;

[0224] Common elements: UI component library and utility library;

[0225] Bridge engineering, implementing the module for N-framework connection to qiankun;

[0226] Scaffolding project: Sub-application template project, create sub-application project.

[0227] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications to the technical solutions described in the foregoing embodiments, or equivalent substitutions for some or all of the technical features, do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for implementing multi-application micro-frontends based on a software development framework, characterized in that, Includes the following processes: Step A: Based on the needs of project management, the application is split into a base application and sub-applications; wherein, the base application is the underlying architecture of the system, and the base application contains the application architecture of basic functions; the sub-applications can be specifically divided according to industry. Step B: Establish a common UI component library and utility library; Step C involves using module extensions to rewrite the core logic of the N framework to fulfill qiankun's access requirements for sub-applications; Step C includes steps C1 to C3: Step C1: Rewrite the client.js template file under the N framework; Step C2: Define an instance and register the plugin; Step C3: Write the client.js module file; Step C1 includes steps C1-1 to C1-8: Step C1-1: When using qiankun, expose the bootstrap, mount, update, and unmount lifecycle functions required by the qiankun framework; otherwise, retain the original logic and perform screen rendering. In step C1-2, in the case of qiankun, the value of webpack_public_path is not changed; Step C1-3: In Qiankun mode, when creating an app, the data parameters passed from the base application need to be set into the global configuration variables. In steps C1-4, when loading asynchronous components, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is done, and the subsequent route jump logic is skipped and executed. Steps C1-5: During screen rendering, in Qiankun mode, if the route jump is not the path of the micro-application, no processing is done, and the subsequent route jump logic is skipped and executed. Steps C1-6: During component normalization, in Qiankun mode, if the route jump is first to the path of the micro-application, then the normalization logic operation is executed. In steps C1-7, when mountingApp, in qiankun mode, the mount point of the sub-application needs to be changed; in non-qiankun mode, the original logic remains. Steps C1-8 define a global app instance so that the app instance can be accessed in various function logics; Step C3 includes steps C3-1 to C3-6: Step C3-1: Receive externally defined parameters; Step C3-2: Add a template plugin to this module; Step C3-3: Extend the webpack configuration and output umd or a custom library; Step C3-4: Add a template file for this module; Step C3-5: Add the hook function listen and set the absolute path of the HTML entry so that the sub-application can be retrieved correctly; Step C3-6: Add the hook function render:route to set Access-Control-Allow-Origin for the compiled file; Step D: Create scaffolding projects for each sub-application.

2. The multi-application micro-frontend implementation method based on a software development framework as described in claim 1, characterized in that, Step A includes steps A1 to A5: Step A1: Create the basic functions of the base application; Step A2: Perform route management; Step A3: Establish communication mechanisms for the base application and sub-applications respectively; Step A4: Use tabs to manage each page; Step A5: Establish a dynamic management mechanism for component caching.

3. The multi-application micro-frontend implementation method based on a software development framework as described in claim 2, characterized in that, Step A2 includes the following steps A2-1 to A2-2: Step A2-1: Perform page-level modifications to the system; Step A2-1-1: Add dynamic configuration management for micro-applications to the main application, allowing you to add / modify / delete configuration information for sub-applications as needed; Step A2-1-2: Configure the menu definition; Step A2-2: Perform framework-level modifications; Step A2-2-1: Add a routing plugin; Step A2-2-2 involves loading and unloading the base application and its sub-applications.

4. The multi-application micro-frontend implementation method based on a software development framework as described in claim 1, characterized in that, In step B, the UI component library and utility library are managed using the npm public package.

5. The multi-application micro-frontend implementation method based on a software development framework as described in claim 4, characterized in that, In step B, Includes the following steps B1 to B2: Step B1: Create the UI component library according to steps B1-1 to B1-5 below; Step B1-1: Build a component library project based on the scaffolding, and first implement and run a test program component; Step B1-2: Extract all UI components into this project and refine the design of component APIs, component templates, and styles; Steps B1-3, Bundling the component library: Use webpack to bundle the component library's JS code and use gulp to bundle the style code; Steps B1-4: Publish the component library to npm for installation and use by the base application and sub-applications; Steps B1-5: Build a component library documentation site, which includes the interface definition, use cases, and detailed examples for each component; Step B2: Create the utility class library according to steps B2-1 to B2-5 below; Step B2-1: Create an initial project based on Rollup; Step B2-2: Extract all the utility libraries from the original system into this project and split the modules. Step B2-3: Use Rollup to package utility libraries; Steps B2-4: Publish the utility library to npm for installation and use by the base application and sub-applications; Steps B2-5: Build a tool library documentation site.

6. The multi-application micro-frontend implementation method based on a software development framework as described in claim 1, characterized in that, Step D includes the following steps D1 to D2: Step D1: Create a sub-application template project based on the N framework through the following steps D1-1 to D1-4: Step D1-1: Establish the basic directory structure used under the N framework; Steps D1-2: Integrate various front-end UI component libraries and test automation framework libraries into the project; Steps D1-3: Customize various template files that will generate different content based on different settings; Steps D1-4 establish common processing logic that needs to be performed in a series of micro-applications after accessing Qiankun. Step D1-4-1: Add the internal logic implementation files for various functions in the qiankun lifecycle to be exported; Step D1-4-2: The N framework configuration file adds the import of bridge engineering; and the import of compilation modules for UI component library; and utility class library; Step D1-4-3: Add the bridge project, UI component library, and utility library to package.json; Step D1-4-4: Common handling of include and exclude in component caching; Step D1-4-5: Add logic processing for data communication with the main application; Step D1-4-6: Add the plugin file for route management; Step D2: Create a sub-application project by following steps D2-1 to D2-2: Step D2-1: Write the entry file cli.js; Step D2-1-1: Receive various parameters input from the command line and verify the rationality of the parameters; Step D2-1-2: Initialize the cac object; Step D2-1-3: Register the commands and option values ​​for cac; Step D2-1-4: Obtain command-line arguments and pass them to the sao library to configure the project and generate project files; Step D2-2: Write the template processing file saofile.js; Step D2-2-1, Prepare the template; Step D2-2-1-1, Prepare the N framework project template: including all files that can run the N framework and dynamically configurable template files; Step D2-2-1-2: Prepare the template file for the third-party framework; Step D2-2-1-3: Prepare the logic processing files for the baseboard to interface with Qianku and the dynamically configurable template files; Step D2-2-2: Set up the configuration file for the questions and answers; Step D2-2-3: Based on the answer selected by the user in the CLI, add, move, modify, and remove operations for the various template files in step D2-2-1 in the action; Step D2-2-4: Following the execution order and instructions defined in the action, dynamically modify all template files to generate the completed project.

Images