Why “the real tech stack doesn’t matter”? That’s because there are many solutions that claim to be “stack independent”, and the best stack independent implementation since ancient times is

As one of the core values of the microfront-end, “technology stack independence” is mainly reflected in the fact that the base application does not limit the access to the technology stack of the application. Each microapplication has an independent runtime, which can avoid DOM, CSS, JS from being affected by external influences or other applications.

DOM isolation

Many solutions do not care about DOM isolation because microapplications can normally be initialized as long as a mount node is provided. However, the DOM of a microapplication is exposed globally and can be picked up by code outside the application. You can’t guarantee that someone else won’t do something about it or that your application’s code will have an unintended impact on the outside world. Currently, the only technology that can do DOM isolation, in addition to the old Iframe, is Web Components.

An important attribute of Web Components is encapsulation — the ability to hide tag structure, style, and behavior and isolate it from the rest of the code on the page, ensuring that different parts don’t get mixed up makes for cleaner, cleaner code. The Key is the Shadow DOM interface, which allows you to attach a hidden, separate DOM to an element.

Web Components can maintain a hidden, independent Shadow DOM that cannot be retrieved externally, thus achieving DOM isolation.

CSS isolation

Style isolation is one of the key problems solved by micro-front-end solutions. Some solutions avoid CSS pollution through reasonable conventions, such as CSS Modules, BEM specification, CSS-in-JS, etc. However, no matter how good the conventions are, they cannot stop the unconventional operations of developers. Moreover, development specifications are easy to implement for a brand new project, while existing projects may require a lot of renovation work. Other solutions, such as Qiankun’s “Dynamic Style Sheet”, have the potential to interact with dock applications even if they run on a single application. Currently, the only real CSS isolation is iframe and Web Components.

JS isolation

JS isolation is another key issue, and a common solution is to create a sandbox to run JS code. The JS sandbox can be implemented with eval, with, Proxy, Function, etc., of which, with has been deprecated. Proxy+ Eval or Proxy+Function cannot avoid problems such as prototype chain contamination, and hijacking

A new generation of solutions

From the previous analysis, iframe and Web Components are the ideal isolation technology, and the combination of the two is a great solution! The new generation of micro front-end solutions < M-app > are stack independent by integrating homologous IFrame with Web Components. The overall architecture is as follows:

<m-app>

Of document. In addition, hijacked the iframe environment querySelector, document. The addEventListener method, such as the developer of the method call agent to ShadowRoot, keep constant development way, Reduce the transformation cost of application access.

Object.defineProperties(document, {
    querySelector: {
        value: (. args) = >ShadowRoot.querySelector(... args), },addEventListener: {
        value: (. args) = >ShadowRoot.addEventListener(... args), }, });Copy the code

In addition, the structure of the Shadow DOM of the microapplication is basically the same as that of the normal DOM, and the whole thing looks like using 

<m-app entry="http://example.com/path/to/entry.html"></m-app>
Copy the code
├ ─<iframe hidden>│ ├ ─<meta>ShadowRoot ─ │ ├ ─<head>─ ├ ─<title>│ │ ├ ─... ├ ─<html>─ │ │ ├ ─<h1>├ ─<body>─ ├ ─<div>├ ─...Copy the code

Finally, find a wave of star ⭐⭐⭐ for the project

gitee.com/ambit/m-app

Github.com/ambit-tsai/…