Adaptive Sandbox Architecture

Micro-Frontends
Without Compromise

Aiga is a next-generation micro-frontend framework with 4 adaptive sandbox tiers, a pre-warmed iframe pool, typed RPC, and automatic overlay handling — in one <aiga-app> tag.

index.html
<!-- One tag, any framework -->
<aiga-app
  src="https://dashboard.app/"
  sandbox="strict"
  keep-alive
/>

Adaptive Sandbox Tiers

Choose the right isolation level for each sub-app. Trade off between security, performance, and capability — per sub-app, not globally.

"none"~0 MB

Direct Mount

Zero isolation. For same-team trusted modules that share the host runtime.

"light"~2-5 MB

Shadow DOM + Proxy

CSS isolation via Shadow DOM, JS leakage prevention via lightweight Proxy.

"strict"~15-20 MB

Pooled iframe + Bridge

Full JS isolation in pooled iframes. DOM bridge for overlay & storage namespacing.

"remote"~20-30 MB

Pure iframe

Strongest isolation. No bridge, no same-origin access. For untrusted 3rd-party.

Everything You Need

A complete platform for micro-frontend architecture — not just an isolation layer.

Tiered Isolation

4 sandbox levels — choose the right trade-off between isolation, performance, and capability for each sub-app.

Instant Iframe Acquisition

Pre-warmed iframe pool with LRU eviction delivers ~0ms context creation instead of 50-100ms cold starts.

<aiga-app> Web Component

One tag works everywhere — React, Vue, Angular, Svelte, or vanilla HTML. No framework lock-in.

Typed RPC Channel

Promise-based postMessage with auto-serialization, timeout handling, and compile-time type checking.

Overlay Teleportation

Modals and popovers escape Shadow DOM automatically. Iframe sub-apps use full-viewport promotion.

Built-in Router

URL-based routing with nested routes, dynamic params, guards, and a declarative <aiga-view>.

Keep-Alive & Prewarming

LRU keep-alive preserves state across navigations. Smart prewarmer predicts next-page loads.

Service Worker Cache

Cross-iframe resource caching with configurable strategies: cache-first, network-first, or SWR.

Security by Default

Cookie/storage namespacing, window.top override, origin-validated postMessage, and CORS detection.

How Aiga Compares

A detailed comparison with existing micro-frontend frameworks.

FrameworkIsolationOverlaysTyped RPCKey Limitation
qiankunProxy snapshotManualNoneSnapshot pollution leaks; no iframe pool; manual overlay handling
micro-appShadow DOM + ProxyPartialNoneNo tiered isolation; limited cross-app communication
wujieiframe + Proxyiframe promotionNoneNo iframe pool; all iframes are strict; no keep-alive LRU
Module FederationNone (shared runtime)N/APartialRequires Webpack/Vite plugin; no runtime isolation; tight coupling
Aiga4-tier adaptiveAuto (teleport + promotion)Full TypeScript RPC

Architecture Overview

  Host Application
  ================================================
  |  <aiga-app src="..." sandbox="strict">      |
  |  +-----------------------------------------+ |
  |  |  Shadow DOM Container                   | |
  |  |  +-----------------------------------+  | |
  |  |  |  Pooled iframe (from Pool)        |  | |
  |  |  |  +-----------------------------+  |  | |
  |  |  |  | Sub-App Content             |  |  | |
  |  |  |  | - Bridge Script injected    |  |  | |
  |  |  |  | - Storage namespaced        |  |  | |
  |  |  |  | - CSS vars synced           |  |  | |
  |  |  |  +-----------------------------+  |  | |
  |  |  +-----------------------------------+  | |
  |  +-----------------------------------------+ |
  |                                              |
  |  +------------------+  +-----------------+   |
  |  | iframe Pool      |  | RPC Channel     |   |
  |  | - Pre-warmed     |  | - Typed calls   |   |
  |  | - LRU eviction   |  | - Events        |   |
  |  | - Keep-alive     |  | - Timeout       |   |
  |  +------------------+  +-----------------+   |
  |                                              |
  |  +------------------+  +-----------------+   |
  |  | Router           |  | Service Worker  |   |
  |  | - History/Hash   |  | - Cross-iframe  |   |
  |  | - Nested routes  |  | - Cache layers  |   |
  |  | - Guards         |  | - SWR strategy  |   |
  |  +------------------+  +-----------------+   |
  ================================================

Ready to Build?

Get started in minutes. One import, one tag, zero configuration required.