Frontend Frameworks (Leptos / Yew)

Construa UIs web inteiramente em Rust com Leptos ou Yew sobre WASM.

Receita

use leptos::*;
 
#[component]
fn App() -> impl IntoView {
    let (count, set_count) = create_signal(0);
    view! {
        <button on:click=move |_| set_count.update(|n| *n + 1)>
            "Clicado " {count} " vezes"
        </button>
    }
}

Quando usar isso: Equipes que desejam Rust de ponta a ponta para aplicativos web com UI baseada em componentes e reatividade granular.

Exemplo Funcional (Leptos)

use leptos::*;
 
#[component]
fn Greeting(name: String) -> impl IntoView {
    view! { <p>"Olá, " {name} "!"</p> }
}
 
#[component]
fn App() -> impl IntoView {
    let (name, set_name) = create_signal(String::from("Rust"));
    view! {
        <input
            prop:value=move || name.get()
            on:input=move |ev| set_name.set(event_target_value(&ev))
        />
        <Greeting name=name.get()/>
    }
}
 
pub fn main() {
    mount_to_body(|| view! { <App/> })
}

O que isso demonstra:

• Componentes são funções Rust com #[component]
• Sinais impulsionam atualizações reativas
• Macro view! compila para operações DOM
• Leptos pode hidratar páginas SSR ou rodar apenas no cliente

Mergulho Profundo

Leptos vs Yew

Yew Snapshot

use yew::prelude::*;
 
#[function_component]
fn Counter() -> Html {
    let counter = use_state(|| 0);
    html! {
        <button onclick={Callback::from(move |_| counter.set(*counter + 1))}>
            { *counter }
        </button>
    }
}

Estrutura do Projeto

meu-app/
  Cargo.toml       # dependências leptos ou yew
  src/lib.rs       # componentes
  index.html       # ponto de montagem
  Trunk.toml       # Configuração do bundler Trunk (comum)

Armadilhas

• Tamanho do bundle - Framework + WASM somam. Correção: Builds de release, wasm-opt, rotas lazy.
• Lacunas no ecossistema - Nem todo widget JS tem um binding Rust. Correção: Ponte via wasm-bindgen para bibliotecas específicas.
• SEO sem SSR - WASM apenas no cliente prejudica o SEO. Correção: SSR do Leptos ou renderização híbrida.
• Integração do roteador - Roteamento no cliente precisa de configuração da API de histórico. Correção: Use leptos_router ou yew-router.
• Mudanças na ferramenta de build - Trunk, wasm-pack e cargo-leptos diferem. Correção: Siga o livro do framework para um caminho abençoado.

Alternativas

FAQs

Relacionado

• wasm-bindgen - ponte subjacente
• DOM & Web APIs (web-sys) - APIs brutas do navegador
• wasm-pack & Bundling - pipeline de build
• Performance & Tamanho - otimização de bundle

Versões da Stack: Esta página foi escrita para Rust 1.97.0 (edição 2024), Tokio 1.x, Axum 0.8, serde 1.0, sqlx 0.8, clap 4, e Polars 0.46+.