One line of code to realize the micro front end

Seeing the title, the first thing that everyone thinks of should be iframe. It is true that iframe can do it, but what we are going to talk about today is not it, but a newly launched micro-front-end framework micro-app . As for why not iframe, please refer to Why Not Iframe .

What is micro-app

micro-app is a micro-front-end framework based on WebComponent-like rendering. It realizes the micro-front-end from a component-based thinking, and aims to reduce the difficulty of getting started and improve work efficiency. It is currently the lowest cost framework for accessing micro front-ends on the market, and provides a series of complete functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plug-in system, and data communication.

The basic implementation idea of micro-app is similar to single-spa and qiankun, but it draws on the idea of WebComponent, uses CustomElement and custom shadowDom, and encapsulates the micro-front end in a WebComponent-like component, thereby simplifying the rendering steps.

how to use?

1. Installation dependencies

yarn add @micro-zoe/micro-app

2. Introduce micro-app

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

3. Use in the page

<template>
  <div id="app">
    <!--micro-app标签最终会渲染为一个微前端应用-->
    <micro-app name='app1' url='http://localhost:3000/'></micro-app>
  </div>
</template>

rendering effect

It can be seen that the use of micro-app is as simple as iframe, and the rendered html structure is similar to WebComponent, so why not use WebComponent directly?

Mainly because the compatibility of WebComponent's core API-ShadowDom is too poor, and it cannot run normally under the React framework. ShadowDom mainly provides two functions: style isolation and element isolation, that is, sub-applications and base applications can have the same class and id without affecting each other.

The micro-app simulation realizes the function of ShadowDom, so that the style and element scope of the sub-application are fixed inside the micro-app element, and the micro-app element has the ability similar to ShadowDom.

Careful children's shoes will find out here, you are obviously three lines of code, which does not match the title, you are the title party!

Yes 😂. The use scenario of the micro front end is very complicated. If the sub-application has only one page, you only need to insert the micro-app tag to render. If the sub-application is a multi-page application, you also need to modify the routing configuration. But it is very simple to modify the routing configuration, only a few lines of code can be done. For details, please refer to here . Even if you have never touched the micro front end, you can get everything done in an hour.

data communication

In addition to the rendering of the micro front end, data communication is the most troublesome thing. Fortunately, the data communication of micro-app is very simple, and its transmission method is similar to the component properties.

<template>
  <div id="app">
    <!--data数据每次更新时都会发送给子应用-->
    <micro-app name='app1' url='http://localhost:3000/' :data='mydata'></micro-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mydata: {
        type: '发送给子应用的数据'
      },
    }
  },
 }
</script>

sub-applications obtain data through event binding

// 子应用
window.microApp?.addDataListener((data) => {
  console.log("来自基座应用的数据", data)
})

Summarize

The use of micro-app is as simple as iframe, but it avoids the problems of iframe. In addition to these, micro-app also provides a wealth of functions that can meet any business needs and can be applied to any framework.

If you are interested, come and try it!

Related address

micro-app code address: https://github.com/micro-zoe/micro-app