O que é WU

Veja versões, mudanças e requisitos em Framework 4.0 e CLI 1.2.

O WU permite reunir aplicações web independentes em uma mesma página. Cada aplicação mantém sua interface e seu framework; o WU coordena quando ela aparece, quando é removida e como se comunica com as demais.

O pacote inclui adapters para React, Vue, Angular, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX e Stimulus. Consulte os contratos na referência de adapters.

Para outra tecnologia, registre mount e unmount com wu.define, ou crie um adapter com createWuAdapter. O contrato comum permite conectar aplicações com o mesmo framework ou com frameworks diferentes.

O problema que resolve

Imagine uma loja com um catálogo em React e um carrinho em Vue. Suas equipes precisam alterar e publicar cada parte separadamente, mas o usuário espera uma única experiência: escolher um produto no catálogo e vê-lo no carrinho.

O WU carrega ambas as aplicações, entrega um contêiner a cada uma e oferece canais para compartilhar dados. O catálogo pode avisar sobre uma seleção sem importar componentes nem código do carrinho. As duas aplicações também poderiam usar React: a independência entre aplicações é o essencial; misturar frameworks é uma possibilidade.

Três partes para entender

1. A app fornece uma parte da interface

O catálogo e o carrinho são microapps, também chamadas microfrontends ou MFE. Cada uma registra como se desenhar em um contêiner e como remover os recursos que criou ao sair. No WU, essas operações se chamam mount e unmount: seu ciclo de vida.

Você pode escrevê-las com JavaScript ou usar um adaptador, que conecta o ciclo de vida de React, Vue ou outro framework ao WU. Os adaptadores evitam repetir essa conexão em cada aplicação.

2. O shell decide onde cada app aparece

O shell ou host é a página que as reúne. Define suas URLs, reserva os espaços para mostrá-las e coordena navegação, permissões e erros visíveis. Pode ser construído com Astro, outro framework ou HTML e JavaScript.

Na loja, o shell pode reservar uma área para o catálogo e outra para o carrinho. Não precisa conhecer os componentes internos de cada um.

3. O runtime as conecta durante a execução

O runtime é o pacote JavaScript wu-framework em execução na página. Carrega e monta as apps e fornece eventos, estado compartilhado e chamadas com resposta.

Por exemplo, o catálogo pode emitir um evento ao selecionar um produto; o carrinho o recebe e atualiza sua interface. O shell concede as permissões de que cada app precisa. Aprenda esses mecanismos após a primeira montagem, em comunicação entre aplicações.

A WU CLI prepara o projeto. O comando wu trabalha no terminal: gera arquivos, prepara dependências, inicia o desenvolvimento e reúne os arquivos de produção. O runtime trabalha na aplicação aberta pelo usuário. Você pode usar WU sem a CLI se preparar esses arquivos com suas próprias ferramentas. Conheça o fluxo da CLI.

Quando faz sentido

• Equipes diferentes precisam manter e publicar partes de uma mesma experiência separadamente.
• Você quer incluir uma aplicação nova ao lado de outra existente durante uma migração.
• Você precisa compor interfaces com limites de estilos e comunicação explícita entre aplicações.

Se uma única aplicação com seu roteador e seus componentes atende às suas necessidades, dividi-la em microapps acrescenta trabalho de configuração, montagem e coordenação. Você não precisa de vários frameworks para usar WU nem precisa de WU apenas por usar vários componentes.

O WU também não é uma fronteira para executar código hostil. Shadow DOM encapsula DOM e estilos, mas não impede, por si só, o acesso ao contexto JavaScript da página. Consulte isolamento e segurança e permissões antes de escolher como carregar código de terceiros.

Comece com uma app

Siga Sua primeira app para gerar um shell com uma microapp e verificar o resultado no navegador. Depois você pode adicionar outra app e preparar a produção.

O percurso usa Astro e React como exemplo. O shell e os frameworks escolhidos podem ser outros.

O que acontece ao montar uma app

O shell declara a URL da app. Nessa URL, um manifesto (wu.json) descreve o arquivo JavaScript que o WU deve carregar: sua entrada. Esse arquivo registra o ciclo de vida; o shell pede a montagem e a interface aparece.

import { wu } from 'wu-framework';

await wu.init({
  apps: [{ name: 'hello', url: '/apps/hello' }],
  sandbox: 'module',
});

await wu.mount('hello', '#hello-slot');

{
  "name": "hello",
  "entry": "assets/hello.js",
  "styleMode": "own-only",
  "wu": { "permissions": [] }
}

import { wu } from 'wu-framework';

wu.define('hello', {
  mount(container) {
    const heading = document.createElement('h2');
    heading.textContent = 'Hola desde WU';
    container.append(heading);
  },
  unmount(container) {
    container.replaceChildren();
  },
});

Se precisar se aprofundar

Consulte supervisão, recuperação e replay para superviseApp, createReplaySession e os métodos scoped reportError, now e random.