Guia 35 de 53
Desenvolvimento Web com Zolo
Crie aplicações completas com std::http, std::web e Verniz, de uma View renderizada a um binário de produção.
Nesta página
A stack web do Zolo é construída com recursos normais da linguagem, sem uma linguagem de template paralela. Verniz é a camada de renderização e interatividade: componentes são funções, markup vira chamadas Zolo comuns e o servidor entrega HTML correto antes do JavaScript iniciar.
A stack¶
| Camada | Para que serve | Suporte atual |
|---|---|---|
std::html / Verniz |
View, markup, escape, ilhas, actions e CSS escopado |
VM, LLVM e Cranelift |
std::http |
Rotas, requests, responses, middleware e servidor HTTP nativo | VM, LLVM e Cranelift |
std::web |
Efeitos Request e Cookies com envelopes seguros | Apenas VM por enquanto |
zolo dev |
Swaps do servidor, revalidação do navegador e overlay de erros | VM de desenvolvimento |
zolo build |
Binários de produção standalone | LLVM ou Cranelift |
O limite VM-only vale para a camada de efeitos/cookies de std::web, não para Views, ilhas, actions ou CSS escopado do Verniz.
Uma primeira página completa¶
use std::http
use std::html::{document, head, meta, title, body, main, h1, p, View}
fn page(_req) -> View {
<document lang="pt-BR">
<head>
<meta charset="utf-8"/>
<title>Olá do Zolo</title>
</head>
<body>
<main>
<h1>Olá do Verniz</h1>
<p>Este HTML foi renderizado pelo Zolo.</p>
</main>
</body>
</document>
}
let app = http.router() |> http.get("/", page)
http.serve(3000, app)Rode com desenvolvimento web ao vivo:
zolo dev src/main.zoloAo alcançar http.serve, zolo dev entra no modo web automaticamente. Abra a URL impressa pela CLI. Use zolo run para uma execução única na VM ou zolo build para o binário de produção.
Formulários progressivos tipados¶
Associe o formulário a uma função @action. Os nomes dos parâmetros identificam
os controles, e os tipos determinam a conversão no servidor:
use std::html::{View, label, input, button, render}
@action
fn save(age: int, newsletter: bool) -> Result<str, str> {
if age < 18 {
return Result::Err("You must be at least 18")
}
return Result::Ok("Age: {age}; newsletter: {newsletter}")
}
fn preferences() -> View {
<form action={save} return_to="/saved" id="preferences">
<label for="age">Age</label>
<input id="age" name="age" type="number" required />
<label for="newsletter">Receive the newsletter</label>
<input id="newsletter" name="newsletter" type="checkbox" />
<button type="submit">Save</button>
</form>
}
print(render(preferences()))O compilador gera o endpoint POST e um campo oculto com o destino de retorno.
id, class, data-*, aria-* e os demais atributos HTML continuam disponíveis.
Um action com URL, como action="/subscribe", mantém o comportamento HTML
normal. Um formulário associado à ação aceita method="post" explícito;
outros métodos são rejeitados.
| Parâmetro | Conversão do formulário |
|---|---|
str |
O campo precisa estar presente; texto vazio é válido. |
int |
Inteiro decimal obrigatório dentro do intervalo exato de 64 bits com sinal. |
float |
Número finito obrigatório. |
bool |
Checkbox ausente vira false; on, true, 1 viram true, e off, false, 0 viram false. |
Campos obrigatórios ausentes, números ou booleanos inválidos e campos escalares repetidos geram HTTP 422 com erros estruturados por campo antes de executar a ação. O servidor aplica esse contrato mesmo se a validação do navegador for ignorada. O contrato não suporta parâmetros opcionais, arrays, objetos, variádicos ou sem tipo; use uma assinatura com os escalares suportados ou um endpoint separado. Valores padrão dos parâmetros não substituem campos ausentes.
As regras de negócio ficam na ação: enviar age=17 chama save e devolve seu
Result::Err, também com HTTP 422. No sucesso, o servidor redireciona com HTTP
303 para o caminho local absoluto return_to, cujo padrão é /. O formulário
funciona sem ilha nem JavaScript. Este primeiro contrato não gera mensagens
inline, estado de envio, uploads ou campos automaticamente. A grafia anterior
web.action_form(save, return_to: "/saved") { ... } continua disponível e usa
a mesma conversão pela assinatura.
O tour de HTTP inclui o exemplo
determinístico de renderização e o servidor completo com uma página de sucesso.
Execute zolo run examples/features/36-web/34-typed-action-form-server.zolo --no-cache
e abra http://localhost:3099 para enviar o formulário.
Escolhendo a porta de entrada¶
- Retorne uma
Viewpara páginas e fragmentos HTML. - Retorne um map para APIs JSON e uma string para texto simples.
- Use
std::httpquando handlers recebem o request explicitamente. - Use
std::webquando código aninhado precisa acessar request ou cookies via efeitos. - Marque apenas regiões interativas com
@island; o restante continua HTML renderizado no servidor. - Marque funções remotas com
@action; funções públicas nunca são expostas implicitamente.
Teste no navegador¶
O Verniz Lab roda o compilador e a VM do Zolo por WebAssembly e renderiza o documento em um preview isolado. Views, markup, CSS escopado e signals de ilhas funcionam sem instalar nada.
O Lab não simula um servidor TCP. Rotas, @action, cookies, bancos e o canal de reload do zolo dev exigem a CLI local.
O que existe hoje¶
Verniz já inclui Views server-rendered, markup parecido com HTML, interpolação com escape, corpos raw de style e script, CSS escopado, @island, signals graváveis e derivados, effects, eventos DOM, atributos reativos, bind:prop, @action, revalidação de rota e swaps de desenvolvimento que preservam estado.
Schemas Wire, codecs gerados, módulos virtuais tipados, contratos de mount/action, formulários progressivos tipados e verificação de vazamento de secrets já estão implementados. Reconciliação de listas reativas e formulários com refinement types continuam como trabalho de linguagem separado. Veja a matriz completa no Guia de produção do Verniz Sites.
Próximo: Views e Markup do Verniz.
DOCS / OPINIÃO
Esta página deixou alguma pergunta?
Conte onde a explicação perdeu você. A documentação também faz parte da experiência da linguagem.