Desenvolvimento frontend: o que criar com WU

Seu código, suas interfaces

Com WU, você pode desenvolver o frontend de uma aplicação web como um conjunto de capacidades que trabalham juntas. Você escreve componentes, formulários, tabelas e telas com JavaScript ou TypeScript e o framework de cada app. WU conecta essas aplicações; WU CLI gera o projeto e prepara o fluxo de desenvolvimento.

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.

Por exemplo, você pode manter um painel em React e adicionar uma seção Angular sem reescrever o primeiro. Também pode usar React em todas as apps. A divisão útil acompanha capacidades do produto, como relatórios ou administração, em vez de atribuir um framework diferente a cada tela.

Os casos a seguir descrevem como organizar um produto. Os links levam a guias e exemplos executáveis que você pode adaptar; o CLI gera um ponto de partida, não uma loja ou um SaaS pronto.

Dashboards e painéis SaaS

Em um dashboard, uma app pode exibir relatórios e outra gerenciar a seleção de cliente ou período. O shell mantém a navegação e o espaço de cada app. Guarde um filtro compartilhado no store de WU e deixe cada visualização observar as mudanças; mantenha o estado de tabelas e formulários dentro de cada renderer.

Comece pelo contador compartilhado React e Vue: ele já mostra como ler um dado, atualizá-lo a partir de duas apps e cancelar assinaturas. Substitua o contador pelo filtro do seu produto e conecte cada visualização à sua API. Verifique se desmontar e montar novamente uma visualização preserva o dado compartilhado esperado.

Lojas online e catálogos

Separe catálogo e carrinho se precisarem evoluir de forma independente. O catálogo comunica a seleção por dados ou eventos; o carrinho mantém sua representação. Defina identificadores de produto e quantidades como contrato público, sem passar componentes do catálogo para o carrinho.

O guia de comunicação entre aplicações ajuda a escolher entre eventos, estado e chamadas com resposta. A arquitetura do shell explica quem controla as rotas. O backend da loja deve validar preços, estoque e pedidos; o estado compartilhado no navegador não é a autoridade dessas operações.

Ferramentas internas e portais de administração

Um portal interno pode reunir estoque, relatórios e suporte em apps mantidas por equipes diferentes. Use contratos quando uma app precisar solicitar uma operação e receber seu resultado. Combine os dados de entrada, os erros e a compatibilidade de versões antes de conectar provedor e consumidor.

O serviço de soma entre apps ensina requisição, resposta, validação, timeout e recuperação do provedor. Você pode aplicar esse padrão às operações do seu produto. A autorização de usuários e as validações de negócio pertencem à aplicação e ao backend; os grants de WU regulam o acesso à sua facade.

Migrar uma aplicação por etapas

Escolha uma capacidade com limites claros, adapte sua entrada ao ciclo de vida de WU e preserve as rotas usadas pelo usuário. Teste montagem e desmontagem antes de transferir outra parte. Se combinar frameworks, consulte React e Angular e as diferenças de cada adapter.

Crie seu primeiro projeto frontend

Com Node 24 e npm, o percurso inicial usa estes comandos. Execute a criação onde o diretório indicado ainda não existir:

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-open

Abra http://127.0.0.1:3000, selecione mi-plataforma e verifique se o contador React responde. O guia completo identifica os arquivos que você vai editar e o resultado de cada etapa. Depois, você pode adicionar outra app ou consultar os templates JavaScript e TypeScript.

Da primeira tela a uma aplicação pronta para publicar

Antes de separar mais apps, complete uma capacidade: interação, carregamento, erro, estado vazio e limpeza. Teste o contrato dos dois lados e revise navegação, foco e estilos. Use as APIs para consultar assinaturas específicas e o laboratório para observar a execução.

Depois, siga produção para construir e revisar o que será publicado. Se uma equipe consegue entregar tudo de forma coordenada, uma app modular pode ser suficiente; quando escolher microfrontends explica o custo da divisão.