[Yuanchuang Conference Preview] 1024 Programmers’ Day (two days before), meet at the Open Source China office, let’s talk about AI! >>>

introduce

MicroApp is a micro front-end framework launched by the JD front-end team. It uses component-based thinking and renders micro front-ends based on the WebComponent class, aiming to reduce the difficulty of getting started and improve work efficiency. MicroApp has nothing to do with the technology stack and is not tied to the business. It can be used in any front-end framework.

Source code address: https://github.com/micro-zoe/micro-app
Official website address: https://micro-zoe.github.io/micro-app

Micro front-end is a page integration solution. Its core is to split a huge front-end application into multiple independent and flexible small applications. Each application can be independently developed, run independently, and deployed independently, and then these small applications can be integrated into a complete application, or merge several unrelated applications that have been running for a long time into one application. Micro front-end can not only integrate multiple projects into one, but also reduce the coupling between projects and improve project scalability. Compared with a complete front-end warehouse, the front-end warehouse under the micro front-end architecture tends to be smaller and more flexible.

Upgrade Highlights

It has been more than a year since MicroApp was open source. During this time, we have received feedback on many issues, including sandbox performance, Vite compatibility, routing conflicts, etc. In order to solve these problems, we have upgraded and reconstructed many core functions. , after continuous polishing and verification, the official version of MicroApp 1.0 was finally launched.

The upgrades to the official version are mainly in the following aspects:

A simpler access method
Sandbox performance
virtual routing system
style isolation
Compatible with vite
development tools

One line of code embedding

MicroApp draws on the idea of WebComponent and uses CustomElement combined with a customized ShadowDom to encapsulate the micro front end into a WebComponent-like component to achieve componentized rendering of the micro front end. On this basis, by implementing JS isolation, style isolation, and routing isolation, the access cost of sub-applications is reduced. The sub-application only needs to be set to allow cross-domain requests, and can access the micro front end without changing any code. The usage method is the same as iframe. Almost the same, but without the problems of iframe.

The access method is as follows:

The Dilemma of JS Sandbox

After MicroApp was open sourced, we received some feedback from the community, and one of the issues regarding performance attracted our attention. This is not a problem that only exists in MicroApp, but a long-standing problem of micro frontends. There are a lot of discussions about sandbox performance issues in the community, but there is still no perfect solution.

MicroApp uses the same proxy+with sandbox solution as qiankun, which is also the current mainstream solution for js sandboxes. The function of the with sandbox is very complete, but the performance loss is very obvious. There is no shortage of discussions on the performance issues of the with sandbox in the community, but there has been no particularly perfect solution. This is because with changes the scope chain of js. This results in a large number of repeated requests. The root of the problem is with, but it is not entirely a problem with with. To be precise, it is caused by the superposition of with and proxy. The performance of with and proxy is not high in nature. A solution is needed to avoid frequent use of these two methods. For read operations, the solution adopted by MicroApp is variable prefix and asynchronous anti-shake.

• Variable prefixing: refers to using Object.defineProperty to define global variables and setting response data through get and set. First, it is to avoid redundant operations in proxy's get. Second, the performance of defineProperty is better than proxy.

• Asynchronous anti-shake: refers to marking promises when the sub-application is running to ensure that the next promise is not entered until the execution of the previous promise is completed, avoiding parallel triggering and preventing promises from being triggered frequently, which will cause performance losses.

On this basis, the MicroApp sandbox also provides functions such as snapshots, caching, and preloading. While ensuring that the functions remain unchanged, it completely solves the performance problem of the sandbox. The upgraded sandbox operating efficiency is comparable to that of native JS.

virtual routing system

Micro front-end integrates multiple different web applications for rendering, but the browser only has one routing system, which can easily cause routing conflicts between applications. The most common one is the routing conflict problem of vue3.

The above is the answer of the author of vue-router to the conflict problem in the micro-front-end environment. He believes that vue-router has covered enough scenarios, and the micro-front-end problems should be solved by the micro-front-end.

When we first opened up the source, we did not isolate routing. Almost half of the problems users had with MicroApp were related to routing, because a routing system that can satisfy the rendering of multiple applications at the same time can easily lead to conflicts, which is also very counter-intuitive and difficult to understand, so we A virtual routing system was launched.

