1. Legacy system: Route distribution
-
Routing distribution micro front end
-
Applicable scenario
-
There is a great difference between different technology stacks, and it is difficult to compatibility, migration and transformation
-
The project did not want to spend a lot of time on this system transformation
-
The current system will be replaced in the future
-
System functions have been very complete, basically there will be no new requirements
-
Example Nginx configuration based on routing distribution
Test route distribution
-
Unit tests: URL validation
-
Integration test: URL redirection test
Ii. Microfront end of legacy system:Use iframe as the container
-
Design application management mechanisms
-
Application loading and unloading time
-
The animation transition
Design application communication mechanism
-
Get the window object of the iframe element with iframeel.contentWindow
-
Define communication specifications: event name format, when to start listening for events, and when to unbind listening events
Three, microapplication
-
Form and Principle
-
Build as a single application
-
The runtime exists in the form of application modules
-
How it works: Copy code from multiple projects and merge it into one project
Architecture to implement
-
Continuous integration design
-
Sub-application code updates, triggering continuous building of corresponding modules
-
The main application code updates, triggering a continuous build of the entire system
-
Once the sub-application continues to build successfully, it triggers the continuous build of the entire system
-
Design placeholders
-
Routes of subapplications to other subapplications
-
Subapplication modules in the main application
The test strategy
-
Dependency consistency testing
-
Compare the dependent version of package.json in the child application
-
Function module generation test
-
Test whether the copied modules can be copied to the corresponding directory: Write a script and run the test script during continuous integration. If exit(-1) is not detected, the continuous integration build fails
-
Test whether the generated module code size is normal: normally each chunk.js file is larger than the blank module; Also run the script in continuous integration and exit(-1)
-
E2E test
Fourth, front-end microservitization
-
Micro service design scheme
-
Base control system
-
When the main project is running, it will go to the server to get the latest application configuration
-
After obtaining the configuration, the main project creates applications one by one and binds the application life cycle
-
When the main project detects a route change, it looks for a corresponding route to match the application
-
When a matching application is found, the corresponding application is loaded
-
Inter-application events
-
Avoid event name conflicts between applications
-
You can prefix in-app events with the application name
-
Design the route response mechanism
-
The base app is only responsible for its own route, and the rest of the route is handled by a unified module, such as the entry module AppModule in Angular
-
When the route applied by the base changes, a global event is emitted for the route change
-
After the child applications are started, they listen for routing changes
General purpose front-end microservitization: single-SPA
-
The base part
-
Subapplication part
-
The React example
-
Presents examples
-
The advantages and disadvantages
-
advantage
-
It can support most mainstream front-end frameworks as well as traditional front-end frameworks
-
Provides a better user experience, i.e. loads directly on the current page without page hopping
-
Easy migration of legacy systems
-
defects
-
System construction is complex, and applications need to be integrated to build
-
Deployment separation of different applications is not supported
-
Complex code structure
-
There are substantial additional learning costs
Customized front-end microservitization: Mooa
-
Main engineering part
-
Initialize the configuration related to the micro-front-end framework
-
Gets the configuration of all child applications remotely
-
Configure all subapplications
-
Configure routes for the main project and subapplications
-
Once a route is matched, the corresponding application is loaded and the old application is uninstalled
-
Subapplication part
-
Routing updates
-
The base URL that matches the framework
-
Resolving dependency conflicts
-
The iframe isolation
-
Assign ids to different child applications
-
Hook in the child application to notify the main application that the child application is loaded
-
Create event listeners in the child application to respond to URL change events in the master application
-
The need to listen for subroutines to redirect in the main application
Five, componentized micro front end:Micro parts,
-
Runtime build microcomponentization: dynamic component rendering
-
Vue micro parts
-
Write application container templates
-
Write instantiated application scripts
-
Place the template and script remotely, create the element corresponding to the container ID where it needs to be called, and then run the script
-
Presents the micro parts
-
Provide the environment required for microcomponentization in core engineering
-
In the widget project, build code that runs on the core project
Precompiled microcomponentization
-
The React of micro parts
-
Write a unified API that encapsulates the root components of React
-
Modify the configuration of the build system so that it outputs a version that runs directly in the browser
-
Load the corresponding JavaScript script and invoke the component’s initialization method
-
Microcomponentization through build tools
Vi. Looking to the future:Web Components
-
Web Components of
-
Customer Elements allows developers to create custom Elements
-
Shadow DOM
-
HTML Templates
-
HTML Imports
-
Pure Web Components
-
Incorporate the Web Components approach
-
Integrate existing frameworks into Web Components
-
Web Components integrated into existing frameworks
Recommended reading
-
Part 1: [Front-end architecture] Micro front-end architecture design
The resources
-
Front-end Architecture: From Getting Started to Microfrontend