This is the second day of my participation in Gwen Challenge

1. Overview of the micro front-end

1.1 What is a microfront end

Microfront-end is a software architecture that can disassemble front-end applications into smaller micro-applications that can be independently developed and deployed, and then combine these micro-applications to form an architectural pattern of the overall application. A microfront-end architecture is similar to a component architecture, but components cannot be built and distributed independently. Applications in a microfront-end can. The microfront-end architecture is framework-independent; each microapplication can use a different framework.

1.2 Value of the micro front end

  1. The incremental migration

Migration is a time-consuming and difficult task. For example, there is a management system that has been developed and maintained using AngularJS for three years. However, as time goes by and team members change, AngularJS can no longer meet the requirements in terms of development costs and staffing requirements. You want to implement new requirements in other frameworks, but what about existing projects? Direct migration is not possible, and a complete rewrite in the new framework is not practical. The solution is to use a microfront-end architecture, which allows you to develop new requirements entirely using the new framework while preserving the original project, and then integrate the old project with the new project. In this way, not only can the product get better user experience, but also can make the team members in technology progress, product development cost is also reduced to the lowest.

  1. Independent publishing

In the current single-page application architecture, the user interface is built by components. After the development of each component or function in the application or the completion of bug repair, the entire product needs to be rebuilt and released every time, and the task is time-consuming and tedious. After using the micro front-end architecture, can will not be able to function modules of the split into separate application, the function module can separate build release, build time will be very fast, don’t need to change other content after release application will automatically update, this means that you can make frequent build release operation.

  1. Allow a single team to make technical decisions

Because a microfront-end architecture is framework-agnostic, when an application is being developed by multiple teams, each team can work with its own technology stack, which allows the team to make appropriate decisions about which technology to use, making collaboration less rigid.

Usage scenarios of the micro front end:

  • Breaking up giant applications makes them more maintainable
  • Compatible with historical applications to achieve incremental development

1.3 How to Realize the micro front End

  1. How can multiple microapplications be combined?

In the micro-front-end architecture, in addition to the existence of multiple micro-applications, there is also a container application, and each micro-application needs to be registered with the container application. Each application in the microfront is a separate JavaScript module in the browser that is started and run by the container application in a modular fashion. Running applications in a modular manner prevents conflicts between different microapplications running at the same time.

  1. How to implement routing in microapplications?

In the micro-front-end architecture, when the route changes, the container application will first intercept the change of route and match the micro-front-end application according to the route. When the micro-application is matched, the micro-application route will be started to match the specific page component.

  1. How to share state between microapplications?

State sharing can be achieved in microapplications through a publish-subscribe model, such as using RxJS.

  1. How to share framework and library between microapplications?

Use the externals attribute in import-map and webpack.

2. Systemjs modular solution

2.1 an overview of the

In the microfront-end architecture, microapplications are packaged as modules, but the browser does not support modularization, and you need to use SystemJS to implement modularization in the browser. Systemjs acts primarily as a loader in microservices. Systemjs is a JavaScript library for modularity, with its own modularity specification. During the development phase we can use the ES module specification and then use WebPack to convert it to systemJS supported modules.

2.2 Basic Cases

Code examples: Package the React application as a SystemJS module with Webpack, Then use systemJS to load the module NPM install [email protected] [email protected] [email protected] [email protected] in the browser @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] [email protected]

package.json

// Install react-related dependencies in systemJS
{
    "name": "systemjs-react"."scripts": {
        "start": "webpack serve"
    },
    "dependencies": {
        "@babel/cli": "^ 7.12.10"."@babel/core": "^ 7.12.10"."@babel/preset-env": "^ 7.12.11"."@babel/preset-react": "^ 7.12.10"."babel-loader": "^ 8.2.2"."html-webpack-plugin": "^ 4.5.1." "."webpack": "^ 5.17.0"."webpack-cli": "^ 4.4.0"."webpack-dev-server": "^ 3.11.2"}}Copy the code

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development".entry: "./src/index.js".output: {
        path: path.join(__dirname, "build"),
        filename: "index.js".libraryTarget: "system" / / key 🏆
    },
    devtool: "source-map".devServer: {
        port: 9000.contentBase: path.join(__dirname, "build"),
        historyApiFallback: true
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader".options: {
                    presets: ["@babel/preset-env"."@babel/react"]}}}]},plugins: [
        new HtmlWebpackPlugin({
            inject: false.// The packaged JS is not automatically loaded
            template: "./src/index.html"})].externals: ["react"."react-dom"."react-router-dom"] // Do not pack through webpack
}
Copy the code

SRC /index.html introduces the necessary react,react-dom, and react-router-dom to the main application

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>react micro for systemjs</title>// Import the required modules through imports<script type="systemjs-importmap">
        {
            "imports": {
                "react": "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"."react-dom": "https://cdn.jsdelivr.net/npm/react-dom/umd/reactdom.production.min.js"."react-router-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-router-dom.min.js"}}</script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script>
            // Manually load the packaged JS
            System.import("./index.js")
        </script>
    </body>
</html>
Copy the code

src/index.js

import React from "react"
import ReactDom from "react-dom"

import App from './App.js'

ReactDom.render(<App />.document.getElementById("root")) 
Copy the code

src/App.js

import React from "react"

export default function App(){
    return <div>React Micro service for SystemJS</div>
}
Copy the code