Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Written in the book of the former

Mastering technology is for better service, and solving more problems with less energy is the main reason why we learn technology

preface

Question: Why do you need a micro front end? What does it solve?

The idea of a microfront is similar to that of a microservice, breaking a large whole into manageable pieces and figuring out the dependencies between them.

We can divide services into a series of sub-applications according to business functions, achieving high cohesion and low coupling, and manage the dependencies among these applications through interaction protocols. Independent development and deployment allow the existence of multiple technology stacks, which can not only reduce the cost of introducing new technologies, but also allow the replacement of local functions with lower risks. This means that each technology update, architecture replacement, dependency upgrade, UI revision, etc., can be carried out more smoothly

Technology selection

Single-spa takes inspiration from the modern framework component lifecycle and applies the lifecycle to the entire application. It grew out of Canopy’s idea to use React + React-Router instead of AngularJS + UI-Router to keep applications from being tied down. Single-spa now supports almost any framework. Since JavaScript is notorious for the short life of many of its frameworks, we decided to make it easy to use in any framework you want. No more pushy, let’s do it!

Root directory creation

Globally install create-single-SPA

npm install --global create-single-spa
# or
yarn global add create-single-spa
Copy the code

Initialize the project

npm init single-spa
Copy the code

1. File package name



2. Build project types

You’ll be creating single-SPA applications, common modules, or root configurations. (Here we select single-SPA root config.)

3. What build tool would you like to use?

Here we choose NPM

4. Use TS?

Here we choose no

5. Single-spa layout?

So the choice here is

6. Project organization name

Press Enter

After installation, the project structure is as follows

A simple project to run it!

Once the project is initialized, we can run NPM run start; After running, go to http://localhost:9000/. If so, we have built the root project!

Here’s a problem!

We don’t seem to have done anything to get something to show. How do we do that? Let’s open the SRC folder

First take a look at ‘The prefix‘- root – config. Js file

import { registerApplication, start } from "single-spa";
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    returnSystem.import(name); }});const layoutEngine = constructLayoutEngine({ routes, applications });

applications.forEach(registerApplication);
layoutEngine.activate();
start();

Copy the code

Routes are first obtained by passing in microfrontendLayout to the parse function constructLayoutEngine and then passing routes to constructApplications An array of applications, using single-SAP to provide the registerApplication method to register the corresponding application.

(Analytic function first do not analysis, if interested, leave a message, open a chapter we carry on the analysis! !).

Now look at the source address of the microfrontendLayout parameter

microfrontend-layout.html

This is relatively simple, and vUE routing registration is actually similar

<single-spa-router>
 <main>
    <route default>
      <application name="@single-spa/welcome"></application>
    </route>
  </main>
</single-spa-router>
Copy the code

@single-spa/welcome is exactly what our root configuration shows when it runs! But how is it configured and where is it pointing?

index.ejs

The < %if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"."@main/root-config": "//localhost:9000/main-root-config.js"}}</script>The < %}else{% >... The < %} % >Copy the code

Look at this configuration

conclusion

This article explains why a micro front end is needed, the business pain points it solves, and the setup of a root configuration… Ok, the next chapter will take you through building a single-SPA app….

This chapter is over here, like please pay attention to me!