Capitulo 1: Introduccion - Rust Fullstack con WASM

Por que Rust para una aplicacion fullstack

Rust es un lenguaje de sistemas que garantiza seguridad de memoria sin garbage collector. Pero su potencial va mas alla de sistemas operativos o herramientas CLI: Rust puede compilar a WebAssembly (WASM), lo que permite ejecutar codigo Rust directamente en el navegador.

Esto abre una posibilidad unica: un solo lenguaje para backend y frontend. Los beneficios concretos son:

• Type safety de punta a punta: los mismos tipos Card, Lane se comparten entre servidor y cliente
• Rendimiento: backend nativo + frontend compilado a WASM, sin overhead de JavaScript
• Un solo ecosistema: Cargo, crates.io, rustfmt, clippy para todo el proyecto
• Sin JavaScript: el frontend se escribe 100% en Rust con macros RSX (similar a JSX)

Que es WebAssembly (WASM)

WebAssembly es un formato de instrucciones binario que los navegadores ejecutan de forma nativa. No reemplaza JavaScript, lo complementa. Cuando compilamos Rust a WASM:

1. rustc compila el codigo a instrucciones .wasm
2. Un bundler (Trunk) genera el HTML y JS necesario para cargar el .wasm
3. El navegador descarga y ejecuta el binario WASM a velocidad casi nativa

El target de compilacion es wasm32-unknown-unknown, que Rust soporta oficialmente.

Que vamos a construir

Un Kanban Board funcional con tres columnas: Todo, Doing y Done. Las tarjetas se pueden crear, mover entre columnas con drag & drop, y eliminar.

Features del proyecto

• Crear tarjetas con titulo y descripcion
• Visualizar tarjetas organizadas en 3 columnas (Todo, Doing, Done)
• Mover tarjetas entre columnas con drag & drop nativo del navegador
• Eliminar tarjetas
• Persistencia en base de datos SQLite
• API REST con 4 endpoints

Flujo de la aplicacion

Usuario interactua con el navegador (Leptos/WASM)
        |
        v
HTTP Request (gloo-net → Fetch API)
        |
        v
API REST (Axum en localhost:22000)
        |
        v
Use Case (logica de aplicacion)
        |
        v
Repository trait (puerto) → SQLite adapter (implementacion)
        |
        v
SQLite (archivo kanban.db)

Endpoints de la API

Metodo	Ruta	Accion
GET	/api/cards	Listar todas las tarjetas
POST	/api/cards	Crear una tarjeta
PATCH	/api/cards/{id}/move	Mover tarjeta de columna
DELETE	/api/cards/{id}	Eliminar tarjeta

Stack elegido

Capa	Tecnologia	Rol
Backend	Axum 0.8	Framework HTTP async sobre Tokio
Frontend	Leptos 0.7	Framework reactivo que compila a WASM
Base de datos	SQLite	BD embebida, archivo unico
ORM	SQLx 0.8	Queries async con verificacion en compilacion
HTTP Client	gloo-net 0.6	Cliente HTTP para WASM basado en Fetch API
Bundler	Trunk	Compila Rust a WASM y sirve el frontend

Estructura del monorepo

El proyecto usa un Cargo Workspace que organiza todo en un unico repositorio:

rust-poc/
├── Cargo.toml              # Workspace root
├── Cargo.lock
├── .env                    # Variables de entorno
├── apps/
│   ├── app-backend/        # Servidor Axum (API REST)
│   │   ├── Cargo.toml
│   │   └── src/
│   │       ├── main.rs
│   │       ├── domain/     # Entidades, ports, value objects
│   │       ├── application/# Use cases
│   │       └── infrastructure/ # HTTP handlers, SQLite repo
│   ├── app-frontend/       # Cliente Leptos (WASM)
│   │   ├── Cargo.toml
│   │   └── src/
│   │       ├── main.rs
│   │       ├── domain/     # Entidades, ports
│   │       ├── infrastructure/ # HTTP gateway
│   │       └── ui/         # Componentes, paginas
│   └── app-bbdd/           # Migraciones SQL
│       └── migrations/
│           └── 001_create_cards.sql
└── target/                 # Artefactos de compilacion

Diagrama de arquitectura

flowchart TB
    subgraph Navegador
        L["Leptos (WASM)"]
        L --- B["Board"]
        L --- Lx3["Lane x3"]
        L --- CI["CardItem"]
        L --- CCF["CreateCardForm"]
    end

    Navegador -->|"HTTP/JSON (gloo-net)"| Servidor

    subgraph Servidor
        AX["Axum HTTP - card_handler.rs"]
        UC["Use Cases: create, list, move, delete"]
        DOM["Domain: Card, Lane, CardId, CardRepository trait"]
        SQL["SQLiteCardRepo"]
        AX --> UC --> DOM --> SQL
    end

    Servidor --> DB["SQLite - kanban.db"]

Metricas del proyecto

Este proyecto es intencionalmente compacto: 856 lineas de codigo total. Demuestra que con Rust puedes construir una aplicacion fullstack funcional sin miles de lineas de boilerplate.

Que necesitas saber antes

• Rust basico: ownership, borrowing, structs, enums, traits, Result
• HTTP: que es una API REST, metodos HTTP, JSON
• HTML basico: para entender la estructura de los componentes

No necesitas experiencia previa con Axum, Leptos, WASM ni SQLx. Este tutorial explica cada framework desde cero.

Que sigue

En el proximo capitulo analizaremos cada framework del stack: por que Axum y no Actix, por que Leptos y no Yew, y las demas decisiones tecnicas.

---

Siguiente: Analisis de Frameworks →