preface

In recent years, micro front-end has been a hot topic in the front-end industry. It is similar to the micro service architecture, mainly oriented to the browser side, and can split a complex and huge single application into a number of clear functional modules and independent sub-applications, and serve the same main application together. Each sub-application can run, develop, and deploy independently.

The birth and application of the concept of micro front-end architecture is clearly an opportunity as well as a challenge for enterprises providing complex application services. This article mainly on the micro front-end architecture of the concept and implementation scheme to do a summary and review, and through a practical case to practice the micro front-end architecture, I hope to provide some help and ideas for friends who also have this need.

You will reap

  • What are microservices and what can microservices bring to the enterprise
  • Concept and solution of micro front-end architecture
  • Umi under the micro front-end architecture solution actual combat
  • A programmer’s technical review and outlook

The body of the

Before summarizing the micro front-end architecture, let’s take a look at what microservices are.

1. What are microservices and what can microservices bring to enterprises

Microservices are an architectural solution for building applications. Unlike the more traditional single-unit approach, microservices architecture can break applications down into multiple core functions. Each feature is called a service and can be built and deployed separately, which means that the services work (and fail) without impacting each other.

Traditional Web software development architectures often look like this:

modular

For complex systems and businesses, we typically adopt a microservices architecture. The idea is to decompose a complete application into small, interconnected microservices, each of which performs a specific function, and some of which provides apis for other services.

  • Breaking down a large unit into multiple sub-services greatly reduces development complexity
  • Each sub-service is developed separately, and different services can be developed by different developers in parallel, improving development efficiency
  • More granularity enhances the modularity of the process, making it more maintainable and readable
  • Different members or teams can develop services using different technologies as long as they have API conventions in place between teams
  • Shared services are available, allowing different sub-services to be combined to achieve more complex functionality
  • Each microservice can be deployed and published independently, enabling automated CI(continuous integration)/CD(continuous delivery)

But microservices are not appropriate for every scenario. The goal of microservices is to break down applications sufficiently to facilitate agile development and continuous integrated deployment. When deploying microservices, we need to properly demarcate the boundaries and deal with the concurrency between different microservices, which is a challenge to the overall project and needs to be controlled by more skilled technical staff. At present, there are many open source microservice frameworks in the market, such as Dubbo, Spring Cloud, etc. Spring Cloud adopted by the author’s previous company is a good microservice architecture solution.

2. Concept and solution of micro front-end architecture

2.1 Understanding the micro front-end architecture

With that brief introduction to the microservices architecture, let’s move on to the topic of the micro front end. The purpose of the micro front end is similar to the purpose of the micro service implementation, which is to transform the application from a single single application into multiple small sub-applications. The differences are:

  1. The micro front end is applied to the browser side, which is mainly to disassemble web applications and finally aggregate different subsystems (modules) into a complete application.
  2. While the main purpose of the micro front is aggregation, that is, the aggregation of different subsystems into one large system, the micro service architecture is currently more about decoupling, that is, the decoupling of dependencies between different services.

Let’s take a look at some of the thinkers on the micro front.

The “micro front end” is an extension of the concept of microservices to the front end. In order to build a powerful browser application (also known as a single-page application), the prevailing trend is to build it on a microservice architecture. But over time, front-end layers, usually developed by independent teams, grow and become more difficult to maintain. The idea behind Micro Frontends is to treat Web applications as a collection of capabilities owned by individual teams. Each team has a different business or task area that they care about and specialize in. Each team can develop its functionality across functions and end-to-end, from the database to the user interface.

As the following example shows:

Imagine if we had an architectural pattern that allowed us to share common components and state in the main application (but kept the state isolated within the runtime of the sub-applications), and that different sub-modules could be developed and deployed separately, switching between modules without refreshing the page. And wouldn’t it be perfect to have a simple way to communicate between modules, between parent and child applications? Yes, that may be the problem the micro front is trying to solve.

Due to the early development time of the ERP system that THE author took over, there were often a lot of historical baggage left over, such as the combination of new and old technology stacks, and the front-end business code was huge without any feeling of breach. In order to continue the iterative development of the ERP system, refactoring is the only way to go. Another important role of the micro front-end in the author’s opinion is liberation. Liberate the irreparable pain 😭.

I briefly mentioned some knowledge of the micro front end when I wrote the article from 0 to 1 to teach you how to build the component system of the front-end team (Advanced Advanced Prerequisite). Here is a simple picture of the micro front end architecture that I made before, so that you can understand the micro front end architecture.

2.2 Micro front-end architecture implementation scheme

Above, we have a general understanding of the concept and function of the micro front end, and then the author summarizes the micro front end implementation scheme that has been experienced.

