MicroApp 1.0: Faster Sandbox and Virtual Routing for Micro‑Frontend Development

MicroApp is a micro‑frontend framework released by JD’s front‑end team, built on a WebComponent‑like model that works with any front‑end stack.

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

Upgrade highlights in version 1.0

Simplified integration

Improved sandbox performance

Virtual routing system

Style isolation overhaul

Vite compatibility

Developer tools

One‑line embedding

MicroApp uses CustomElement and a custom ShadowDom to package a micro‑frontend as a WebComponent‑like element, providing JavaScript, style, and route isolation while keeping the usage pattern similar to an iframe.

Embedding example (illustrated in the image below).

JS sandbox challenges and solutions

The original sandbox combined proxy and with, causing noticeable performance loss because with changes the scope chain and leads to repeated property accesses. MicroApp mitigates this by:

Variable pre‑placement: defining global variables with Object.defineProperty to avoid extra work in the proxy’s get trap.

Asynchronous debounce: marking promises so that a new promise starts only after the previous one resolves, preventing parallel executions that hurt performance.

Additional sandbox features such as snapshot, cache, and pre‑load bring native‑like execution speed.

Virtual routing system

To prevent routing conflicts when multiple micro‑apps share a browser, MicroApp rewrites core routing APIs (location, history, popstate, hashchange) and provides a virtual router that isolates each sub‑application’s navigation while synchronising its route to the browser address bar.

Style isolation upgrade

Earlier versions inserted CSS strings into a CSSStyleSheet and added prefixes, which behaved inconsistently across browsers. The new approach parses CSS into a tree of minimal units, prefixes each rule, and achieves over 30% performance improvement.

/* Disable style isolation for specific selectors */
! scopecss-disable .test1, .test2
.test1 { color: red; }
.test2 { color: yellow; }
/* Disable on the next line */
! scopecss-disable-next-line
background: url(/test.png);

Vite compatibility

Previous versions required disabling the sandbox for Vite‑built ESM modules. MicroApp now offers an iframe‑based sandbox for ESM, isolating the sub‑application by rewriting its prototype chain, allowing seamless integration with Vite.

Micro‑App‑DevTools

Micro‑App‑DevTools is a Chrome extension that visualises sub‑application data, routes, global variables, and viewport boundaries, helping developers debug and collaborate across multiple micro‑frontends.

Conclusion

MicroApp 1.0 is publicly released with the above enhancements. The project continues to accept community feedback and contributions.

GitHub repositories:

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

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