Cách tạo Web Apps trong Rust thuần túy

TinyWeb cho phép xây dựng các ứng dụng phía khách hàng trong Rust thuần túy, tương tự như các ứng dụng phía backend, tận dụng hệ thống kiểu dữ liệu chặt chẽ của ngôn ngữ và công cụ tích hợp mạnh mẽ.

TinyWeb có kích thước rất nhỏ với dưới 800 dòng mã, không cần bước xây dựng và không có phụ thuộc bên ngoài. Tuy nhiên, nó hỗ trợ các ứng dụng web đầy đủ tính năng!

Lựa chọn 1: Sử dụng dự án khởi động

Fork dự án tinyweb-starter

git clone https://github.com/LiveDuo/tinyweb-starter

Lựa chọn 2. Tạo một dự án mới

1. Tạo một dự án Rust mới

Tạo một dự án Rust mới với lệnh:

cargo new tinyweb-example --lib

Thêm dòng crate-type =["cdylib"] vào tệp Cargo.toml và cài đặt crate với lệnh:

cargo add tinyweb --git https://github.com/LiveDuo/tinyweb

2. Thêm mã mẫu

Cập nhật tệp src/lib.rs:

use tinyweb::element::El;
use tinyweb::invoke::Js;

fn component() -> El {
    El::new("div")
        .child(El::new("button").text("print").on("click", move |_| {
            Js::invoke("alert('hello browser')", &[]);
        }))
}

#[no_mangle]
pub fn main() {
    let body = Js::invoke("return document.querySelector('body')", &[]).to_ref().unwrap();
    component().mount(&body);
}

3. Tải wasm trong HTML

Tạo một tệp index.html trong một thư mục public mới:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/gh/LiveDuo/tinyweb/src/js/main.js"></script>
        <script type="application/wasm" src="client.wasm"></script>
    </head>
    <body></body>
</html>

4. Xây dựng wasm

Xây dựng dự án với lệnh:

cargo build --target wasm32-unknown-unknown -r

Sau đó, sao chép tệp .wasm vào đúng vị trí với lệnh:

cp target/wasm32-unknown-unknown/release/*.wasm public/client.wasm

Cuối cùng, phục vụ thư mục public với bất kỳ máy chủ HTTP tĩnh nào.

development