WebAssembly - Làm việc với Rust

Giới thiệu về WebAssembly và Rust

Xin chào, các nhà lập trình tương lai! Hôm nay, chúng ta sẽ khám phá một thế giới đầy.exciting nơi mà các trình duyệt web trở thành nền tảng mạnh mẽ để chạy các ứng dụng hiệu suất cao. Hãy tưởng tượng việc bạn có thể chơi các trò chơi 3D phức tạp hoặc chạy các công cụ phân tích dữ liệu phức tạp ngay trong trình duyệt của bạn. Đó chính là phép màu của WebAssembly, và chúng ta sẽ học cách khai thác sức mạnh này bằng ngôn ngữ lập trình Rust.

WebAssembly - Working with Rust

Khi tôi lần đầu tiên gặp WebAssembly, tôi cảm thấy như mình đã phát hiện ra một siêu năng lực ẩn cho phát triển web. Nó giống như phát hiện ra xe đạp đáng tin cậy của bạn bỗng nhiên có thể biến thành tên lửa! Hãy cùng bắt đầu hành trình thú vị này.

WebAssembly là gì?

WebAssembly, thường được viết tắt là Wasm, là một định dạng hướng dẫn nhị phân được thiết kế để thực thi hiệu quả trong các trình duyệt web. Nó giống như một mã bí mật mà các trình duyệt có thể hiểu và chạy cực kỳ nhanh. Hãy tưởng tượng nó như một tăng tốc độ cho các ứng dụng web của bạn!

Tại sao chọn Rust cho WebAssembly?

Rust là một ngôn ngữ lập trình mạnh mẽ và an toàn. Nó giống như một chiếc xe thể thao với các tính năng an toàn mới nhất. Các đặc điểm độc đáo của Rust làm cho nó trở thành một lựa chọn tuyệt vời cho phát triển WebAssembly:

An toàn bộ nhớ mà không cần thu hồi rác
Hiệu suất cao
Kích thước tệp nhị phân nhỏ
Dễ dàng tích hợp với JavaScript

Cài đặt Môi trường Phát triển

Trước khi chúng ta bắt đầu lập trình, chúng ta cần chuẩn bị không gian làm việc. Nó giống như chuẩn bị studio nghệ thuật trước khi vẽ một kiệt tác.

Cài đặt Rust

Trước tiên, hãy cài đặt Rust. Mở terminal của bạn và chạy:

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

Lệnh này tải xuống và cài đặt Rust. Nó giống như gieo một hạt giống sẽ phát triển thành cây lập trình mạnh mẽ của chúng ta!

Cài đặt wasm-pack

Tiếp theo, chúng ta sẽ cài đặt wasm-pack, một công cụ giúp chúng ta xây dựng và làm việc với WebAssembly:

cargo install wasm-pack

Hãy tưởng tượng wasm-pack như một trợ lý trung thành, luôn sẵn sàng giúp bạn đóng gói mã Rust của bạn cho web.

Dự án Rust và WebAssembly Đầu Tiên

Bây giờ, hãy tạo dự án đầu tiên của chúng ta. Chúng ta sẽ bắt đầu đơn giản, với một hàm cộng hai số.

Tạo Dự án

Trong terminal, chạy:

cargo new --lib wasm-add
cd wasm-add

Lệnh này tạo một dự án thư viện Rust mới. Nó giống như mở một cuốn sổ mới, sẵn sàng cho các cuộc phiêu lưu lập trình của chúng ta!

Viết Mã Rust

Mở src/lib.rs và thay thế nội dung của nó bằng:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}

Hãy phân tích nó:

use wasm_bindgen::prelude::*; nhập các công cụ cần thiết cho WebAssembly.
#[wasm_bindgen] giống như một lời phù thủy làm cho hàm của chúng ta có thể truy cập từ JavaScript.
pub fn add(a: i32, b: i32) -> i32 định nghĩa hàm của chúng ta nhận hai số nguyên và trả về tổng của chúng.

Xây dựng cho WebAssembly

Bây giờ, hãy biến mã Rust của chúng ta thành WebAssembly. Chạy:

wasm-pack build --target web

Lệnh này giống như một lò magical oven nướng mã Rust của chúng ta thành một món ngon WebAssembly mà các trình duyệt có thể thưởng thức!

Sử dụng Module WebAssembly trong một Trang Web

Bây giờ đến phần thú vị - sử dụng module WebAssembly của chúng ta trong một trang web thực tế!

Tạo Tệp HTML

Tạo một tệp có tên index.html trong thư mục gốc của dự án với nội dung sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

run();
</script>
</body>
</html>

Tệp HTML này giống như một sân khấu nơi ngôi sao WebAssembly của chúng ta sẽ biểu diễn!

Chạy Trang Web của Bạn

Để xem tạo tác của bạn trong hành động, bạn cần một máy chủ web本地. Nếu bạn có Python cài đặt, bạn có thể sử dụng:

python -m http.server

Sau đó, mở trình duyệt của bạn và truy cập http://localhost:8000. Bạn nên thấy "5 + 7 = 12" hiển thị trên trang. Chúc mừng! Bạn vừa chạy mã Rust trong trình duyệt của bạn!

Chủ đề Nâng cao

Bây giờ chúng ta đã có chân vào nước, hãy cùng lặn sâu hơn vào đại dương WebAssembly và Rust.

Làm việc với Strings

Strings là một chút phức tạp trong WebAssembly. Hãy tạo một hàm chào đón người dùng:

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

Trong JavaScript, chúng ta sẽ sử dụng nó như này:

const greeting = greet("WebAssembly");
console.log(greeting); // Xuất: Hello, WebAssembly!

Quản lý Bộ nhớ

Một trong những siêu năng lực của Rust là quản lý bộ nhớ. Khi làm việc với WebAssembly, chúng ta cần phải đặc biệt cẩn thận. Dưới đây là một hàm tạo và trả về một vector:

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

Hàm này an toàn vì hệ thống sở hữu của Rust đảm bảo bộ nhớ được quản lý đúng cách, ngay cả khi được sử dụng từ JavaScript!

Kết luận

Chúc mừng bạn đã迈出第一步进入 WebAssembly 和 Rust 的世界！我们已经覆盖了很多内容，从设置开发环境到创建和使用 WebAssembly 模块。记住，像学习任何新技能一样，精通来自练习。所以继续编码，继续尝试，最重要的是，继续享受乐趣！

在我们结束之前，我想起了一句著名计算机科学家 Grace Hopper 的话：“语言中最具破坏性的短语是 '我们一直都是这样做的'。” WebAssembly 和 Rust 代表了一种对 web 开发的全新思考方式。拥抱这种变化，你将打开编程旅程中充满可能性的世界。

快乐编码，愿你的 WebAssembly 冒险充满激情和发现！

Phương pháp	Mô tả
`wasm_bindgen::prelude::*`	Nhập các liên kết WebAssembly cần thiết
`#[wasm_bindgen]`	Đánh dấu một hàm để xuất khẩu cho WebAssembly
`wasm-pack build --target web`	Xây dựng mã Rust cho WebAssembly
`import init, { functionName } from './pkg/module_name.js'`	Nhập các hàm WebAssembly trong JavaScript
`await init()`	Khởi tạo module WebAssembly
`Vec::with_capacity(size)`	Tạo một vector với dung lượng được phân bổ trước

Credits: Image by storyset

Hướng Dẫn Trước:

WebAssembly - Làm việc với C++

Hướng Dẫn Tiếp Theo:

WebAssembly - Làm việc với Go