Micro App: A Lightweight Micro‑Frontend Framework by JD iPaaS Team

Introduction Micro App is a micro‑frontend framework developed by JD Retail iPaaS team, aiming to lower entry cost and improve efficiency compared with existing solutions such as iframe, npm packages, single‑spa and qiankun.

Business Background Complex web applications in enterprises face maintenance challenges; traditional micro‑frontend approaches (iframe, npm, qiankun) have drawbacks like performance, communication complexity, and required code modifications.

Implementation Idea Micro App adopts a component‑based approach using a custom element <micro-app> built on WebComponent concepts (CustomElement and simulated ShadowDom) with HTML Entry to load remote HTML resources, providing element isolation, js sandbox, style isolation, plugin system, pre‑loading, and resource address completion.

Core Principles The custom element’s lifecycle (connectedCallback) loads child app HTML, parses JS/CSS, applies sandbox and isolation, and renders the app inside micro-app . Element isolation mimics ShadowDom without compatibility issues, preventing ID collisions and cross‑app interference.

Plugin System Developers can register plugins that process static resources before they are executed, enabling flexible handling of unforeseen problems.

JS Sandbox & Style Isolation Proxy‑based sandbox isolates global variables; CSS is transformed to ensure styles affect only the child app.

Pre‑loading & Resource Address Completion Uses requestIdleCallback to preload assets and rewrites relative URLs to absolute paths, avoiding missing resources.

Lifecycle Events Micro App emits created, beforemount, mounted, unmount, and error events for the host to react.

Data Communication Data is passed via element attributes; the framework overrides property setting to support object‑type attributes, enabling component‑style communication and optional global messaging.

Framework Comparison A comparison chart shows Micro App covers features of existing frameworks and adds unique capabilities such as resource address completion and a plugin system.

Business Practice & Future Plans Deployed in multiple JD projects to modernize legacy apps with minimal integration effort; future work includes defining a micro‑frontend standard, CLI tooling, build conventions, and deployment guidelines.

For more information, visit the official Micro App site or contact [email protected] .