Introduction to micro front end

What is the micro front end

In order to solve the limitations of change and expansion caused by a large piece of back-end services. Micro front end is an architecture similar to micro services, which applies the concept of micro services to the browser. It is an application that transforms a single application of web application into an aggregation of multiple small front-end applications.

These individual applications can run independently, develop independently, deploy independently, and develop in parallel while sharing components.
It is characterized by:

The code base of a single application is smaller, cohesive and more maintainable.
Loosely coupled and self-made teams have better scalability.
It is possible to gradually upgrade, update and even reproduce some front-end functions.

Why do I need a micro front end

The micro front end mainly realizes decoupling. When the application reaches a certain scale, it can be considered to adopt the micro front end. It supports the division of the organization into more teams and even the creation of smaller full stack teams. It will play a greater role in some scenarios:

Incremental upgrade
Multiple teams contribute to the same front-end project
Some independent parts need to be activated and terminated by specific users or teams
External developers are required to extend the UI
The features of the UI will be gradually enriched and will not affect other parts of the system
Support different teams to use different development tools and front-end technology stacks

Which solutions can realize micro front end

The micro front end can be implemented in the following ways:

Use iframe combination
Server template rendering combination
Micro front-end framework single Spa

iframe

Iframe naturally has micro front-end genes. Only a single front-end application needs to be split and deployed according to the business module. Then it can be loaded dynamically through iframe.

<html>
  <head>
    <title>Micro front end-iframe</title>
  </head>
  <body>
    <h1>I'm a container</h1>
    <iframe id="microIframe"></iframe>
    <script type="text/javascript">
      const routes = {
        "/": "https://wekic.com",
        "/app1": "https://dev.wekic.com",
        "/app2": "....",
      };

      const iframe = document.getElementById("microIframe");
      iframe.src = routes[window.location.pathname];
    </script>
  </body>
</html>

The biggest feature of iframe is that it provides a native hard isolation scheme for browsers. Both style isolation and js isolation can be perfectly solved. But his biggest problem is that his isolation can not be broken through, resulting in the context between applications can not be shared, resulting in the problems of development experience and product experience.

The disadvantages are:

The url cannot be synchronized, the browser refresh iframe url status is lost, and the back and forward button cannot be used
The UI is not synchronized and the DOM structure is not shared. If there is a pop-up window with a mask in the iframe in the lower right corner of a plane, at the same time, we require the pop-up box to be displayed in the middle, and it should be automatically centered when the browser resize s.
The global context is completely isolated and memory variables are not shared. According to the requirements of communication and data synchronization between internal and external systems of iframe, the main application cookie should be transmitted to sub applications with different root domain names to achieve the effect of login free.
Slow down. Each sub application entry is a process of browser context reconstruction and resource RE addition.

Some of these problems are easy to solve, such as the first point. Some problems we can ignore a little (problem 4), but some problems are difficult to solve (problem 3) or even impossible to solve (problem 2).

Server template combination

The server dynamically renders the template file of a specific page according to the route. The server dynamically sets the template to be loaded according to the url path.

server {
    listen 8080;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    ssi on;

    rewrite ^/$ http://localhost:8080/app redirect;

    location /app {
      set $PAGE 'app';
    }
    location /app1 {
      set $PAGE 'app1';
    }
    location /app2 {
      set $PAGE 'app2';
    }

    error_page 404 /index.html;
}

The advantages are simple implementation and independent technology stack.
The disadvantage is that it requires additional configuration of Nginx, and the separation is not complete.

Micro front-end framework single Spa

Single spa is a JavaScript front-end solution for front-end microservicing (there is no processing style isolation and js execution isolation) to realize route hijacking and application loading.

With the help of single-spa , developers can use different technology stacks for different sub applications. For example, sub application A is developed by vue and sub application B is developed by react. There is no historical debt at all.

import * as singleSpa from "single-spa";
const app1Url = "http://app1.com/app1.js";
const app2Url = "http://app1.com/app2.js";

singleSpa.registerApplication(
  "app1",
  () => loadJS(app1Url),
  (location) => location.pathname.startsWith("/app1")
);

singleSpa.registerApplication(
  "app2",
  () => loadJS(app1Url),
  (location) => location.pathname.startsWith("/app2")
);

singleSpa.start();

The sub application needs to expose three APIs

let domEl;
export function bootstrap(props) {
  return Promise.resolve().then(() => {
    domEl = document.createElement("div");
    domEl.id = "app1";
    document.body.appendChild(domEl);
  });
}
export function mount(props) {
  return Promise.resolve().then(() => {
    domEl.textContent = "App 1 is mounted!";
  });
}
export function unmount(props) {
  return Promise.resolve().then(() => {
    domEl.textContent = "";
  });
}

Advantages of single Spa:

Pure front-end solution
Multiple technology stacks can be used
Perfect ecosystem

Disadvantages:

The starting cost is slightly higher
Existing applications need to be modified
Cross application complexity

qiankun

qiankun The unified access platform of cloud products incubated from ant financial technology based on micro front-end architecture. After a number of online applications have been fully tested and polished, we have extracted and opened its micro front-end kernel, hoping to help systems with similar needs in the community to build their own micro front-end system more conveniently, At the same time, we also hope to polish qiankun more mature and perfect with the help of the community.

Based on single spa, qiankun provides a more out of the box API (single spa + sandbox + import HTML entry), which is independent of the technology stack and easy to access.

summary

The micro front-end architecture has the following core values:

Independent of the technology stack, the main framework does not limit the access to the technology stack of the application, and the sub application has full autonomy.
Sub applications are developed, deployed and stored independently. The front and back end can be developed independently. After deployment, the main framework will automatically complete synchronous update.
It runs independently. The state of each application is isolated, and the running state cannot be shared.

The micro front-end architecture aims to solve the problem that a single application changes from a common application to a relatively complex application due to the increase and change of participants and teams in a relatively long time span. The consequent problem that the application is not maintainable. These problems are common in enterprise web applications.

Keywords: Web Development

Added by esiason14 on Mon, 31 Jan 2022 20:11:39 +0200

Programming VIP