Core Concepts§

Vocabulary§

Four words carry most of the weight in these docs. They name roles, not packages: one application can be a host in one place and a hostee in another.

Host

The application that provides the containing product surface. It decides where a feature appears, in which display mode, and under what capabilities.

Hostee

The application loaded inside the host. Not a dictionary word. The suffix does the same job it does in employee or addressee: a hostee is the one hosted.

Feature

The hostee viewed as a product unit: independently owned, deployed, and versioned, with a contract describing what it says and accepts.

Shell

The installable package a feature ships so any host can embed it. The shell carries the contract and speaks the protocol; the host is never the shell.

Where these terms come from, and why the boundary is drawn here, is argued end to end in Microfrontends from First Principles.

Features§

A feature is a self-contained micro-frontend that runs in isolation. Each feature bundles its own framework, dependencies, and assets. Features communicate with their host through a standardized messaging protocol.

Host Applications§

A host is the parent application that loads and orchestrates features. The host manages feature lifecycle, routes messages, and provides shared context like authentication. It embeds a feature by installing that feature's shell; the host writes no protocol code of its own.

• Dynamically loads features at runtime
• Manages feature positioning (inline, modal, popout)
• Handles graceful degradation if features fail

Contracts§

Contracts define the messages a feature can send and receive. They specify emitted actions (messages this context sends) and accepted actions (messages this context receives), with optional JSON Schema validation.

const contract = {
  emitted: [
    { type: 'CONFIG', schema: configSchema },
    { type: 'NAVIGATION' }
  ],
  accepted: [
    { type: 'READY', schema: readySchema },
    { type: 'DATA', schema: dataSchema }
  ]
}

Channels§

A channel is a bidirectional communication pipe between a host and a feature. Channels provide reliable message delivery with ordering guarantees.

Isolation Model§

Features typically run in separate browser contexts (iframes, windows, or web workers) with strict isolation:

• CSS isolation: Styles don't leak between features
• JavaScript isolation: Separate global scope per feature
• Security isolation: Features can't access host DOM or data

Continue Learning§