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.