introduce

Mess-cli is a single-SPa-wrapped microservices scaffolding that provides you with a single-SPA template for React and Vue projects

If you are not familiar with mess-CLI, you can refer to the official website of mess-cli, or learn about the online small DMO of mess-CLI

You are advised to browse the following contents in parallel with online DEMO

Modules in the following content refer to business modules, which have a very high business process.

start

First, the small DEMO looks like this:

You can think of it as a very large back-end management system. There are so many menus on the left, so many pages, maybe 100 pages.

Imagine how large such a system would be written on a front-end project, perhaps with a dozen or twenty front-end developers working together on an expedited project. At this point, project maintenance, architecture, code conflict resolution, etc., will be everyone’s nightmare.

However, if we split the 100-page system into 10-page modules, these modules can be independently developed locally, and each module is a front-end project. After development, they can be packaged and deployed separately to merge into a system. In this way, a developer can only focus on the module code he is responsible for and not worry about a colleague in another module deleting his code or resolving a bunch of conflicts one day.

So in this way, how do we end up assembling them into a system?

  1. Iframes do not share resource files, they do not share global variables, etc. There are all sorts of problems.
  2. Can be achieved bysingle-spa, which is the solution of the case in this paper, solves the disadvantages of IFrame.

reveal

With Single-SPA, I split the Demo into four modules and a central service, a total of five front-end projects, and combined them into a complete system through single-SPA. In the demo, I explained the structure of the whole project and introduced some pain points. Portal Demo integrates the following features:

What you can see is 2. One-click switch of theme color of the whole system 3. Delivery of user rights (to each module), which is processed by each module 4. Menus jump to each other

What you don’t see are:

  1. It consists of five independent front-end projects, which together form a system without strong coupling between modules
  2. The core service maintains module routing and registration of modules
  3. Core services introduce public dependencies, guaranteedNo files are reloaded, including element-UI, ANTD-Design style sheet files
  4. Each module integrates state management and routing, such as VUex, VUE-Router, Redux, and React-Router
  5. . There are many more, please refer to the project source, portal

Deeper thinking

Students can refer to the way I deploy



The DEMO I described above was done by deploying five front-end packaged projects on the server,Register the three modules in Components by the core service under Demo, the routing module under Demo controls the routing of the whole system, then…………

Another way of thinking, it is not difficult to find:

The modules in Components are common business modules that can be reused, so I add another system called DEMO2, and with only a small piece of code, I can introduce any module I want under Components. Through DEMO2's own routing module, the loading position and timing of these modules are controlledCopy the code

It usually goes something like this:

This way, you write business modules that can be reused by multiple systems, reducing development and increasing reusability.

Note: a module can only be loaded once at a time. This means that a module cannot appear twice on the same page. This is how I defined a module at the beginning of this article: a public page with a high degree of business process, rather than the UI library we use, which should be called a component.

Of course, you may not need to encapsulate common business modules for reuse, but for large projects, this decoupling still gives you great benefits.

This architecture may not be suitable for everyone, but for complex back-end management systems, or complex front-end pages, front-end micro services are also worth trying.

This article is published by OpenWrite, a blogging tool platform