What is the micro front end

To put it simply, a micro front end is an application composed of multiple applications or a main application composed of multiple micro applications

Put it another way: Break the big thing down into manageable pieces.

Microfront-end architecture

It satisfies several characteristics:

  1. Stack independent
  2. Several microapplications can use different frameworks
    • Microapplications are independently developed and deployed
  3. The warehouses are independent and deployed separately
    • The microapplications do not affect each other and have high stability
  4. Independent operation
    • State data is isolated and not shared between each microapplication

Application Scenarios:

Generally, the micro front end is still applied in the management end, and the mobile end is seldom applied.

For example, there are multiple business departments in the company, each of which has a business management background. However, the management department proposes an aggregation function requirement. It is necessary to merge the business management background of each department into a general background and load each business management background to the general background. At this time, some of the management background is VUe2, some are VUe3, some are React, and some are Angular. Due to different technical frameworks, the labor cost and time cost of migration will be high.

However, if the micro front-end architecture is used, the characteristics of the micro front-end architecture can be used to meet this requirement at a lower cost. The main backend is used as the main application, and each business management background is used as a micro application.

Several common microfront-end scenarios

Route Jump Distribution

As shown in the figure, in the main application, the URL jump is used to enter another micro-application

That is, they are routed to different independent front-end applications.

Routing can be implemented either by the application framework’s own routing or by the server’s reverse proxy.

iframe

You can create a whole new, separate hosting environment that is friendly to display microapplications in the main application.

Here are the communication modes of IFrame:

// parent <body> <iframe id="react_iframe" SRC ="http://localhost:3000/"> </iframe> </body> <script> // Parent window passes information to child window document.getElementById("react_iframe") .contentWindow.postMessage("react", "http://localhost:3000/"); Window. addEventListener("message", function (e) {console.log("form_child_iframe", e); }); < / script > child SRC: / / http://localhost:8080/ "/ / child window. The window listening to the parent window's message addEventListener (" message", receivePerentMessage, false); function receivePerentMessage(event) { console.log("form_perent_window", event); } / / child window message window to the parent window. The parent. PostMessage (" child ", "*");Copy the code

Disadvantages:

  1. The URL is not synchronized. The iframe data status is lost and the navigation function is unavailable when the browser is refreshed.
  2. UI is out of sync. The Dom cannot be rendered outside the scope of the IFrame. If you want to pop up in the browser center, you need to use iframe communication to pop up compatibility in the main application.
  3. The cookie of the master application should be transparently transmitted to the sub-applications with different root domain names to achieve the effect of no login.
  4. Storage also needs to be transmitted from the micro application to the main application.
  5. The loading speed is slow. Each child application entry is a process of browser context reconstruction and resource reloading.

Based on the disadvantages of using iframe as a micro front end, we need to consider:

  1. Design management application mechanism
    1. The interaction between the master application and the microapplication needs to be considered
      1. Loading and unloading of components in a window
      2. Copy a common UI component to the main application, such as a browser full screen popover
  2. Design application communication mechanism
    1. Data sharing
    2. Reactive refresh
    3. Event listeners

The application of the

Microapplication refers to the development and operation of applications in the form of a single, small application.

Qiankun. Js framework

Qiankun is a single-SPa-based micro-front-end implementation library that aims to make it easier and painless to build a production-ready micro-front-end architecture system.

Active application Configuration Configuration mode

Configuration mode of each micro-application framework

Qiankun.js communication mode

Import {loadMicroApp} from 'qiankun'; import {loadMicroApp} from 'qiankun'; microApp = loadMicroApp({ name: 'app1', entry: '//localhost:1234', container: this.containerRef.current, props: {brand: 'qiankun'}, // here we can pass the props property to microapplications});Copy the code
Export async function mount(props) {renderApp(props); }Copy the code

What if microapplications need to share data state with microapplications

// import {initGlobalStates} from 'qiankun'; // Initialize state const state={} const Actions = initGlobalState(state); Actions. OnGlobalStateChange ((state, prev) = > {/ / state: changed status; Prev Status before change console.log(state, prev); });Copy the code
Export function mount(props) {// Listen on the global state of the current application, Any change triggered the callback props. OnGlobalStateChange ((state, prev) = > {/ / state: after the change of state; Prev Status before change console.log(state, prev); }); // Set state API props. SetGlobalState (state); }Copy the code