Programas de desktop com Rust e tecnologias web

Recentemente, estive experimentando bastante duas bibliotecas impressionantes que traz as capacidades do Electron e do React para o Rust, e gostaria de compartilhar com o pessoal daqui sobre minha experiência (é meu primeiro post!) e como vocês podem testar essas duas bibliotecas incríveis! 🤗

Experiência Desktop Com Segurança e Confiabilidade

Como uma grande parte da comunidade sabe, Rust é conhecida por ser uma linguagem segura quando se trata de memória. Isso acontece porque todo objeto dentro de um escopo tende se manter dentro do escopo, esses objetos não devem se manter na memória caso a função a qual eles pertecem encerre seu ciclo. Além disso, o Rust é confiável por manter uma tipagem estática, pois os objetos não devem mudar de tipo em meio a execução do código para que o primeiro ponto, a segurança, seja mantida. Afinal, mudar o tipo significa alocar memória durante o tempo de execução, e o Rust não faz isso: O Rust mantém a segurança e a confiabilidade por alocar a memória que vai ser usada ainda durante o tempo de compilação.
De qualquer forma, essa é uma breve explicação das características da linguagem e não expõe todos os detalhes dela, caso esteja interessado, você pode conferir no site oficial outros detalhes da linguagem e até mesmo experimentá-la. :)
Uma outra característica da linguagem é que ela possui suporte a plataforma web, pois há a opção de compilar para WebAssembly. Isso traz a tona o assunto principal dessa publicação, o qual gostaria de apresentar em duas partes.

Yew.rs (O React da Linguagem Rust)

O projeto Yew é um dos projetos mais fascinantes que encontrei recentemente nas aventuras da linguagem Rust. O Yew é uma crate que permite você criar um site no estilo React, já que ele é baseado em components. Além disso, com a tecnologia das macros do Rust, você pode interagir diretamente com o html da página, assim como JSX.
Aqui está um pequeno exemplo tirado diretamente da página do Yew:

use yew::prelude::*;

// Isso é uma derive_macro, para os não rustaceanos,
// funciona como os decorators do python em alguns
// casos. Essa macro faz com que a nossa função
// app seja considerada um componente, logo ela
// deve retornar um html.
#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Olá, Tabnews!" }</h1> // Apenas para fazer mais interativo 😌
    }
}

fn main() {
    yew::start_app::<App>(); // Aqui você pede para o programa começar
    // a servir a sua página. No caso, pedimos para servir a nossa função
    // app que retorna um html.
}

não parece simples? E é pessoal, é realmente simples! Você ainda, lógico, precisa fazer uma configuração inicial, o qual você pode conferir no tutorial oficial do site. Vamos criar um componente que oferece uma pequena lista com programadores que já conhecemos bem no youtube.

#[derive(PartialEq, Properties)]
pub struct Props; // 1°: Criamos as propriedades do nosso componente,
// logo logo entro em melhores detalhes! 😉

pub struct ProList; // 2°: Criamos a estrutura do nosso componente
// Nessa estrutura, não precisamos inserir nada, quem vai cuidar
// dos dados da nossa estrutura é os Props. Maaaas nada te impede
// de inserir algum dado para ser usado depois, fica a seu critério.

impl Component for ProList { // É aqui que a diversão começa!
    type Message = (); // O tipo message é o meio que mais tarde você
    // vai se comunicar com o componente pelo método update. Não vou 
    // entrar tanto em detalhes porque o foco é apresentar ( e eu não 
    // conheço tão bem essa propriedade para apresentá-la), mas como
    // já dito antes, você pode encontrar muita coisa no site oficial.
    type Properties = Props; // Nossas Props!

    fn create(ctx: &Context<Self>) -> Self {
        ProList // Aqui você constrói o componente, se tiver dados
        // na estrutura você coloca aqui também. Essa função é a
        // que vai inicializar o nosso componente antes de colocá-lo
        // na nossa página.
    }

    // E essa vai mostrar o que desejamos!
    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <ul>
                <li>CDFTV<li>
                <li>Felipe Deschamps<li>
                <li>Rocketseat<li>
                <li>Curso em Vídeo<li>
            </ul>
        }
    }
}

Assim, se quisermos que esse componente apareça na nossa página principal, é simples. Basta adicionarmos esse componente no html do nosso componente principal.

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Olá, Tabnews!" }</h1>
        <ProList/>
    }
}

Mas... acho que faltou alguém na nossa lista, não é? Vamos adicionar por meio dos properties!

#[derive(PartialEq, Properties)]
pub struct Props; 

pub struct ProList {
    proespecial: AttrValue // Aqui definimos nossa propriedade como um
    // valor de atributo, isso facilita a biblioteca lidar com os valores
    // que ela vai passar para a página. 
} 

impl Component for ProList {
    type Message = ();
    type Properties = Props; 

    fn create(ctx: &Context<Self>) -> Self {
        ProList
    }

    // E essa vai mostrar o que desejamos!
    fn view(&self, ctx: &Context<Self>) -> Html {// Vamos usar o `ctx`
        let props = &ctx.props().to_owned(); // coletamos nossas props
        html! {
            <ul>
                <li>CDFTV</li>
                <li>Felipe Deschamps</li>
                <li>Rocketseat</li>
                <li>Curso em Vídeo</li>
                <li>{props.proespecial.clone()}</li> // colocamos nossa prop entre parênteses (código Rust)
            </ul>
        }
    }
}

Agora, precisamos apenas de uma coisa:

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Olá, Tabnews!" }</h1>
        <ProList proespecial="Michel Teló"/> // Agora sim! 👌
    }
}

O mais legal é que esse mini código que fizemos aqui pode ser colocado pra rodar direto no nosso projeto com a nossa próxima crate!

Tauri (O Electron em Rust)

Por mais interessante que seja usar Rust no backend e no front, aqui não é necessário, você é livre para usar qualquer uma das suas tecnologias web feitas em javascript ou sua linguagem preferida. Afinal, Tauri é um backend como o Electron, você só precisa criar o contato entre o seu front e seu back. No site oficial do Tauri, você pode baixar uma ferramenta parecido com o create-react-app e lançar seu programa de desktop em minutos! 🚀
Nessa ferramenta, existe opções para criar templates para diversos frameworks famosos, inclusive o Yew.
Tudo é bem documentado e configurável, e como dito no início do artigo, você tem um ganho de performance gigantesco. Em algumas comparações levantadas por diversas pessoas, o Tauri saiu na frente em relação ao Electron em performance!
Ainda assim, gostaria de deixar um aviso que os desenvolvedores do Yew deixaram, e que também vale um pouco para o Tauri:

Yew ainda não é 1.0. Esteja preparado para fazer grande refatoração do seu código por conta das mudanças conflitantes da API.

Como dito, não são frameworks prontos para a produção. Mas, já são bem competentes para o pouco que já fazem. Futuramente, o Tauri também terá suporte para mobile, e como vemos com o Javascript e o React Native, vamos ver também com o Rust.

Considerações finais

Eu não sabia muito bem o que fazer nesse post, mas juro que queria muito compartilhar a experiência maravilhosa que estou tendo com Rust na web. Sei que muitas pessoas ainda tem um carinho especial pelo javascript, mas... damos chances para todos um dia, para conhecer a todos e conhecer tudo que é saudável para a nossa vida e nosso trabalho... será que não é saudável experimentar essas tecnologias? Tenho certeza que todos vocês que experimentarem vão ter um gostinho doce dessa linguagem!

Um abraço a todos! ☺️