Yew en otro vistazo

Yew es un marco de trabajo (framework) para crear aplicaciones web fiables y eficientes. Usa Rust como lenguaje base.

Ya hemos hablado sobre esta herramienta en una entrega anterior. Como mencionamos usa WebAssembly, lo que permite la implementación en la web para aplicaciones de cliente y servidor. Este framework ha sufrido algunos cambios y veremos cómo crear una sencilla aplicación como la vista en la anterior entrega.

Yew framework

Manos a la obra. Comencemos con un ejemplo sencillo. Pero antes los requerimientos:

Tener Rust.
Tener Cargo.

Abrimos una terminal y tecleamos:

$ rustup update

Esto actualizará la versión de Rust instalada en nuestra máquina. La instalación puede tardar varios minutos.

Instalando WebAssembly y Trunk

Además de tener la última versión de Rust (y Cargo) deberemos instalar WebAssembly y Trunk; ambos son paquetes necesarios para empezar con Yew.

Ejecutemos estos comandos para la instalación:

$ rustup target add wasm32-unknown-unknown
$ cargo install --locked trunk

Esto instalará los paquetes necesarios.

Creando un proyecto Yew

Se tratará de una simple aplicación web en la que se mostrará un botón que incremenará un número entero.

1. Crearemos un directorio del proyecto y nos ubicaremos en el:

$ cargo new yew-app
$ cd yew-app

2. Actualizamos el archivo ``Cargo.toml``:

[package]
name = "yew-app"
version = "0.1.0"
edition = "2024"

[dependencies]
yew = { version = "0.23", features = ["csr"] }

En el apartado de dependencias indicamos la versión de Yew a usar, en este caso la versión 0.23.

3. Actualizamos el archivo ``main.rs``

use yew::prelude::*;

#[component]
fn App() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            <button {onclick}>{ "+1" }</button>
            <p>{ *counter }</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

De manera similar a lo que se hace con React u otras herramientas, agregamos la funcionalidad mezclando código Rust (en lugar de Javascript) con HTML.

4. Creamos la página HTML ``index.html``

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
    <body></body>
</html>

Esto solo servirá como para mostrar el contenido HTML.

5. Creamos el archivo ``Trunk.toml``

[serve]
# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8083

Este archivo nos sirve para indicar la dirección y puerto donde se mostrará nuestra aplicación web.

6. Ejecutamos la aplicación:

$ trunk serve --open

Abrirá el navegador en la ruta: http://127.0.0.1:8083/

Con esto ya hemos creado una aplicación web con Rust y Yew.

Enlaces:

https://yew.rs/

Alquimista de código

Buscar este blog