MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases

MicroApp, a widely adopted micro‑frontend framework within JD.com and other systems, has released version V1.0.0‑rc after a year of optimization, offering a core solution, practical cases, and future plans.

What is micro‑frontend? It is a technique that splits a large monolithic application into independent small apps that can be developed, deployed, and run separately, then aggregated to form a complete system, improving flexibility, decoupling, and team collaboration.

Core solution – MicroApp adopts a WebComponent‑inspired component model combined with a virtual routing system. It wraps each sub‑application in a custom element, providing style and element isolation while avoiding the compatibility issues of native ShadowDOM.

Virtual routing system – By redefining location, history, and intercepting popstate and hashchange, MicroApp isolates parent and child routes, synchronizes child route state to the browser URL, and offers APIs for route control and information exchange.

High‑performance sandbox – The new sandbox solves the long‑standing performance penalty of traditional proxy + with sandboxes by caching global variables, reducing with calls, applying async debouncing, and minimizing proxy operations. It also caches static resources (JS, CSS, HTML) and page/route state, enabling pre‑loading, pre‑parsing, and pre‑rendering, and supports ES‑Module integration with tools like Vite.

Performance tests inserting 500 × 20‑cell tables and rendering 10 000 elements show MicroApp outperforming qiankun by 3‑4×, approaching native JavaScript speed.

New configuration items (6 added, total 16) – clear-data (clear cached communication data on unload), disable-memory-router (turn off virtual router), default-page (specify initial page), keep-router-state (preserve route state after unload), disable-patch-request (stop automatic request URL rewriting), and fiber (run sub‑app JS asynchronously to reduce main‑thread blocking).

Global lifecycle listeners can be registered as follows:

import microApp from '@micro-zoe/micro-app'
microApp.start({
  lifeCycles:{
    created(e){ console.log('created', '<micro-app> tag initialized') },
    beforemount(e){ console.log('beforemount', 'resources loaded, before render') },
    mounted(e){ console.log('mounted', 'sub‑app rendered') },
    unmount(e){ console.log('unmount', 'sub‑app unloaded') },
    error(e){ console.log('error', 'render error that aborts rendering') }
  }
})

Data clearing API :

// clear data sent from current sub‑app to main app
microApp.clearData()
// clear data sent from main app to a specific sub‑app
microApp.clearData('my-app')

Embedding MicroApp is as simple as one line of code, similar to an iframe:

import microApp from '@micro-zoe/micro-app'
microApp.start({/* options */})

Practical case – JD’s Marketing Center integrated over 30 sub‑applications via MicroApp, reducing development effort by ~80% and delivering native‑level performance.

Future roadmap – The upcoming 1.0 version will open all the discussed “black‑tech” features for public use.