In recent projects, a microfront-end architecture has been used. In line with the attitude of learning, I intend to have an in-depth understanding of the micro front-end related knowledge points. Inherent in this series.

What is a micro front end?

Similar to the concept of “microservices” at the back end, the basic idea of a microfront is as follows: a complex front-end application is split into multiple independently deployed, loosely coupled sub-module applications, which are eventually aggregated together by aggregation modules (the main application). For users using the front-end page, the operation experience is still a whole application page. The related technology (architecture) used to implement this idea is called the microfront end.

There are a few key words we can learn from the description above: unbundling, aggregation, and experience consistency.

Put aside the application scenario to talk about the implementation of technical solutions, is playing rogue. Before we expand into the details of the microfront, it’s important to be clear that the big premise for using a microfront is that your application has become (or will be in the foreseeable future) complex enough. If you are just a very simple back-end management system, then you don’t need to involve so-called micro front-end technology at all. In more recent projects, the complexity of multiple teams working on different modules of the same web page (MPA application) was very high maintenance. Therefore, the introduction of a micro-front-end architecture is accepted during the technology evaluation phase.

Current mainstream micro front-end solutions: Qiankun, Single-SPA, SystemJS, Piral, OpenComponent, Liugi….. If you want to understand and learn about micro front-end, mainly discuss qiankun and single-SPA. In this series, we will not be looking at a specific code base, but rather at the technical problems encountered with the implementation of the microfront end.

The value of the micro front end

The micro front-end architecture has the following core values:

  • Stack independent: The main framework does not limit access to application stacks, and sub-applications have full autonomy
  • Independent development and deployment: The sub-application repository is independent, and the front and back ends can be independently developed. After deployment, the main framework automatically completes synchronous update
  • Independent runtime: Each child application is isolated from each other and the runtime state is not shared

As mentioned earlier, the value of the micro front end can be maximized when a complex application is being developed and maintained by multiple teams and development interactions between teams are expected to be low coupling.

Introduce micro front end pit

A thing, not only to see its value, but also to see the pit. For the micro front end, debugging and problem tracking are known pit points, and more are:

  • For some complex operations across sub-applications, multiple different sub-applications need to be started locally at the same time during debugging and problem tracing
  • Aiming at the technical difficulties of micro-front-end, such as JS isolation and style isolation, the imperfection of the implementation of specific micro-front-end solutions leads to the unfriendly experience of practical operation in micro-front-end
  • Because it is developed by multiple teams, and want to give users a consistent operating experience. But in the unity of the page, different teams between the realization of uniform style, there is a certain difficulty
  • Being developed by multiple teams using different technology stacks can result in the browser downloading duplicate code bases (a waste of resources to some extent)

The first and second of these are for the development experience, the third is for the style experience (which can be mandated by a uniform UI specification), and the fourth is for network resource requests.

We need to recognize that no technological implementation is perfect. To understand the applicable scenarios of micro-front-end in detail, we need to make a choice according to our actual scheme. There are no silver bullets, only appropriate solutions.

Technical difficulties of micro front end

Borrow a picture on the Internet, the corresponding micro front-end implementation difficulties are included in them:

Several of these technical difficulties will also be explored in depth in this series. Stay tuned for the next installment.

reference

zhuanlan.zhihu.com/p/78362028

Zendev.com/2019/06/17/…