Concept map:

The virtual routing system is consistent with the browser's routing behavior. It rewrites popState and hashChange events by customizing core routing APIs such as location and history, intercepts routing navigation and events, and provides a series of custom APIs to simulate browsing. Routing behaviors such as rendering, jump and return of web applications in server environment. Sub-applications run in this virtual routing system and are isolated from the base application's routing, thereby avoiding mutual influence and enhancing the ability to interact between sub-applications and the base application. Through the virtual routing system, the base application can easily obtain the routing information of the sub-application and control the jump of the sub-application. The routing information of the sub-application will be synchronized to the browser address as a parameter. In addition, the virtual routing system also provides many functions to help developers improve work efficiency.

Style isolation scheme upgrade

MicroApp originally implemented style isolation based on the CSSStyleSheet of the style element: that is, inserting the CSS string into the style element to generate CSSStyleSheet, traversing each CSS rule, and adding prefixes to achieve style isolation.

This is a tricky way to use the browser's own ability to format CSS and make modifications on this basis, saving a lot of work. But the problem also arises here. Different browsers may generate different CSSStyleSheet for the same CSS, which causes us to encounter unpredictable problems when processing CSSStyleSheet, resulting in inconsistent CSS performance.

So MicroApp changed a way to achieve style isolation. We used regular rules to cut the CSS string into the smallest units. Each unit contains a piece of CSS information. We organized all the information to generate a CSSTree, traversed each rule of the CSSTree, and added prefixes to achieve it. Style isolation.

The new solution not only smoothes the differences between different platforms, but also generally improves performance by more than 30% compared to the old version, and has more flexible configurations:

/* 对指定的选择器禁用样式隔离 *
/*! scopecss-disable .test1, .test2 */
.test1 {
  color: red;
}
.test2 {
  color: yellow;
}
.test3 {
  /* 在某一行中禁用样式隔离 */
  /*! scopecss-disable-next-line */
  background: url(/test.png);
}

vite compatible

In previous versions, MicroApp also supported access to vite, but the sandbox must be turned off because vite packages esm-type js files, and esm cannot run in the with environment, but this can easily lead to conflicts between the base and the sub-application. The conflict between them obviously needs further optimization.

To this end, we developed an iframe sandbox solution for Vite (more accurately, for esm-type projects). We put the esm-type js files into iframes and run them, and by rewriting the underlying prototype chain of the sub-application, Implement interception and processing of js and elements.

The iframe sandbox and the with sandbox are implemented in different ways and have slightly different functions. The with sandbox has more flexible operations, while the iframe sandbox has a stricter isolation environment. Both have their own advantages and disadvantages. Users can flexibly switch between the two sandboxes to meet the coverage and compatibility of more special scenarios.

Micro-App-DevTools

Micro-App-DevTools is a Chrome browser plug-in based on MicroApp. It aims to improve efficiency in the process of developing and using MicroApp. This plug-in can effectively solve debugging difficulties, simulate data communication, view window range, set routing, obtain environment variables and other demands, thereby better helping users understand and use MicroApp.

Detailed explanation of the plan

Micro-App-DevTools simulates the child application development environment and obtains parent application data to visually view communication data and improve development and debugging efficiency. For routing, the routing of all applications will be displayed, including the routing of nested applications and the routing of multiple sub-applications of a parent application, so that applications from different teams can quickly locate their own problems and facilitate collaboration. It also provides global variables and highlighted window functions to quickly locate the scope and improve troubleshooting efficiency. It also integrates icons, right-clicks, and console shortcuts to enable users to get started quickly and use it at zero cost.

Summarize

MicroApp 1.0 has been released. We will actively respond to developers’ questions and feedback and continue to improve to help more developers improve efficiency and development experience. Everyone is welcome to use MicroApp and participate in co-construction. We also hope to support us by giving us a star on GitHub~

MicroApp Github address:

https://github.com/micro-zoe/micro-app

Micro-App-DevTools Github address:

https://github.com/micro-zoe/micro-app-chrome-plugin

MicroApp official website address:

https://micro-zoe.github.io/micro-app