Microfrontends.
Uma mesma página.
WU Framework compõe aplicações por um ciclo de vida comum, independente do framework. Cada app mantém sua tecnologia; WU coordena montagem e comunicação. WU CLI prepara o projeto para começar.
Um clique no React. Uma atualização no Vue.
Clique em Somar um. Duas microapps reais compartilham um contador pelo WU. Depois desmonte o Vue e veja o que acontece com o estado.
Conectando duas microapps…
Clique para escrever no store do WU.
0Atualiza a partir do mesmo store do WU.
Configuração e isolamento.
Escolha como carregar, montar e conectar as aplicações. Estas ferramentas também podem ser combinadas.
| Decisão | WU Framework | single-spa | Webpack Module Federation |
|---|---|---|---|
| Composição | Ciclo de vida, store, eventos e serviços | Ciclo de vida e orquestração | Carregamento de módulos remotos e dependências compartilhadas |
| Isolamento de CSS | Shadow DOM gerenciado pelo WU, conforme a configuração | Estratégia da app; permite Shadow DOM | Estratégia da app e do renderizador |
| Isolamento de DOM | Um Shadow Root por app nesta demo; o modo iframe é uma opção separada. | Contêiner de montagem; a app decide se usa Shadow DOM. | A federação compartilha módulos; a app decide seu contêiner DOM. |
| Configuração habitual | WU CLI gera o shell e as apps. Configure manifests, grants e lifecycle; ModuleFederationPlugin não é necessário. | Root config, registro de apps, regras de ativação e lifecycle; escolha o carregador e o build. | Com webpack: ModuleFederationPlugin, exposes/remotes e a política shared. Outros hosts de federação têm sua própria configuração. |
Escopo e fontes técnicas
Shadow DOM encapsula a estrutura e os seletores CSS. Ele não é uma barreira de segurança contra JavaScript hostil. A configuração descrita não é uma nota de dificuldade nem um benchmark de produtividade.
Fontes técnicas oficiais: webpack / ModuleFederationPlugin · single-spa / CSS · single-spa + Module Federation
Participe da construção do WU.
Explore os repositórios oficiais, compartilhe um caso reproduzível ou fale com os criadores.
Os repositórios do Forgejo exigem login. Você também pode relatar um bug ou sugerir uma ideia pelo Suporte.
13 adapters incluídos. Integração aberta.
Você também pode conectar outra tecnologia com um ciclo de vida próprio. Criar uma integração →
O que você quer criar?
Programe suas telas com JavaScript ou TypeScript. Conecte capacidades do produto com estado, eventos e serviços de WU.
Desenvolver aplicações web com WU →Aprenda passo a passo
01 / COMEÇAR- 01 / ENTENDERO que é WU
Que problema resolve e quando convém utilizá-lo.
- 02 / CRIARSua primeira microapp
Gere o projeto e verifique uma app React funcionando.
- 03 / AMPLIARAdicionar uma segunda app
Inclua Vue no mesmo projeto e teste as duas apps.
- 04 / CONSTRUIRPreparar a produção
Construa os arquivos que serão publicados e revise-os no navegador.
Escolha como compor seu frontend
Microfrontends e microfronts
O que são, quando usar e quais decisões continuam com sua equipe.
Entender a arquitetura →INTEGRAÇÃOEscolha sua integração
Consulte os 13 adapters incluídos e aprenda a conectar outra tecnologia pelo seu ciclo de vida.
Conectar frameworks →COMPARAÇÃOWU vs Module Federation
Compare WU, Module Federation e single-spa conforme o que precisa integrar.
Avaliar as opções →Continue conforme sua necessidade
02 / CONSULTAR E PRATICARConsulte uma API
Busque mount, store.on ou request. Encontre seus parâmetros, resultado, permissões e exemplos de uso.
ASSINATURAS · ERROS · LIMPEZAESTOU NO TERMINALUse WU CLI
Entenda o que cada comando gera, onde editar sua app e como desenvolver, construir e servir o projeto.
CREATE · ADD · DEV · BUILD · SERVEQUERO TESTARExecute um exemplo
Escolha uma receita, leia seu código e observe o resultado. Siga o guia para levar esse exemplo à sua aplicação.
ESTADO · EVENTOS · SERVIÇOSALGO NÃO FUNCIONAEncontre a causa
Parta de um sintoma: uma app vazia, um evento rejeitado ou uma solicitação sem resposta. Descubra o que revisar e como corrigir.
SINTOMA · VERIFICAÇÃO · SOLUÇÃOComo as aplicações se encaixam
VER ARQUITETURA ↗Seu primeiro resultado
03 / NO SEU PROJETOComece com uma app.
A CLI gera uma página anfitriã Astro e uma microapp React. O guia explica quais arquivos aparecem e como testar seu contador. Você adicionará Vue na próxima etapa.
Seguir o guia completo →npm install --global @wu-framework/cli@1.2.0
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
wu install
wu dev --native --port 3000 --no-openEdite Astro, React e Vue no navegador. O ambiente instala as dependências do exemplo e inicia a prévia.
Este starter usa ferramentas JavaScript. Siga o guia local para executar o CLI nativo do WU. Guia local →Quer estudar uma aplicação completa? Veja como este portal foi construído. Para escolher npm ou CDN, consulte versões e distribuição.