Không muốn viết JavaScript nữa, tôi thử dùng Rust + WASM phát triển frontend, kết quả là...

0 0 0

Người đăng: mâyxám

Theo Viblo Asia

Gần đây mình tình cờ thấy một bài đăng trên Reddit của một lập trình viên:

“I hate JS. I’ve done the HTML and CSS, but I’m stuck. I want to use Rust instead.”

Thật sự, cảm giác này mình hiểu rất rõ. Sau nhiều năm làm frontend, mình ngày càng mệt mỏi với cái gọi là “linh hoạt” của JS: hệ thống type yếu, debug không sướng, tool build thì cứ lâu lâu lại gãy.

Và thế là mình nghĩ: có thể dùng Rust viết frontend không? Nhờ WebAssembly (WASM), Rust hoàn toàn có thể chạy được trong trình duyệt. Vậy thì có thể thay thế JS để làm UI?

Bài viết này là hành trình mình thử nghiệm thực tế, các rắc rối mình gặp phải, và những công cụ nào đã giúp mình làm việc hiệu quả hơn.


Rust viết frontend: có khả thi không?

Thực tế đã có không ít dự án thử dùng Rust cho frontend rồi. Cốt lõi là: Rust có thể biên dịch thành WebAssembly, và trình duyệt thì có thể chạy file .wasm đó trực tiếp.

Các framework phổ biến hiện nay:

  • Yew: khá ổn định, thiết kế giống React.
  • Dioxus: hỗ trợ đa nền tảng (Web, desktop, mobile), cộng đồng đang phát triển tốt.
  • Sycamore: tối ưu hiệu năng, như SolidJS phiên bản Rust.

Tất cả đều hỗ trợ phát triển theo kiểu component, xử lý sự kiện, trạng thái… và viết hoàn toàn bằng Rust.

Về công cụ build:

  • wasm-pack: đóng gói thành npm package
  • trunk: giống như Vite, hỗ trợ build và hot reload
  • cargo-leptos: đi kèm với framework Leptos mới nổi

➡️ Kết luận: về mặt kỹ thuật thì OK, nhưng về hệ sinh thái thì Rust vẫn thua xa JS.


Trải nghiệm thực tế: ổn định hơn mình nghĩ, nhưng phức tạp hơn JS

1. Độ khó khi bắt đầu

Rust vốn đã có learning curve khá cao. Kết hợp thêm WASM, debug và setup toolchain thì bạn sẽ cần học thêm nhiều thứ.

Đặc biệt là debug — nhiều lỗi xảy ra trong trình duyệt nhưng bạn không thấy được source code (vì đã compile sang wasm). Muốn debug tốt, bạn phải dùng đến các DevTools chuyên dụng.

2. Hiệu năng rất tốt

Khi cần render bảng lớn hoặc xử lý visualization nặng, combo Rust + WASM cho hiệu năng rất ổn. Trong một số benchmark như của Krausest, Sycamore thậm chí vượt cả React.

3. Có công cụ hỗ trợ giúp nhẹ đầu

Phần dễ gãy nhất là quá trình build. Nhưng may mắn là mình tìm được một công cụ tuyệt vời: ServBay — ban đầu được làm cho PHP và Node, nhưng cực kỳ phù hợp để chạy local server cho dự án WASM. Hiện tại đã hỗ trợ cả Windows.

Ví dụ mình dùng Dioxus để viết một page nhỏ:

fn app(cx: Scope) -> Element { cx.render(rsx!( div { h1 { "Hello, Rust frontend!" } button { onclick: |_| println!("Clicked!"), "Click me" } } ))
}

Chỉ cần build với trunk, rồi dùng ServBay cấu hình folder tĩnh là có thể mở HTTPS local ngay, không cần cài đặt nginx hay TLS gì cả, cực kỳ nhanh.

Lợi thế của ServBay:

  • Tự cấu hình HTTPS local, tương thích chính sách bảo mật trình duyệt
  • Hỗ trợ hot reload siêu nhanh
  • Không yêu cầu cấu trúc folder phức tạp — rất lý tưởng để làm prototype hoặc thử nghiệm kỹ thuật mới

