Frontend web, mobile e desktop: modelo mental e decisões

O problema e por que importa

Frontend é a fronteira de interação, não a autoridade final das regras. Ele apresenta estado, coleta intenção, oferece feedback e precisa continuar compreensível sob latência, erro, acessibilidade e tamanhos diferentes. Esconder um botão melhora a experiência; não substitui autorização no backend.

Quando o eletricista conclui a OS 742 num celular com conexão instável, a pergunta é: o que a interface mostra antes, durante e depois do envio, inclusive quando o resultado é desconhecido? Um bom fluxo impede cliques duplicados sem mentir que tudo terminou.

Vocabulário antes das siglas

• DOM: Document Object Model; árvore de objetos que representa um documento web para scripts e tecnologias assistivas.
• componente: unidade de interface com contrato de propriedades, estado e comportamento definidos.
• estado: informação que influencia o que a interface apresenta em determinado momento.
• evento: ocorrência observável, como clique, envio, resposta ou mudança de conectividade.
• renderização: processo de produzir a representação visual e semântica a partir de dados e componentes.
• hidratação: associação, no cliente, do comportamento interativo ao HTML previamente renderizado.
• roteamento: mapeamento entre endereços, telas e estado de navegação.
• bundle: conjunto de código e recursos empacotados para entrega ao cliente.
• PWA: Progressive Web App; aplicação web que usa capacidades progressivas como instalação e funcionamento offline controlado.
• responsividade: adaptação de layout e interação às capacidades e dimensões do dispositivo, não apenas redução de escala.

Renderizar, hidratar e tornar responsivo são trabalhos diferentes. Acessibilidade também depende de semântica, foco, nome acessível e ordem de interação, não apenas contraste visual.

Modelo mental

o frontend é uma projeção local do estado do sistema; ele orienta a pessoa, mas o servidor decide o que é válido. A analogia ajuda a localizar responsabilidades; ela deixa de valer quando esconde concorrência, falhas parciais ou atores maliciosos. Software distribuído não tem uma única percepção de tempo nem sucesso: uma resposta pode se perder depois de um efeito ter ocorrido.

Fronteira e responsabilidade

O frontend valida para orientar, normaliza entrada e mantém estados de carregamento, vazio, erro, sucesso e resultado desconhecido. O servidor repete toda validação de confiança e decide permissão. O contrato entre ambos define erros estáveis e correlação.

Web, mobile e desktop compartilham domínio, mas têm capacidades e riscos distintos. Offline exige fila local, sincronização e conflito; PWA exige estratégia de cache; aplicativos instalados exigem atualização e armazenamento seguro. A escolha nasce da jornada, não da moda.

Decisão orientada por risco

Pergunta de projeto	Decisão inicial	Evidência exigida
Onde validar?	UX no cliente e confiança no servidor	Mesma entrada inválida é testada nos dois
Como mostrar envio?	Estado explícito e ação protegida contra duplicata	Timeout leva a estado recuperável
O que funciona offline?	Somente jornadas com conflito modelado	Reconexão e duplicata são ensaiadas
Quanto JavaScript enviar?	Medir por rota e capacidade	Orçamento de bundle falha no CI

A alternativa mais complexa só é promovida quando essa evidência mostra que a solução atual não atende ao risco. A decisão registra também custo operacional, forma de reversão e responsável.

Caso real: manutenção conectada ao ERP

O eletricista conclui a OS 742. O sistema valida identidade, unidade, estado atual e evidências; persiste a mudança; registra auditoria; publica a integração; informa “sincronização pendente” se o ERP não responder. A decisão deste livro aparece ao entregar interação rápida e resiliente sem transferir regras de autoridade para o cliente. O sucesso não é apenas HTTP 200: banco, usuário, fila, ERP e telemetria precisam convergir para um estado conhecido.

Falha orientadora

duplo clique cria duas OS, cache mostra estado antigo e o botão oculto é confundido com autorização. Trate a falha como cenário de projeto, não exceção improvável. O controle principal é máquina de estados explícita, idempotência, acessibilidade, orçamento de desempenho e testes de jornada. Seu teste deve falhar antes do controle e passar depois dele.

Segurança, privacidade e custo

• Trate todo dado do cliente como não confiável, inclusive campos ocultos e armazenamento local.
• Evite tokens sensíveis em localStorage quando cookies de sessão protegidos atendem ao fluxo web.
• Codifique saída e aplique Content Security Policy para reduzir impacto de XSS.
• Teste teclado, leitor de tela, zoom de 200%, toque e movimento reduzido como requisitos funcionais.

