Microfrontends: when to choose WU Framework
Learn what microfrontends or microfronts are, where WU fits, and how to split an application while keeping control of data, routes and deployments.
What are microfrontends or microfronts?
Microfrontends divide an interface into applications with functional boundaries and their own delivery cycles. You will also see the terms micro-frontends, microfronts and MFE. Splitting components into folders is not enough: each application needs an integration contract and someone responsible for publishing it.
WU Framework is a JavaScript runtime for composing these applications. The shell decides where they appear; WU manages registration, loading, mounting and unmounting. Each app keeps the technology it uses to build its interface. What is WU? explains the basic contract.
The package includes adapters for React, Vue, Angular, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX and Stimulus. See their contracts in the adapter reference.
For another technology, register mount and unmount with wu.define, or build an adapter with createWuAdapter. The common contract lets you connect applications using the same framework or different frameworks.
A store with independent teams
One team can maintain a React catalog and another a Vue cart. The shell reserves space for each. The catalog publishes the selection and the cart observes it; neither needs to import the other’s internal components. The React and Vue shared counter lets you try that exchange with downloadable code.
Split by capabilities such as catalog, payments or administration. A shared button usually belongs in a component library. Turning it into another microfrontend adds loading, mounting and coordination without necessarily giving it useful autonomy.
When WU is worth evaluating
- You need to introduce a new application into an existing interface in stages while keeping its technology.
- Teams publish different capabilities and can maintain compatible contracts.
- You want to combine renderers and connect applications through state, events or versioned services.
A single team with coordinated releases may work better with a modular application. Microfrontends add decisions about dependencies, network failures, observability and compatibility. WU provides composition mechanisms; the team still owns those decisions.
What to decide before production
Define who controls the URL, which data crosses each boundary and what happens if an app fails to load. Sharing a JavaScript context does not isolate hostile code. WU grants restrict access to its facade; review permissions and lifecycle and shell architecture.
An independent build does not create an independent deployment by itself either. Publish compatible assets and manifests, retain recoverable versions and check the shell against every change. The production guide explains CLI output.
Evaluate WU with a real capability
Start with your first microapp using WU CLI, add a second application and test unmounting, communication and a loading failure. To choose an integration, see React and Angular; to choose an architecture, see WU vs Module Federation and single-spa.