[PT/BR] Criando aplicações web com WebAssembly, Rust e Yew.
Tags: rust, webassembly, yew
Published: 2022-10-13 13:13:26


## 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](https://rust-br.github.io/rust-book-pt-br/) 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:

```shell=
cargo install trunk
```

Também iremos adicionar o WASM Target rodando o comando abaixo:

```shell=
rustup target add wasm32-unknown-unknown
```

## Configurando o projeto

Primeiro, iremos criar o projeto Cargo.

```shell=
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`.

```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`

```rust
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

```html
<!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.

```bash
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.

```rust
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.

```rust
#[function_component(App)]
fn app() -> Html {
    html! {
        <>
+           <Title />
            <h1>{ "Hello World" }</h1>
        </>

    }
}

+ #[function_component(Title)]
+ pub fn title() -> Html {
+    html! {
+        <h1>{"Yew Exemple"}</h1>
+    }
+ }
```

![](https://i.imgur.com/YHbMueO.png)


## 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](https://yew.rs/)

## 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](https://github.com/spielrs/yew_styles) - Estrutura de estilo para Yew sem dependências de JavaScript.
-   [yew-mdc](https://github.com/Follpvosten/yew-mdc) - Material Design Components.
-   [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI CSS Components.
-   [Yewtify](https://github.com/yewstack/yewtify) – Implementa recursos fornecidos pela estrutura Vuetify no Yew.

#### CSS-in-Rust

-   [stylist](https://github.com/futursolo/stylist-rs) - 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.

[Twitter](https://twitter.com/hirowf)

[Github](https://github.com/santosant)

O código deste exemplo está disponível no Github no repositório abaixo.

https://github.com/santosant/yew-exemple