![Cover image for [PT/BR] Criando aplicações web com WebAssembly, Rust e Yew.](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrx98j6mrneqbwnbc67e.jpeg)
O que é Yew?
Yew é uma framework Rust moderno para criar aplicativos web front-end multi-thread com WebAssembly.
Tem como uma de suas características, declarar HTML interativo com expressões Rust. Desenvolvedores que já possuem experiência com JSX no React não dever ter muita dificuldade em entender a sintaxe do Yew.
Yew tem um alto desempenho minimizando chamadas da DOM API em cada renderização de página, facilitando o carregamento e processamento para web workers em segundo plano.
Oferece suporte à interoperabilidade JavaScript, permitindo que os desenvolvedores aproveitem pacotes NPM e integrem aos aplicativos JavaScript existentes.
Pré-requisitos
Para começar, vamos nos certificar que temos um ambiente de desenvolvimento atualizado. Precisaremos das seguintes ferramentas.
- Rust
- trunk
- wasm32-unknown-unknown
wasm32-unknown-unknown é o compilador WASM e o target para o compilador do Rust.
Este tutorial pressupõe que você já tem uma familiaridade com Rust, caso contrário, leia A linguagem de programação Rust em PT-BR traduzido pela comunidade brasileira de Rust.
Vamos garantir que você tenha a última versão do Rust instalada rodando o comando rustup update ou instalando o Rust. Se tudo estiver ok, podemos começar.
Após instalar o Rust, você pode usar o Cargo para instalar o trunk com o comando abaixo:
cargo install trunk
Também iremos adicionar o WASM Target rodando o comando abaixo:
rustup target add wasm32-unknown-unknown
Configurando o projeto
Primeiro, iremos criar o projeto Cargo.
cargo new yew-app
cd yew-app
Para verificar se o ambiente Rust está configurado corretamente, execute o projeto inicial usando o comando cargo run que deve compilar e retornar a mensagem "Hello, world!"
Criando sua primeira página estática
Para converter esse aplicativo de linha de comando simples em um aplicativo básico da Web Yew, algumas alterações são necessárias em seu arquivo Cargo.toml.
[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"
[dependencies]
+ yew = "0.19"
Após informar a dependecia e versão do Yew, vamos para o arquivo main.rs
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
html! {
<h1>{ "Hello World" }</h1>
}
}
fn main() {
yew::start_app::<App>();
}
Precisamos criar o arquivo index.html na raíz do projeto
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body></body>
</html>
Iniciando o servidor de desenvolvimento
Execute o comando a seguir para compilar e rodar o aplicativo localmente.
trunk serve --open
Trunk abrirá seu aplicativo em seu navegador padrão, ele constantemente irá observar o seu projeto e fazer novamente o build automático caso arquivos sejam modificados. Caso queira saber mais sobre o trunk execute o comando trunk help e trunk help <subcommand>
Yay
Configuramos com sucesso nosso ambiente de desenvolvimento Yew e construimos nossa primeira página estática. Abaixo irei descrever um pouco sobre componentes.
Escrevendo HTML
Yew faz uso das macros procedurais do Rust e nos fornece uma sintaxe semelhante ao JSX (uma extensão do JavaScript que permite escrever código semelhante ao HTML dentro do JavaScript) para criar a marcação.
Tudo que está dentro da macro html! {} é convertido em HTML simples, abaixo uma lista sobre a sintaxe que após algumas linhas de código ficam bem simples.
- As expressões devem ser colocadas entre chaves ({ })
- Deve haver apenas um nó raiz. Se você quiser ter vários elementos sem envolvê-los em um contêiner, uma tag/fragmento vazio (<> ... </>) é usado
- Os elementos devem ser fechados corretamente.
fn header() -> Html {
html! { <header> {"Nosso Header"} </header> }
}
Componentes
Componentes são blocos de construção de aplicativos Yew. Combinando componentes, que podem ser criados de outros componentes, construímos nossa aplicação. Ao estruturar nossos componentes para reutilização e mantê-los genéricos, poderemos usá-los em várias partes de nossa aplicação sem ter que duplicar código ou lógica.
Na verdade, a funçãp app que usamos até agora é um componente, chamado App. É um "componente de função". Existem dois tipos diferentes de componentes no Yew.
- Componentes de estrutura
- Componentes de função
Podemos criar o component Title e chamá-lo na redenrização principal.
#[function_component(App)]
fn app() -> Html {
html! {
<>
+ <Title />
<h1>{ "Hello World" }</h1>
</>
}
}
+ #[function_component(Title)]
+ pub fn title() -> Html {
+ html! {
+ <h1>{"Yew Exemple"}</h1>
+ }
+ }
Primeiros passos com WASM, Rust e Yew.
Obrigado por ter chegado até aqui, nesta aplicação simples podemos ter uma ideia do que podemos construir com essas ferramentas, se você está buscando um pouco mais de estudo, sugiro que leia a Documentação do Yew clicando aqui
Estilização
O Yew ainda não oferece uma maneira integrada de estilizar componentes. Existem recursos da comunidade que podem resolver este problema, abaixo uma lista de ferramentas.
Biblioteca de Componentes
- yew_styles - Estrutura de estilo para Yew sem dependências de JavaScript.
- yew-mdc - Material Design Components.
- muicss-yew - MUI CSS Components.
- Yewtify – Implementa recursos fornecidos pela estrutura Vuetify no Yew.
CSS-in-Rust
- stylist - Uma solução de estilo CSS-in-Rust para aplicativos WebAssembly.
Meus Links
Se você quiser discutir um pouco mais sobre Rust e Yew pode se conectar comigo através dos links abaixo.
O código deste exemplo está disponível no Github no repositório abaixo.
Top comments (0)