O manual de Cybersecurity aprofunda threat modeling, identidade, proteção de dados, supply chain e resposta a incidentes; os controles acima são a aplicação específica nesta disciplina.

Erros frequentes e diagnóstico

1. Tecnologia antes do problema: registre hipótese e atributo de qualidade que justificam a escolha.
2. Caminho feliz apenas: injete timeout, duplicata, concorrência, permissão negada e dado inválido.
3. Métrica de vaidade: acompanhe Core Web Vitals, erro de interface, tamanho de bundle, taxa de abandono e sucesso por dispositivo e ligue o sinal a uma decisão.
4. Automação sem condição de parada: limite tentativas e torne o estado pendente visível.
5. Documentação sem prova: execute exemplos e conecte diagramas a arquivos, owners e testes.

Critérios de aceite

• Fronteira, dono, entradas, saídas e dependências estão diagramados.
• Caminho feliz e falha parcial possuem testes reproduzíveis.
• O controle “máquina de estados explícita, idempotência, acessibilidade, orçamento de desempenho e testes de jornada” tem evidência observável.
• Segurança, privacidade, acessibilidade, custo e operação foram avaliados.
• A métrica “Core Web Vitals, erro de interface, tamanho de bundle, taxa de abandono e sucesso por dispositivo” possui unidade, janela e responsável.
• Runbook informa diagnóstico, mitigação, recuperação e escalonamento.

Prática e recuperação ativa

1. Desenhe a jornada da OS 742 e marque onde esta camada começa e termina.
2. Explique a diferença entre ocultar uma ação e negar sua autorização no servidor.
3. Injete a falha “duplo clique cria duas OS, cache mostra estado antigo e o botão oculto é confundido com autorização” e capture evidência antes/depois do controle.
4. Transfira o raciocínio para um pedido de e-commerce: o que permanece e o que muda?

Entregável verificável: protótipo responsivo da conclusão da OS, matriz de estados, teste de teclado e cenário de timeout com retomada segura. A entrega só é aceita quando outra pessoa consegue repetir a verificação.

Fontes primárias e oficiais

Revisão editorial: 2 de agosto de 2026. Confirme versões antes de implementar configuração volátil.

• https://developer.mozilla.org/docs/Web
• https://www.w3.org/WAI/
• https://web.dev/vitals/

Da compreensão à execução

O modelo anterior explica o que precisa permanecer verdadeiro. Agora o caderno transforma essa compreensão em um experimento. Antes de executar, escreva sua previsão; depois compare o observado com o esperado e registre a primeira fronteira onde o estado divergiu.

Objetivo, hipótese e ambiente

Objetivo: demonstrar entregar interação rápida e resiliente sem transferir regras de autoridade para o cliente em uma fatia da jornada de manutenção. Hipótese: o controle “máquina de estados explícita, idempotência, acessibilidade, orçamento de desempenho e testes de jornada” reduz a falha escolhida sem violar o contrato das camadas vizinhas.

Pré-requisitos: Git, terminal, TypeScript ou a tecnologia indicada no exemplo, ambiente local isolado e dados sintéticos. Duração orientativa: 90–180 minutos; depende de prática, não de leitura. Não use credenciais reais nem produção.

sequenceDiagram
actor E as Eletricista
participant W as Aplicativo
participant A as API de manutenção
participant D as Estado canônico
participant R as ERP
E->>W: conclui OS 742
W->>A: intenção + identidade + idempotency-key
A->>D: valida e persiste
A-->>W: estado confirmado ou pendente
A->>R: integração controlada
R-->>A: confirmação, rejeição ou timeout

Passo 1 — registre o contrato antes do código

Escreva pré-condição, pós-condição, erros esperados, timeout e política de repetição. Separe “aceito para processamento” de “confirmado pelo ERP”. Defina o que a pessoa verá durante incerteza. O contrato deve caber em uma tabela e ser revisado por negócio, desenvolvimento, segurança e operação.

Situação	Resultado público	Estado interno	Próxima ação
Entrada válida	confirmado ou 202 pendente	registrado	processar/observar
Sem permissão	negação estável	nenhuma mutação	auditar
Duplicata	mesmo resultado lógico	um efeito	responder idempotente
Dependência lenta	timeout controlado	pendente conhecido	retry com limite
Dado incompatível	erro de contrato	quarentena	corrigir/reprocessar

Passo 2 — implemente a menor fatia vertical

O trecho é didático e precisa ser adaptado ao runtime indicado. Ele ilustra a decisão central, não constitui aplicação completa.

type ViewState =
| { status: "loading" }
| { status: "ready"; ordens: Ordem[] }
| { status: "error"; retryable: boolean };

