Rocket + jQuery 4: Hola Mundo en 5 minutos

Un stack simple y efectivo para aplicaciones web con Rust: Rocket + jQuery 4.

La repentina aparición de jQuery 4 me ha hecho pensar que este framework se usa más con frameworks en lenguajes que no son nativos del navegador como PHP o Python, bueno, ¿y si en este punto del futuro pudieramos usarlo con el mejor lenguaje no nativo de la web y lograr la mejor experiencia web posible?. 🤔

Tenemos el viernes libre, intentémoslo. 🤓🚀

Requisitos previos

Rust instalado:

bash

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

1. Crear el proyecto

bash

cargo new hola-rocketcd hola-rocket

2. Configurar dependencias

Edita Cargo.toml:

toml

[package]name = "hola-rocket"version = "0.1.0"edition = "2021"[dependencies]rocket = { version = "0.5", features = ["json"] }rocket_dyn_templates = { version = "0.1", features = ["tera"] }serde = { version = "1", features = ["derive"] }

3. Crear la estructura

bash

mkdir -p templates static/js

4. El servidor

Crea src/main.rs:

rust

#[macro_use] extern crate rocket;use rocket::fs::FileServer;use rocket::serde::{Serialize, json::Json};use rocket_dyn_templates::{Template, context};#[derive(Serialize)]#[serde(crate = "rocket::serde")]struct Mensaje {    texto: String,}#[get("/")]fn index() -> Template {    Template::render("index", context! {        titulo: "Hola Mundo"    })}#[get("/api/saludo/<nombre>")]fn saludo(nombre: &str) -> Json<Mensaje> {    Json(Mensaje {        texto: format!("¡Hola, {}!", nombre)    })}#[launch]fn rocket() -> _ {    rocket::build()        .mount("/", routes![index, saludo])        .mount("/static", FileServer::from("static/"))        .attach(Template::fairing())}

5. El template

Crea templates/index.html.tera:

html

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <title>{{ titulo }}</title>    <style>        body { font-family: system-ui; max-width: 600px; margin: 50px auto; }        input, button { padding: 10px; font-size: 16px; }        #resultado { margin-top: 20px; font-size: 24px; color: #333; }    </style></head><body>    <h1>{{ titulo }}</h1>    <input type="text" id="nombre" placeholder="Tu nombre">    <button id="saludar">Saludar</button>    <div id="resultado"></div>    <script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>    <script src="/static/js/app.js"></script></body></html>

6. El JavaScript

Crea static/js/app.js:

javascript

$("#saludar").on("click", function() {    const nombre = $("#nombre").val() || "mundo";    $.get(`/api/saludo/${nombre}`, function(data) {        $("#resultado").text(data.texto);    });});$("#nombre").on("keypress", function(e) {    if (e.which === 13) $("#saludar").click();});

7. Ejecutar

bash

cargo run

Abre http://127.0.0.1:8000 en tu navegador.

Resumen

| rocket | Servidor web y API | 🚀

| rocket_dyn_templates | Renderizado server-side con Tera | 🍸

| FileServer | Sirve archivos estáticos | 🍞

| Json<T> | Respuestas JSON para la API | 🤖

| jQuery 4 | Interactividad y AJAX | ⭐️

Siguiente paso

Agrega persistencia con rocket_db_pools y SQLite.

Abrazo. bliss

Rocket + jQuery 4: Hola Mundo en 5 minutos

Héctorbliss

Requisitos previos

1. Crear el proyecto

2. Configurar dependencias

3. Crear la estructura

4. El servidor

5. El template

6. El JavaScript

7. Ejecutar

Resumen

Siguiente paso

Zustand llegó para destronar a Redux

Checa este otro Post

React Hook Form es más fácil que Formik

Checa este otro Post

Animaciones web con React + Motion 🧙🏻