1. Micro Front-end Architecture Based on MPA + Iframe + RequireJS Implementation This is one of the earliest projects that the author took over, mainly serving the ERP system inside the enterprise. At that time, the technology stack adopted was mainly jquery+ Layui + RequireJS. AMD modularization mechanism was mainly used to reuse the code. At that time, the project code was extremely large and complex, and its general structure was as follows:

2. The micro front-end architecture based on MPA + Iframe + Webpack implementation is similar to the traditional architecture implementation introduced above, except that it adopts the updated technology stack, as well as the real modularization and component technology. The Saas system I worked on is a typical example of this solution:

The disadvantages of these two solutions are that the component libraries can only be reused rather than truly shared, and switching routes can cause the page to be rerendered and refreshed. Communication between parent and child systems is difficult and the iframe is still needed to communicate with the container. (About the iframe father and son page communication in various ways, the author in an old project to remember the cross-page communication issues and front-end implementation of file download function)

Currently, there are also very mature micro-front-end architecture solutions in the market, such as single-SPA. The former micro-front-end architecture of Meituanmai and micro-front-end architecture Qiankun developed by Ant Financial service based on single-SPA are both very good solutions.

Qiankun mainly uses HTML Entry mode, directly typing out HTML as the Entry of the child application. The main frame can fetch HTML to obtain the static resources of the child application, and at the same time, the HTML document is inserted into the container of the main frame as the child node. In this way, the access cost of the main application can be greatly reduced, and the development and packaging methods of the sub-applications basically do not need to be adjusted, and the problem of style isolation between sub-applications can be naturally solved.

  • Support for sub-application parallelism
  • Support for JS sandbox environments (JS isolation)
  • CSS isolation
  • HTML Entry, simplified for developers
  • According to the need to load
  • Common dependency loading
  • Father – son application communication mechanism
  • Child application nesting

Since our front-end project was built on the basis of UMI ecological development (previously, we used Webpack to build, but later we found THAT UMI was also very cool to use, so we directly redeveloped based on UMI), so it was natural to choose Qiankun as the micro front-end architecture. The specific structure is as follows:

3. Practical micro front-end architecture scheme under UMI

Next, I will show you how to build our micro front end architecture with Qiankun. As we use UMI internally, we will use the @umijs/ plugin-Qiankun plugin provided by umi. First let’s implement a scenario where we have one main application as a base project, and then three subsystems, which are independently created and maintained and can be managed using different Git repositories. When we switch routes in the main application, we will switch to the corresponding subsystem, and do not refresh the page, complete SPA experience, let’s implement it in detail.

Here we use UMI 2.0 to develop, how to install and use UMI, here will not do a detailed introduction.

  1. Create a project
mkdir mainSystem subSystemA subSystemB subSystemC
// Go to each system directory and run the following command to create our project
yarn create umi
Copy the code
  1. Install the @umijs/ plugin-Qiankun plugin on each system
yarn add @umijs/plugin-qiankun
Copy the code
  1. Configure the active application
