# Desenvolvimento frontend: o que criar com WU

Desenvolva aplicações web com JavaScript ou TypeScript e a tecnologia de cada app. Conheça os 13 adapters de WU e como criar sua própria integração.

<span id="tu-código-tus-interfaces"></span>

<span class="section-anchor" id="section-1"></span>

## 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](/pt/docs/framework/api-adapters/).

Para outra tecnologia, registre `mount` e `unmount` com `wu.define`, ou crie um adapter com [`createWuAdapter`](/pt/docs/framework/api-adapters/#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.

<span id="dashboards"></span>

<span id="dashboards-y-paneles-saas"></span>

<span class="section-anchor" id="section-2"></span>

## 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](/pt/docs/guides/shared-counter/): 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.

<span id="ecommerce"></span>

<span id="tiendas-online-y-catálogos"></span>

<span class="section-anchor" id="section-3"></span>

## 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](/pt/docs/framework/communication/) ajuda a escolher entre eventos, estado e chamadas com resposta. A [arquitetura do shell](/pt/docs/guides/architecture/) 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.

<span id="internal-tools"></span>

<span id="herramientas-internas-y-portales-de-administración"></span>

<span class="section-anchor" id="section-4"></span>

## 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](/pt/docs/guides/rpc-between-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.

<span id="migrar-una-aplicación-por-etapas"></span>

<span class="section-anchor" id="section-5"></span>

## 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](/pt/docs/guides/react-angular-microfrontends/) e as diferenças de cada [adapter](/pt/docs/framework/api-adapters/).

<span id="crea-tu-primer-proyecto-frontend"></span>

<span class="section-anchor" id="section-6"></span>

## 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:

```sh
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](http://127.0.0.1:3000), selecione **mi-plataforma** e verifique se o contador React responde. O [guia completo](/pt/docs/guides/quickstart/) identifica os arquivos que você vai editar e o resultado de cada etapa. Depois, você pode [adicionar outra app](/pt/docs/guides/add-an-app/) ou consultar os [templates JavaScript e TypeScript](/pt/docs/cli/templates/).

<span id="de-la-primera-pantalla-a-una-aplicación-publicable"></span>

<span class="section-anchor" id="section-7"></span>

## 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](/pt/api/) para consultar assinaturas específicas e o [laboratório](/pt/labs/) para observar a execução.

Depois, siga [produção](/pt/docs/guides/production/) 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](/pt/docs/guides/microfrontends/) explica o custo da divisão.