The first thing that comes to mind when you see the title is iframe. Admittedly, iframe can be done, but what we are going to talk about today is not it, but a new micro front-end framework micro-app. For details on Why Not use an iframe, see Why Not iframe.

Micro – what is app

Micro-app is a micro front end framework based on WebComponent-like rendering. It implements micro front end from component-based thinking, aiming to reduce the difficulty of getting started and improve work efficiency. It is the lowest cost framework for micro front end in the market at present, and provides JS sandbox, style isolation, element isolation, preloading, resource address completion, plug-in system, data communication and a series of perfect functions.

Micro-app’s basic implementation idea is similar to single-Spa and Qiankun, but it draws on the idea of WebComponent, using CustomElement and custom shadowDom to encapsulate the micro front end in a WebComponent-like component. This simplifies the rendering step.

How to use it?

1. Install dependencies

yarn add @micro-zoe/micro-app
Copy the code

2. Introduce micro-app

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

microApp.start()
Copy the code

3, use in the page

<template>
  <div id="app">
    <! -- The micro app TAB will eventually render as a micro front end application -->
    <micro-app name='app1' url='http://localhost:3000/'></micro-app>
  </div>
</template>
Copy the code

rendering

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?

This is mainly because WebComponent’s core API, ShadowDom, is so incompatibable that it doesn’t work properly under the React framework. ShadowDom provides two main features: style isolation and element isolation, which means that child applications and base applications can have the same class and ID without affecting each other.

Micro-app simulation has realized the function of ShadowDom, making the style and element scope of sub-applications fixed inside the micro-App element, and the micro-APP element has the ability similar to ShadowDom.

Careful children’s shoes to see here will be found, you this is clearly three lines of code, and the title does not match, you this title party!

Yes 😂. The usage scenario of the micro front end is very complex. If the sub-application has only one page, you only need to insert the micro-app label to render; if the sub-application is a multi-page application, you also need to modify the route configuration. However, modifying the routing configuration is as simple as a few lines of code, as you can see here. Even if you never touch the micro front, you can do everything in an hour.

Data communication

Apart from rendering the micro front end, the data communication is the most troublesome thing. Fortunately, the data communication of micro-app is very simple, and the way it is passed is similar to the component properties.

<template>
  <div id="app">
    <! --data is sent to the child application every time it is updated -->
    <micro-app name='app1' url='http://localhost:3000/' :data='mydata'></micro-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mydata: {
        type: 'Data sent to child applications',}}}},</script>
Copy the code

The child application obtains data through event binding

/ / application
window.microApp? .addDataListener((data) = > {
  console.log("Data from base applications", data)
})
Copy the code

conclusion

Micro-apps are as simple to use as iframes, but avoid the problems of iframes. In addition to these, micro-App offers a rich set of features that can meet any business requirement and can be applied to any framework.

Interested in children’s shoes to try it!

The relevant address

Micro-app code address: github.com/micro-zoe/m…