Location>code7788 >text

The bridge solution of micro front-end, breaking the technical stack dimension wall - achieving seamless docking

Popularity：602 ℃/2025-02-19 12:16:42

Introduction

1. What is the micro front-end bridging solution?

It is a new micro front-end solution, using a clever method to implement the micro front-end architecture, and the interoperability between different technical stacks can be achieved by calling higher-order functions.

2. What is seamless?

Micro-application access is no different from native technology stack applications, and no additional information is required

3. Why is it necessary, and whether to recreate the wheel?

During the implementation of project practice, different implementation plans have been investigated and tried, either the compatibility issue or the project transformation is a bit heavy, and the CSS style isolation is also a headache. So the bridge plan was born.

There are many micro front-end solutions now, why use the bridge solution? Let’s first summarize and sort out the current mainstream methods:

1. Module Federation based on Webpack 5

  • Advantages: It can realize third-party dependency sharing, reducing unnecessary code introduction; micro-applications can be updated dynamically without repackaging and publishing integrated applications; decentralization, and direct communication between each micro-application.

  • Disadvantages: It has a high dependence on webpack5, and it is difficult to access the project without using webpack5.

2. Based on iframe

  • Advantages: Simple implementation, no need to modify existing applications; it can provide browser native hard isolation, JS, CSS, and DOM are completely isolated and do not affect each other; messaging can be carried out through the postMessage API.

  • Disadvantages: Unable to maintain the routing state, the route is lost after refresh, the browser's forward and backward function is limited; the context between applications is difficult to share and interaction is difficult; pop-ups can only be displayed inside the iframe; full resource loading, poor performance; it is not conducive to SEO.

3. Based on Web Components + Sandbox

  • Advantages: CSS and JavaScript are naturally isolated to avoid style conflicts and script pollution; native browser supports it and does not rely on specific frameworks or libraries; multiple sub-applications can coexist, supporting parallel development and independent deployment.

  • Disadvantages: There are problems with browser compatibility, and some browsers do not fully support it; the development cost is high, and existing applications may need to be rewrited; and communication between components requires additional design.

4. sigle-spa + sandbox

  • Advantages: The technology stack is irrelevant, and any application of the technology stack can be accessed; the HTML entry access method is adopted, and the access cost is low; it provides functions such as style isolation, JS sandboxing, and resource preloading.

  • Disadvantages: Incomplete style isolation problems, certain restrictions on packaging tools, etc., component communication problems, etc.

Basically, there is either a problem with style isolation or compatibility issues...

What is the difference between a bridge solution and other micro front-end solutions?

  • 1. It is easier to use, more natural to use, no additional knowledge, create bridge components through advanced functions and use them directly

  • 2. No dependencies between iframe and shadow dom, better compatibility

  • 3. Component communication is more natural (parent-child component communication can be performed through native props attributes)

  • 4. Component-able import of sub-applications/sub-components

  • 5. The style isolation problem is better handled (the use of css-module or scoped isolation scheme depends on the configuration of the project's own packaging tool)

So how to prove the above conclusion? Just put the code without saying much nonsense.

Code Demo

Take react 18 as an example, if you want to connect to vue2

1. The first step is to create a bridge application

//Suppose the sub-app path is .children-app/accessor/Button
 import vue from 'vue'
 import { createVueBridge } from 'micro-frontend-bridge/for-react'
 import Button from './'

 //Suppose the sub-application is a vue2 project
 //Create a bridge accessor for vue2
 const accessor = createVueBridge(vue)
 //The accessor is a higher-order function used to link the vue button
 export default accessor(Button)

Step 2 Output Bridge Component

Package button into lib through packaging tool and enter it into the main application

Step 3: The main application uses the bridge component

//Suppose that the main application has a file and the bridge folder has a bridge component
 //The main application is a React 18 project
 import React from 'react'
 import Button from 'bridge/Button'

 //Use vue2 button in react18. It is recommended to use capital component names to distinguish bridge components.
 const BUTTON = Button(React)

 const App = () => {
   Return (
     <div>
       <BUTTON color="grey" />
     </div>
   )
 }

That's right, react 18 and vue2 are already seamlessly connected at this time, so how to communicate with components?

Component communication is also very natural. You can directly pass attributes based on props. The color attribute in the code will be passed to the button of vue2. The callback function can also perform parent-child component communication without any difference from the native communication mode. (There is an online address at the end. practice).

To sum up:

  1. Create a bridge component
  2. Output components
  3. Using the bridge component

Here, the second step is to package the component and output the lib process. According to the characteristics of the project architecture, you can place the bridge component in the main application and add the packaging support of the sub-app to the main application. If your main application uses it, It's webpack, so you can add vue packaging support to the sub-app, and you can omit the step of configuring packaging lib

The following example is to adjust the bridge component directory to the main application

//Suppose the application path of the bridge component is bridge/Button
 import vue from './children-app/node_modules/vue'
 import { createVueBridge } from 'micro-frontend-bridge/for-react'
 //The path is introduced here and has been adjusted
 import Button from '../children-app/'

 //Suppose the sub-application is a vue2 project
 //Create a bridge accessor for vue2
 const accessor = createVueBridge(vue)
 //The accessor is a higher-order function used to link the vue button
 export default accessor(Button)

Adjust webpack packaging support

 {
          test: /\.vue$/,
          include: [(__dirname, 'children-app')],
          use: {
            loader: './children-app/node_modules/vue-loader/lib',
            options: {
              compiler: Vue2TemplateCompiler
            }
          }
        },

Usage Components

//Suppose that the main application has a file and the bridge folder has a bridge component
 //The main application is a React 18 project
 import React from 'react'
 import Button from 'bridge/Button'

 //Use vue2 button in react18. It is recommended to use capital component names to distinguish bridge components.
 const BUTTON = Button(React)

 const App = () => {
   Return (
     <div>
       <BUTTON color="grey" />
     </div>
   )
 }

(For specific demonstration, see the end line connection)

How to optimize this micro front-end application?

Generally speaking, due to the existence of different technology stacks, micro front-end access projects may lead to excessive package size. Since the bridge scheme itself is implemented based on higher-order functions, dynamic import and suspension can be used to load on demand. The purpose of optimization.

Finally, vue2 and vue3 are used as main applications as examples, if you access react components

import React from 'react'
import ReactDOM from 'react-dom'
import { h } from 'vue'
import { createReactBridge } from '@micro-frontend-bridge/for-vue'
import { App } from './'

// create vue3 accessor
const v3reactAccessor = createReactBridge(React, ReactDOM)

// create vue2 accessor
const v2reactAccessor = createReactBridge(React, ReactDOM)

//bridge react app to vue3
const V3APP = v3reactBridge(h)(App)

//bridge react app to vue2
const V2APP = v2reactBridge()(App)

sfc file

<template>
   <V2APP /> 
</template>

<template>
   <V3APP /> 
</template>

Online Demo

Click me

Warehouse address

hanyaxxx/micro-frontend-bridge

<Previous Next>