Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

The Unbounded Micro Frontend Framework is a micro frontend solution based on Web Components + iframe. It has a series of advantages such as low cost, fast speed, native isolation, and powerful functions. The following is a detailed introduction to the Unbounded Micro Frontend Framework:

1. Background and Overview

Micro frontend is a technical means and method strategy for multiple teams to jointly build modern web applications by independently releasing functions. The Unbounded Micro Frontend Framework provides developers with an efficient and flexible micro frontend solution by introducing Web Components and iframe technology. The framework aims to solve the problems of existing micro frontend solutions in terms of adaptation cost, style isolation, running performance, page blank screen, sub-application communication, sub-application keep alive, multi-application activation, Vite framework support, application sharing and other core user demands.

2. Core Features

1. low cost: The main application of the borderless micro-frontend framework has low usage cost, and the sub-application adaptation cost is also relatively low.
2. high speed：The sub-application first screen opens quickly and runs quickly. This is due to the optimized resource management and preloading strategy of the Unbounded Framework.
3. Native IsolationCSS styles can be strictly isolated natively through Web Components, and JS running in iframes also achieves strict native isolation. This isolation mechanism ensures the independence of sub-applications and avoids style conflicts and script conflicts.
4. Powerful：The Unbounded Micro Frontend Framework supports sub-application keep-alive, sub-application nesting, multi-application activation, application sharing, decentralized communication, etc. These features make the Unbounded Framework more flexible and scalable when dealing with complex front-end applications.

3. Technical Implementation

The Unbounded Micro Frontend Framework adopts the sandbox mode of Web Components + iframe, inheriting the advantages of iframe and solving its disadvantages to achieve native isolation and efficient operation. The specific implementation methods include:

1. Create an iframe with the same origin as the main application: The path carries the routing information of the sub-routes, and the same source is to facilitate communication between applications.
2. Parse the entry HTML of the sub-application: Identify the HTML part, separate the style and js; process the css and re-inject the html; create a webComponent and mount the html.
3. Intercepting the document object in an iframe: Unify the dom to point to shadowRoot to solve the problem that pop-up or bubble components cannot cover the main application.
4. Communication Mechanism：The iframe and the main application are in the same domain and naturally share memory for communication. Unbounded provides a decentralized event mechanism to solve communication problems.
5. Routing state management：The forward and backward movements of the browser can naturally affect the iframe. At this time, the route changes of the iframe are monitored and synchronized to the main application. If the browser is refreshed, the saved route can be read back from the URL.

4. Advantages and Applications

The advantages of the Unbounded Micro Frontend Framework are its low cost, high speed, native isolation and powerful functions. This gives it a significant advantage when dealing with large and complex frontend applications. At the same time, the Unbounded Framework also supports a variety of frontend technology stacks, such as Vue, React, etc., allowing developers to flexibly choose technology stacks according to project requirements.

In terms of application scenarios, the Unbounded Micro Frontend Framework is suitable for large-scale web applications that require efficient collaborative development, independent deployment and upgrades. By introducing the Unbounded Framework, developers can split the frontend application into multiple independent micro frontend applications, each of which can be independently developed, tested and deployed. This can not only improve development efficiency, but also reduce project complexity and risk.