1. Micro front-end goals, past and present of front-end architecture, advantages and disadvantages of micro-front-end architecture, software design principles and layering

1. Goal

2. The past and present life of front-end architecture

① Initial: No architecture, front-end code is embedded in the back-end application

② Back-end MVC architecture: Separate the view layer, data layer and control layer

Disadvantages: Heavy reliance on the development environment, serious code confusion (during debugging, all back-end codes and dependencies need to be started, which is more troublesome)

③ Front-end and back-end separation architecture

Extract the front-end code from the back-end environment ( ajax promotes the development of front-end and back-end separation architecture) multi-page architecture, enabling it to dynamically obtain data through the browser;

Disadvantages: The front-end lacks independent deployment capabilities, and the overall process relies on the back-end environment

④ The widespread use of Nodejs has promoted the rapid development of front-end technology

Various packaging and building tools have emerged;

Diversified front-end development methods were born, allowing front-end development to be separated from the overall back-end environment;

⑤ Single page architecture

Advantage:

Switching pages without refreshing the browser provides a good user experience;

The component-based development method greatly improves the code reuse rate;

shortcoming:

Not conducive to SEO, the first rendering will cause a long white screen (can be solved)

⑥ Large front-end architecture

Summarize:

Overly flexible implementation also leads to too many front-end application splits and difficult maintenance;
often a function or requirement will be developed across two or three projects.

3. Micro front-end architecture

1) Advantages

① It has nothing to do with the technology stack

The technology stack can use Vue/angular/react or native

② The main framework does not limit access to the technology stack of the application, and the micro-applications have complete autonomy

③ Independent development and independent deployment

④ Incremental upgrade

⑤ Micro front-end is a very good means and strategy for implementing progressive reconstruction

⑥ All micro-applications have independent warehouses, the front-end and back-end can be developed independently, and the main framework automatically completes synchronous updates

⑦ When running independently

⑧ The status of each micro-application is isolated and the runtime status is not shared.

2) Disadvantages

① Access is difficult

② Application scenarios - less mobile terminals and more management terminals

4. Software design principles

① Single responsibility principle

② Open and closed principle

③ Richter substitution principle

④ The principle of least knowledge

⑤ Interface isolation principle

⑥ Dependency inversion principle

Summarize:

⑦ Other principles:

5. Software design layering

Features: Decreasing difficulty

① System level

The application is applied within the entire system, such as how to communicate with background services and how to integrate with third-party systems.