1. Legacy system: Route distribution

  1. 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

    1. 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

    1. 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

    1. 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,

    1. 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

    1. Web Components of

      1. Customer Elements allows developers to create custom Elements

      2. Shadow DOM

      3. HTML Templates

      4. HTML Imports

    2. Pure Web Components

    3. Incorporate the Web Components approach

      1. Integrate existing frameworks into Web Components

      2. Web Components integrated into existing frameworks



    Recommended reading

    1. Part 1: [Front-end architecture] Micro front-end architecture design

    The resources

    1. Front-end Architecture: From Getting Started to Microfrontend

    Wechat public account “Front-end things”