This paper is based on the Qiankun implementation library to do a knowledge reorganization and implementation.

What is a micro front end

Microfront-end is a kind of architecture similar to microservices, which applies the concept of microservices to the browser side, that is, the Web application is transformed from a single application to a number of small front-end applications into one application. Each front-end application can also run, develop and deploy independently. A microfront-end is not a simple front-end framework or tool, but a set of architecture.

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends microfronds are a technical approach and strategy by which multiple teams work together to build modern Web applications by publishing functionality independently.Copy the code

Why use a microfront-end architecture

Any new technology is created to address technical pain points in existing scenarios and requirements, and the micro front end is no exception:

  • Split and refine

In the current front-end field, single page application (SPA) is one of the very popular project forms. As time goes by and the application functions become richer, single page application is no longer single, but increasingly large and difficult to maintain. It is often to change a place and change the whole body, resulting in higher and higher cost of development. The point of the micro front end is to break these massive applications apart and then decouple them so that each part can be maintained and deployed separately to improve efficiency.

  • Integrated historical system

In many businesses, there are more or less some historical projects, most of which are b-side management systems based on the old framework. In daily operation, these systems need to be combined with the new framework and cannot be abandoned. There is no reason for us to waste time and energy rewriting the old logic. The micro front end can integrate these systems, and at the same time compatible with the new and old systems running in parallel without modifying the logic basically.

Core values of the microfront-end architecture

  • Stack independent

The main framework does not limit the technology stack of access applications, and microapplications have full autonomy.

  • Independent development and deployment

The microapplication repository is independent, and the front and back ends can be independently developed. After deployment, the main framework automatically completes synchronous updates, and development processes such as automatic deployment can be connected.

  • The incremental upgrade

Instead of a full stack upgrade or refactoring of an existing project, incremental upgrades are made to the project using the micro-front-end architecture in the face of various complex scenarios.

  • Independent operation

In the process of running, each microapplication is isolated and not shared, but can use communication mode for data exchange.

Why choose microfront-end over IFrame

Iframe is an almost perfect microfront-end solution if you leave aside the experience issues.

Iframe provides the browser native hard isolation scheme, no matter the style isolation, JS isolation and other problems can be perfectly solved, but its biggest problem is that its isolation can not be broken, resulting in the application context can not be shared. Then comes the question of development experience versus product experience.

  • The URL is not synchronized. If the browser refreshes the IFrame URL status, the url status is lost, and the back forward button is unavailable.
  • The UI is not synchronized and the DOM structure is not shared.

For example, we used the Model component from the ANTD component library in our micro application. If we embed the iframe in the bottom right quarter of the screen, then when using the full project, you will find that the popover is not in the middle of the page, but in the middle of the iframe, which will affect the page very much.

  • The global context is completely isolated and memory is not shared. Iframe communication between internal and external systems. Data synchronization requirements

  • Long loading time. Each child application entry is a process of rebuilding the browser context and reloading resources.

In summary, iframe is only a solution, but why not if there is a better microfront-end framework?