// .umirc.js
export default {
  plugins: [['@umijs/plugin-qiankun',
      {
        master: {
          // Register the subapplication information
          jsSandbox: true.// Whether to enable js sandbox, default is false
          prefetch: true.// Whether to enable prefetch. The default value is true},},],],};// app.js
const isDev = process.env.NODE_ENV === 'development'
export const qiankun = {
  apps: [{mountElementId: 'root-subapp-container'.// Wash the node mounted by the child application
      name: 'subSystemA'.// Unique id, preferably the same as the name field corresponding to the package
      entry: isDev ? '//localhost:8001' : '/subSystemA/index.html'.// html entry
      base: '/subSystemA'This prefix is used to determine whether to start the application, which is usually consistent with the base of the child application. History:'browser'.// By default, the history configuration of the child application is the history configuration of the current main application
    },
    {
      mountElementId: 'root-subapp-container'.name: 'subSystemB'.entry: isDev ? '//localhost:8002' : '/subSystemB/index.html'.base: '/subSystemB'}, {mountElementId: 'root-subapp-container'.name: 'subSystemC'.entry: isDev ? '//localhost:8003' : '/subSystemB/index.html'.base: '/subSystemC',}],fetch: url= > {
    return fetch(url)
  }
};
Copy the code

This is the basic configuration. Of course, we can also add hooks such as lifeCycles to app.js to control the behavior of different lifeCycles.

We also need to introduce @umijs/ plugin-Qiankun in the sub-application. The configuration is as follows:

export default {
  base: ` /${appName}`.// The base of the child application, which defaults to the name field in package.json
  plugins: ['@umijs/plugin-qiankun', { slave: true}]};Copy the code

With the basic setup done, all that’s left is to write the business code. To get the entire application running together, we need to start the base project first and then the corresponding sub-projects (which can run separately).

However, it is worth noting that we use the devServer in the development environment to capture resources across domains. If the application is published online, if different sub-applications use different domain names, we still need to solve the cross-domain problem (there are also many cross-domain solutions and security mechanisms, which is no longer a problem). There are many more issues to consider in the actual development environment, and I will only cover them briefly here, but the official API can cover most of the requirement scenarios, so it is well worth a try. Later, I will write a practical case of the micro front end and publish it on Github, so that we can exchange and learn from each other.

4. A programmer’s technical review and outlook

Due to the impact of the epidemic this year, the work task is relatively tight and the time for recovery is relatively small. However, the author will continue to update 1-2 articles every week to summarize and review the new technologies learned in work. It is time to do a classification and comb the scattered articles written by myself, so as to have a clearer future direction and remedy the deficiencies.

1. The node

  • Develop your own graph bed application using nodeJs
  • 30 minutes on what Web engineers need to know about Docker
  • Create a nodeJS development environment and directory design in 30 minutes
  • Implement server startup details for a CMS full stack project from 0 to 1 based on nodeJS
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
  • Implement server startup details for a CMS full stack project from 0 to 1 based on nodeJS
  • Write a mock data server using nodeJS in 5 minutes

2. Engineering related

  • Front-end component/library packaging sharp Rollup use and configuration combat
  • Exploration and summary of front-end integrated solutions based on React/VUE ecology
  • How to use gulP4 development project scaffolding
  • An automated deployment solution that can’t be ignored in the VUE/React project
  • Jquery, React, vue, typescript
  • Git common usages and core strategies

3. Design patterns

  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • “Front-end combat summary” using the interpreter pattern to achieve the algorithm to obtain the element Xpath path
  • N+1 application scenarios of the iterator pattern in Front End Combat Summary
  • The Application of design Pattern of “Summary of Front End Actual Combat” — Memorandum Pattern

4. The react

  • Hand-write 8 common custom hooks in 10 minutes
  • Master Redux: Developing a task management platform
  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • Master React/Vue family to implement a global Message component
  • Realize a powerful Notification box with the React/Vue Series.
  • Hand to Hand implements a lightweight and extensible Modal component
  • Master React/Vue Component Design in 5 minutes teach you to implement a very creative Loading component
  • Master React/Vue Component Design implements a robust Alert component
  • Master React/Vue Component Design implements a powerful Drawer component in conjunction with React Portals
  • Implement a Tag component and an Empty component in 5 minutes of React/Vue Component Design Mastery
  • Quickly implement a customizable progress bar component in Master React/Vue Component Design
  • Master React/Vue Component Design creates materialui-like button click animations with pure CSS and encapsulates react components
  • Re-encapsulates a real-time preview jsoneditor component based on jsonEditor (React version)

5. Vue/presents related

  • Develop a component library based on VUE from zero to one
  • 2 years of vUE project practical experience summary
  • Package and compile your own third-party UI component library based on create-React-app and publish it to NPM
  • A picture shows you how to play vue-Cli3 quickly
  • Developing travel List with Angular8 and Baidu Maps API
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript

6. The CSS

  • “Front-end combat summary” the use of pure CSS website skin and focus diagram switch animation
  • “Front-end combat summary” using CSS3 to achieve cool 3D rotation perspective
  • CSS method of using pseudo elements to achieve super practical icon library (with source code)
  • Css3 actual summary (with source code)
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • How to control CSS sense of direction

7. Algorithm related

  • How to draw a tree of structures recursively in Javascript
  • Cartesian product is implemented and applied in javascript
  • JavaScript binary tree and binary search tree implementation and application
  • Js basic search algorithm implementation and 1.7 million data under the performance test
  • How to make front-end code 60 times faster
  • Front End Algorithm series array deweighting

8. H5 game

  • With 60 lines of code to achieve a high-performance Christmas whoop H5 small game (including source code)
  • Canvas entry practical use of javascript object-oriented implementation of a graphic verification code
  • With JavaScript and C3 to achieve a turntable small game
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)

9. Native javascript class library design encapsulation

  • Browser Cache Library Design Summary (localStorage/indexedDB)
  • Implement a DAO library with expiration time based on localStorage
  • How to write your own JS library in less than 200 lines of code
  • 3 minutes teach you to use native JS implementation with progress listening file upload preview component

10. Summary of work issues

  • Use console.log to post your company’s job listings in 5 minutes
  • In 2019, take a look at some of my top questions and advice for job seekers
  • Add a loading progress bar to your site using pace. Js
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page
  • Learn es6+ new features and es6 core grammar check quickly
  • 15 practical tips for Web Performance Optimization
  • “Javascript advanced programming” core knowledge summary
  • Front-end development in 79 can not be ignored knowledge summary
  • Remember an old project with cross-page communication issues and front-end implementation of file downloads
  • A summary of common JS functions that make you more productive in an instant
  • In the first three years, talk about the top five books worth reading

The last

If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join our technical group in the public number “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.