Khi nào nên dùng Rust viết frontend?

Không phải dự án nào cũng nên dùng Rust. Theo mình:

✅ Phù hợp khi:

  • Làm ứng dụng xử lý dữ liệu nặng (dashboard, chart...)
  • Viết UI cho thiết bị nhúng (embedded Web UI)
  • Bạn đã có kinh nghiệm Rust backend, muốn làm fullstack Rust

❌ Không phù hợp nếu:

  • Làm sản phẩm cần tốc độ ra mắt nhanh, teamwork nhiều
  • UI cần animation hoặc tương tác phức tạp (JS ecosystem vẫn mạnh hơn)
  • Dự án phụ thuộc nhiều vào thư viện UI của JS

Cách mình đang làm: không thay thế JS hoàn toàn, mà dùng song song. Phần core logic hiệu năng cao mình dùng Rust + WASM, còn phần UI còn lại để React/TS lo. Vừa an toàn, vừa không phải dạy lại cả team.


Tương lai thì sao?

WebAssembly đang phát triển nhanh:

  • Interface Types: giúp kết nối WASM ↔ JS dễ hơn
  • GC support: sắp tới WASM có thể thao tác DOM trực tiếp
  • Các framework như Dioxus, Leptos cũng đang lớn mạnh, tài liệu tốt dần

Mình tin rằng trong 2–3 năm nữa, Rust frontend sẽ không chỉ là “thú vui” nữa, mà trở thành một lựa chọn nghiêm túc trong nhiều dự án.


Tổng kết

  • Rust + WASM chưa thể thay thế JS hoàn toàn, nhưng tiềm năng là có thật
  • Với team nhỏ hoặc dev cá nhân, dùng tool như ServBay có thể giúp bạn thử nghiệm prototype rất nhanh
  • Bạn có thể thử viết một mini project để cảm nhận. Nếu bạn cũng chán JS như mình, biết đâu Rust sẽ khiến bạn bất ngờ!

Nếu bạn đang thử viết frontend bằng Rust, hãy chia sẻ trải nghiệm của mình nhé! 👇

Bình luận

Bài viết tương tự

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 62

- vừa được xem lúc

Tìm hiểu về CSS framework - Bulma

Mở đầu:. Mấy bữa nay đang lướt web thấy có giới thiệu framework bulma này, được mọi người giới thiệu gọn nhẹ và dễ sử dụng, nên mình mới tìm hiểu thử và hôm nay xin viết 1 bài viết giới thiệu sơ qua với các bạn.

0 0 46

- vừa được xem lúc

Một số mẹo vặt "hay ho" của ES6 có thể bạn chưa biết - Phần 4

Xin chào, ở 3 bài trước của series "Một số mẹo vặt "hay ho" của ES6", mình đã chia sẻ 1 số tips/tricks nhỏ với ES6, hy vọng ít nhiều nó sẽ có ích với các bạn khi áp dụng vào thực tế. Hôm nay, xin mời các bạn theo dõi phần 4 của series này.

0 0 57

- vừa được xem lúc

Tìm hiểu về Jest Mocks Test phía frontend

Giới thiệu. Chắc hẳn không ai phủ nhận rằng UnitTest là 1 phần quan trọng trong giai đoạn phát triển phần mềm, đảm bảo cho code được coverage tránh các bug không mong muốn.

0 0 47

- vừa được xem lúc

Convert từ SVG sang Icon Font như thế nào?

Chào các bạn. Như câu hỏi trên title của bài viết, hôm nay mình sẽ hướng dẫn các bạn cách convert 1 file svg 1 cách khá đơn giản và vô cùng tiện lợi cho các bạn. https://icomoon.io/app/#/select.

0 0 70

- vừa được xem lúc

Một vài thủ thuật làm việc với các dạng layout - Phần 4

. Chào mọi người, cũng đã lâu rồi mình không thấy nhau. Để tiếp tục với series's về các dạng layout hôm nay mình sẽ chia sẻ thêm một trick thú vị nữa về step layout.

0 0 55