Pular para o conteúdo

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.zolo

Ao 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 View para páginas e fragmentos HTML.
  • Retorne um map para APIs JSON e uma string para texto simples.
  • Use std::http quando handlers recebem o request explicitamente.
  • Use std::web quando 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.

Índice global

Encontre seu caminho pela Zolo

Experimente uma ideia

Comece por aqui

9 resultados

9 resultados

enpt-br