A micro-frontend architecture and its construction method based on qiankun and web Component

Abstract

The invention discloses a micro-front-end architecture based on qiankun and Web Component and a construction method thereof. The construction method of the micro-front-end architecture includes building a micro-service architecture based on qiankun and building a general component library based on Web Component; the micro-service architecture includes a main application and several Sub-applications, each sub-application is registered in the main application, and the main application is configured as an entry point to realize access to each sub-application; the general component library is configured as a Web Component component library to provide reusable components for upper-level applications, and the component library does not Restricting the technology stack, web components have technology-stack-independent features, and at least support React components, Vue components, and Angular components. This micro-frontend model makes the functions of each sub-application more concise by decomposing complex applications. The dependencies of sub-applications are independent, and sub-applications can be assigned to different developers for maintenance. Compared with the entire development team maintaining a large and complex application. In other words, the code conflicts that may occur during development are reduced, and the difficulty of development and maintenance is reduced.

Description

technical field [0001] The invention belongs to the field of front-end development and application, and in particular relates to a micro front-end architecture based on qiankun and Web Component and a construction method thereof. Background technique [0002] Microservice is an architecture and organizational form for developing software, which can split an application into multiple small modules, and each module can be developed, built, and deployed independently. The microservice architecture enables loose coupling of functionally independent modules, reduces the difficulty of software development, and improves the maintainability and later scalability of the software. [0003] There are already mature solutions for the microservice architecture in the backend field, but the microservice architecture in the frontend field has only gradually emerged in recent years, and all major teams are in the exploration stage. Front-end development faces the following problems: [00...

AI Technical Summary

Problems solved by technology

[0004] (1) The front-end technology is changing with each passing day, and the rapid change of technology has caused the coexistence of systems using different technologies and development frameworks in the front-end project, which makes it difficult for later system integration and maintenance

There are already solutions at the operation and maintenance level that use nginx to proxy to different applications, but switching applications in this way will trigger browser refresh and affect user experience;

[0005] (2) With the continuous increase of business volume, the front-end project has gradually evolved into a complex monolithic front-end project, which is prone to conflicts during collaborative development and difficult to maintain and expand

[0006] (3) There are many repetitive tasks in front-end development, and improving code reusability is a problem that is constantly being explored in the front-end field

To achieve componentization in large-scale projects, it is necessary to ensure that components and systems do not affect each other. The current componentization scheme relies on the framework, and it is difficult to achieve complete isolation between components and systems

Images