Mantenha a mudança pequena: interface, regra, persistência, teste e sinal operacional no mesmo ticket. Evite construir “toda a infraestrutura” antes de uma jornada observável.

Passo 3 — prove o caminho feliz e o negativo

1. Execute uma OS válida e capture resposta, estado persistido e correlation ID.
2. Repita a mesma intenção; o efeito lógico deve continuar único.
3. Remova a permissão; nenhum estado deve mudar.
4. Force timeout do ERP; a UI deve mostrar estado honesto e a fila não pode crescer sem limite.
5. Corrompa um campo do contrato; rejeite-o com erro útil, sem stack trace nem segredo.

O teste negativo é parte do produto. Sem ele, o controle pode existir apenas no diagrama.

Passo 4 — instrumente a decisão

Registre duração, resultado, dependência, versão do contrato e correlação. Não use nome, e-mail, token, payload completo nem user_id como dimensão ilimitada de métrica. Para este livro, acompanhe Core Web Vitals, erro de interface, tamanho de bundle, taxa de abandono e sucesso por dispositivo. Defina SLI, janela, limiar e ação humana associada.

Exemplo de evento estruturado conceitual:

{
"event": "work_order.transition",
"order_id": "742",
"result": "pending_erp",
"contract_version": "v1",
"correlation_id": "demo-01",
"duration_ms": 184
}

Passo 5 — injete falha e recupere

Falha-alvo: duplo clique cria duas OS, cache mostra estado antigo e o botão oculto é confundido com autorização.

• Detectar: qual sinal diferencia falha real de tráfego normal?
• Conter: como impedir propagação, repetição ilimitada ou perda de dados?
• Mitigar: qual recurso pode ser desativado ou degradado com segurança?
• Recuperar: como reprocessar sem duplicar efeito?
• Aprender: qual teste, alerta, ADR ou limite impedirá recorrência?

Use timeout curto no laboratório e retry limitado com atraso e jitter. Um retry não é recuperação quando a operação não é idempotente. Registre itens que exigem intervenção humana em fila consultável; não esconda exceções em log.

Segurança e abuso

Faça uma mini análise: ativo, ator, fronteira, ameaça, impacto, controle e teste. Teste acesso horizontal entre unidades, elevação de perfil, payload grande, repetição rápida, dado fora de ordem e indisponibilidade. O controle esperado é máquina de estados explícita, idempotência, acessibilidade, orçamento de desempenho e testes de jornada. Valide no servidor e preserve evidência sem expor segredos.

Troubleshooting

Sintoma	Hipótese	Verificação	Correção segura
Estado diverge do ERP	efeito parcial	correlação + outbox/inbox	reconciliar idempotentemente
Latência cresce	fila ou dependência saturada	p95/p99, lag, pool	backpressure e capacidade
Só um tenant falha	escopo, dado ou quota	dimensão de tenant controlada	corrigir política/dado
Retry aumenta erro	operação não idempotente	contar efeitos por chave	deduplicar e limitar
Dashboard “verde”	SLI não representa jornada	teste sintético E2E	medir resultado do usuário

Critérios de aceite verificáveis

• Caminho feliz, entrada inválida, negação, duplicata e timeout foram executados.
• O segundo envio com a mesma chave não produz segundo efeito.
• Nenhum segredo ou dado pessoal aparece em saída, log ou fixture.
• A falha é detectada por sinal antes da reclamação do usuário.
• Existe estado explícito para pendência e procedimento de reconciliação.
• O resultado inclui teste, captura de telemetria, ADR e atualização do runbook.

Evidência, limpeza e solução comentada

Guarde: comandos, versões, saída dos testes, screenshot do fluxo, consulta de estado e gráfico do sinal. Remova ambiente e dados sintéticos; revogue qualquer credencial de laboratório. A solução adequada não é uma ferramenta específica: é a menor composição que satisfaz o contrato e demonstra recuperação.

Exercícios de transferência

1. Troque ERP por gateway de pagamento. Quais garantias ficam mais rígidas?
2. Troque OS por leitura de sensor offline. Onde ordenar e deduplicar?
3. Reduza o RTO pela metade. Qual custo e complexidade aparecem?
4. Explique em voz alta por que o frontend é uma projeção local do estado do sistema; ele orienta a pessoa, mas o servidor decide o que é válido é útil e onde a analogia quebra.

Fontes

Consulte as fontes oficiais do capítulo conceitual e registre versão/data no relatório do laboratório. Para observabilidade, use OpenTelemetry; para segurança, use o manual canônico.