Architecture design and reconstruction of large SPA projects

This article is mainly to share the console architecture evolution, problems and solutions of our company in the past two years. The console project includes nearly 100 different products and is developed in cross-department and cross-region collaboration. It is a typical large-scale SPA front-end project.

Let’s talk about why we need to do architecture refactoring, the old architecture and some of the problems under the old architecture.

Introduction to old Architecture

The old console architecture was angular@1, which used Angular’s UI-router and lazy-load to run projects on demand. Most projects mount react instances through Angular, and while much of the business code has nothing to do with Angular, there are still places (services, routing, etc.) that rely on Angular.

Problems with the old architecture

The problems of the old architecture are mainly divided into two parts, run-time problems and development-time problems:

Runtime problems

The old architecture relied heavily on Angular

Because the entire architecture was designed based on Angular capabilities, the launcher was large, slow to load, and poor performance.

Dependent volume weight under the old architecture

Under the old architecture, the common part is mainly divided into common and Components, which has a large number of historical legacy, redundant, invalid code, heavy historical burden, and dependency disorder, which cannot be safely cleaned up.

Coupling is serious

In the old architecture, most of the project code is react code, but some services still rely on Angular. There is serious code coupling between initiators, common dependencies, and projects.

Performance issues

Various problems, such as heavy initiator, heavy dependency, excessive language file mixing, and too much initialization content, lead to slow loading and execution of the project.

Development time issues

Difficult to use, high risk

The project structure of the old architecture consists of a master project and N sub-projects. The master project contains development scripts and development dependencies, while other projects such as dependencies, initiators and projects are managed as git submodules.

Development needs to check the main warehouse update, check the dependency update, execute the development script, also need to pay attention to the version of the initiator project, conflict, dependency update, etc., the use of high cost.

High upgrade cost

The development environment cannot be safely upgraded. Because all dependencies and scripts are shared across the project, the upgrade will directly affect hundreds of sub-projects and cannot be changed at will.

The new architecture

Console project is divided into three layers, initiator, public module, business module.

starter

Launched to carry the most basic functions of the website, including:

• Skeleton screen
• Browser compatibility handling – Incompatible version prompt
• Project Routing Management (router-service) – Jump across projects
• Project load/Mount/unload (Micro front-end RAPIOP)
• Module Manager (MOD)
• Themes – Themes load/switch
• Base dependency –babel polyfill,reset-style
• sentry– Error reporting
• matomo– User behavior analysis and data reporting
• Some other internal services, etc

Public module

services

Services are internal public services.

• user– User Information
• intl– Language translation
• das– Data reporting
• region,project 等

libs

Libs is used to output some common public modules, open source libraries.

• react,react-dom,react-router – reactRelated to the library
• Components – Common component library
• apexcharts,react-apexcharts– the symbol library
• lodashTools such as library

components

Components include console-specific business components

• common-components– Common service components, layout, and routing components
• umon-components– Monitors related components
• code-components– Code editor component
• ulog-components,pay-components 等

Other modules

• sidebar,navbar– Public part of the UI
• styles– Universal style
• react-adapter– Project adapter, reduce boilerplate code (register microfront-end, initialization language, dependency loading, etc.)

Business module

The business module mainly consists of various business projects, which are divided into old projects and new projects.

The optimized

• Lightweight non-dependent initiator
• Responsibility clear
• Module split, autonomous, dependency clear
• There is no coupling

Run the process

Enter the page:

• Browser compatibility detection,polyfill, basic dependency loading
• resetStyle loading, themes,matomo,sentryInitialize the
• Gray information acquisition, not login to jump back to login
• Initialize the micro front end and module manager with gray information
• Based on the currenturlMatch the project. If it is an old project, load the old initiator and enter the loading process of the old project. The new project directly loads the project and dependencies

The development of

The development environment is split into two parts: CLI and dev-dependences.

CLI

The CLI tool provides functions such as development, construction, package analysis, Codemod, and dependency management.

dev-dependences

Includes the development dependencies of the project: WebPack, ESLint, Loaders, etc., with multiple versions to facilitate subsequent upgrade iterations and reduce upgrade costs and risks.

Provide functional scripts for dependencies: development, build, etc.

The development of start

After starting the development command through the CLI, the initiator (online/pre-send/local) will be started according to the command, the development script in the development dependency of the specified project will be started and communicated, and the online gray information and local file information will be merged.

advantage

• Upgrade and Maintain Security
• Easy to use

The status quo

At present, new and old architectures coexist, and most of the old projects are gradually replacing the old services for smooth upgrading.