First, micro front end

  1. Microfront-end architecture

  • Application of autonomous

  • Single responsibility

  • Stack independent

  1. Why do you need a micro front end

  • Legacy System Migration

  • The back end is decoupled and the front end is converged

  • Lively drive development

Two, the technical resolution of the micro front end

  1. Route distribution: Uses the reverse proxy function of the HTTP server to map the request route to the application

  2. Front-end microservitization: Design communication and loading mechanisms on top of different frameworks to load applications on a single page

  3. Microapplication: By software engineering, multiple independent applications are combined into a single application in the deployment build environment

  4. Microcomponentization: Develop a new build system that builds part of the business functionality into a separate chunk of code that can be loaded remotely

  5. Front-end containerization: Use iframe as a container to hold other front-end applications

  6. Application componentization: Build cross-framework front-end applications with the help of Web Components technology

Third, the business division of the micro front end

  1. Split by service

  2. Split by permission

  3. Split by frequency of change

  4. Split by organizational structure

  5. Follow the back-end microservice split

  6. Split by domain

Fourth, the architecture design of the micro front-end

  1. Component and pattern libraries

  • style

  • Component-level style

  • Application-level style

  • System-level style

  • Business components and shared libraries

  1. Application communication mechanism

  • At the same level of communication

  • Through global custom events

  • By sharing Windows

  • Parent-child communication

  • Communicate between parent and child Windows via PostMessage

  • The parent window is found by parent. Window, and the global custom event is emitted

  • When other applications load, messages are sent to the parent window, which issues custom events

  • When other applications are not loaded, messages are first passed to the parent window and then stored by the parent window, providing a mechanism to obtain communication

  1. Data sharing mechanism

  • URI parameter Passing

  • Use LocalStorage to share data

  • Other client storage, such as IndexedDB, Web SQL, etc

  • The server stores the client status in JSON format

  1. A dedicated build system

Fifth, the architecture mode of micro front end

  1. Dock mode: Manage other applications through one main application, which is easy to design and practice, but not universal

  2. Self-organization mode: Applications are equal, there is no mutual management mode, difficult to design, inconvenient to implement, but high universality

Design concept of micro front end

  1. Centralization: Apply the registry

  2. Labeling application

  3. The life cycle

  • Load application

  • Run the application

  • Uninstall the application

  1. High cohesion, low coupling

7. The structure of “minor” harm

  1. Micro architecture

  • The back-end split

  • Resolution of the App

  • The front split

  1. Architecture evolution

  • Quickly implement ideas

  • Add more and more features and the application becomes bloated

  • The increasing difficulty of adding new functionality leads to microservice architectures

  1. Problems with microarchitecture

  • Back end: Microservices to applications

  • The code architecture

  • Deployment process

  • The client

  • pluggable

  • componentization

  1. Solution: Detachable microarchitecture