The article was forwarded by: Alili. Tech

Technology selection

After a variety of technical research, we finally chose a solution based on single-SPA to realize our front-end microservitization.

Single-SPA

A JavaScript front-end solution for front-end microservitization

Here’s what you can do with single-SPA:

  • Use multiple technology frameworks (React, Vue, AngularJS, Angular, Ember, etc.) on the same page without refreshing the page.
  • (No refactoring of existing code) Write code using a new technical framework that does not require refactoring of code in existing projects.
  • (Better performance) The code for each individual module can be loaded on demand without wasting additional resources.
  • Each independent module can run independently.

Here is a demo page for the micro front end (you may need to get scientific online) single-spa.surge. Sh /

The above is the official example, but the official example does not solve a problem. That is, the routing implementation of various technology stacks is very different, how to achieve the coordination between the routing? We’ll talk about how to solve this problem in future articles.

Single application versus front-end microservitization

Common front-end monomer applications

Microfront-end architecture

Simple use of single-SPA

1. Create an HTML file

<html>
<body>
    <div id="root"></div>
    <script src="single-spa-config.js"></script>
</body>
</html>
Copy the code

2. Create the single-spa-config.js file

// single-spa-config.js
import * as singleSpa from 'single-spa';

// Load the react project entry js file.
const loadingFunction = (a)= > import('./react/app.js');

// When the URL prefix is /react. Returns true (underlying route)
const activityFunction = location= > location.pathname.startsWith('/react');

// Register the application
singleSpa.registerApplication('react', loadingFunction, activityFunction);

/ / singleSpa startup
singleSpa.start();
Copy the code

Encapsulate the render exit file for the React project

We’ll change the render React entry file to this to access single-SPA

import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './root.component'

if (process.env.NODE_ENV === 'development') {
  // The development environment renders directly
  ReactDOM.render(<RootComponent />Const reactLifecycles = singleSpaReact({React, ReactDOM, rootComponent: RootComponent domElementGetter: () = > document. GetElementById (" root ")}) / / hooks of project startup, export const bootstrap = [reactLifecycles bootstrap, ] // Export const mount = [reactlifecycles.mount, ] // Unmount hook export const unmount = [reactlifecycles. unmount,]Copy the code

This is the simple use of single-spa. When our browser URL is prefixed with /react, the application will render the app properly. Therefore, all routes of our React application will have /react prefixed.

Related articles

Front-end single-page application microservitization solution 1 – Thinking

Front-end single-page application microservitization solution 2-single-SPA

Front-end single page application microservitization solution 3 – Module loader

Front-end single page application microserver solution 4 – Message bus

Front-end single page application microservitization solution 5 – Routing distribution

Front-end single-page application microservitization solution 6 – Build and deploy

Front-end single-page application microservitization solution 7 – Static data sharing

Front-end single-page application microservitization solution 8 – Secondary build

Demo

Micro Frontend Demo

Micro front-end module loader

Micro front-end Base App example source code

Micro front-end sub-project example source code