A micro-front-end architecture based on qiankun and Web Component and a construction method of the micro-front-end architecture

Abstract

The invention discloses a micro-front-end architecture based on qiankun and Web Component and a construction method of the micro-front-end architecture. The construction method of the micro-front-end architecture comprises the steps of constructing a micro-service architecture based on the qiankun and constructing a universal component library based on the Web Component. The micro-service architecture comprises a main application and a plurality of sub-applications, each sub-application is registered in the main application, and the main application is configured as an entrance to realize access to each sub-application; the universal component library is configured to be a Web component library, components capable of being reused are provided for upper-layer applications, the component library does not limit technical stacks, and web components have the characteristics of being irrelevant to the technical stacks and at least support React components, Vue components and Angular components. According to the micro-front-end mode, the complex application is decomposed, so that the function of each sub-application is more concise, the dependence of the sub-applications is independent, the sub-applications can be allocated to different developers for maintenance, and compared with the mode that a whole development team maintains a large complex application, code conflicts possibly generated during development are reduced, and the development and maintenance difficulty 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