[PT/BR] Criando aplicações web com WebAssembly, Rust e Yew.

Antonio Anderson — Thu, 13 Oct 2022 13:13:26 +0000

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.

Twitter

Github

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

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

What you can do using project planning on GitHub

Antonio Anderson — Wed, 05 Oct 2022 14:24:03 +0000

All in one place 🤯

This is my brief summary about my experience using Github Project constantly for the first time.

Projects on Github is an adaptable, flexible tool for planning and tracking work on GitHub, giving to your team the advantage of having a global view of your entire project.

A project is and adaptable spreadsheet that integrates with your issues and pull requests on Github to help you plan and track your work effectively. You can create and customize multiple views by filtering, sorting, grouping your issues and PR's, adding custom fields to track meta-dada specific to your team, and visualize work with configurable charts. Rather than enforcing a specific methodology, a project provides flexible features you can customize to your team's needs and processes.

What I can do using GitHub Issues/Projects 🤔

I had experience with several project management tools and starting to use Github Projects gave me a productivity gain both personally and with my team.

Below I list some important things that Github Projects can bring to your team.

Break down large issues into smaller issues
Communicate
Make use of the description and README
Use views
Have a single source of truth
Use automation
Use different field types

You can learn more about the best practices for any projects here

How to create a project on Github 📑

To start a project at Github first you need a repository, or if you are working for a organization you can easily find a tab named Projects.

Now you can create a project clicking at New Project button. When prompted to select a template, click a template or to start with an empty project, click Table or Board. Then, click Create.

For users projects 👨‍💻

User projects can track issues and pull requests from the repositories owned by your personal account, is a way to start managing your own projects!

To start a project in your profile, you just need to click on Projects tab and create one, the same way for a specific repo or organization.

Custom descriptions and README 📝

You can set your project's description and README to share the purpose of you project provide instructions on how to use the project, and include any relevant links.

1 - Start navigate to your project

2 - In the top-right, click ... to open the menu and click Settings to access the project settings.

Now you can add a short description to your project, under "Add a description", type your description in the text box and click Save.

Under "README", type your content in the next box.

Learning more 📚

Thanks for reading! If you’re interested in learning more check out these links:

GitHub Issues Docs: https://docs.github.com/en/issues (check out the quickstart guide!)

My Links 🔗

Twitter
Github

Feel free to give me a feeadback, in one of these languages: PTBR/EN.

👋🏻

DEV Community: Antonio Anderson