Show HN: Thư viện GUI Rust thông qua Flutter

• Đề xuất cách gắn Flutter UI vào trong khi vẫn giữ nguyên trạng thái và logic Rust cho các nhà phát triển muốn tạo chương trình GUI bằng Rust
• SDK đa nền tảng trưởng thành của Flutter, hệ sinh thái widget, khả năng kiểm soát theo từng pixel và hot reload giúp việc lặp lại UI nhanh hơn
• Dù không phải cách tiếp cận 100% Rust thuần, nó tương tự các phương án thỏa hiệp UI Rust hiện có như HTML/CSS/Slint hoặc DSL dựa trên macro, theo hướng tách lớp UI
• flutter_rust_bridge trở thành cầu nối giữa Rust và Flutter bằng cách tự động chuyển đổi kiểu tùy ý, &mut, async, traits, results, closure, lifetimes, v.v.
• Có thể xem cấu trúc qua ví dụ ứng dụng counter và todo-list; toàn bộ mã nằm trong thư mục ví dụ của kho flutter_rust_bridge

---

Cách gắn Flutter vào Rust GUI

• Rust đã được chọn là “ngôn ngữ lập trình được mong muốn nhất” trong 8 năm theo StackOverflow và GitHub, và nhu cầu tạo chương trình GUI bằng Rust là rất lớn
• Cách được đề xuất là dùng Flutter và flutter_rust_bridge để gắn GUI vào chương trình Rust
• Nếu muốn chạy trực tiếp, có thể dùng kho GitHub hoặc thư mục demo

Vì sao dùng Flutter

• Flutter được StackOverflow chọn là “SDK di động đa nền tảng phổ biến nhất”, và đang được nhiều nhà phát triển cùng thương hiệu sử dụng
• Nhờ hệ sinh thái widget phong phú, việc triển khai các chức năng UI mong muốn trở nên dễ dàng
  • Cũng có các package như animation confetti
  • Cung cấp nhiều widget và tính năng, cùng độ linh hoạt kiểm soát theo từng pixel
• hot reload tăng tốc vòng lặp trong quá trình phát triển vốn phải chỉnh UI thường xuyên
  • Sau khi đổi code, có thể thấy UI cập nhật gần như tức thì mà không mất trạng thái
  • Giảm thời gian chờ biên dịch lại
• Cùng một codebase có thể chạy không chỉ trên Android, iOS mà còn trên Linux, MacOS, Windows và Web

Thỏa hiệp vì không phải Rust thuần

• Cách tiếp cận này không phải 100% Rust thuần
  • Rust đảm nhiệm trạng thái và logic, còn Flutter đảm nhiệm UI
  • Tương tự các cách làm Rust UI dùng ngôn ngữ khác như DSL tùy chỉnh tạo bằng macro, HTML/CSS/Slint
• Sự tách biệt này phù hợp với phân tách mối quan tâm, và cũng đã được áp dụng trong các trường hợp khác
• Flutter được xem là dễ học nếu đã hiểu Rust
• Nền tảng Web có một số phê bình, và có vẻ phù hợp với dạng “ứng dụng” như Google Earth hay trình chỉnh sửa animation Rive hơn là trang web tĩnh
• Flutter có nhiều mã boilerplate và scaffold
  • Với dự án nhỏ, thường không cần sửa các file đó nên có thể xem như gần như không tồn tại
  • Với dự án lớn, khả năng sửa đổi cũng đồng nghĩa với khả năng tùy biến

Những gì flutter_rust_bridge kết nối

• Mục tiêu của flutter_rust_bridge là kết nối Rust và Flutter một cách tự nhiên như một ngôn ngữ duy nhất
• Tự động chuyển đổi nhiều yếu tố
  • Kiểu tùy ý
  • &mut
  • async
  • traits
  • results
  • closure(callback)
  • lifetimes
• “Rust GUI thông qua Flutter” là một trong các use case khả thi
• Các ví dụ sử dụng khác gồm dùng thư viện Rust bất kỳ trong Flutter, hoặc viết các phần như thuật toán bằng Rust và phần còn lại bằng Flutter

Ví dụ ứng dụng counter

• Ví dụ này là một trong nhiều cách tích hợp Rust và Flutter
• flutter_rust_bridge là công cụ đa dụng không ép buộc cấu trúc cụ thể, nên cũng có thể áp dụng cách tiếp cận kiểu Redux hoặc Elm
• Phía Rust định nghĩa trạng thái bằng #[frb(ui_state)] và đánh dấu các method thay đổi bằng #[frb(ui_mutation)]
  • RustState có count: i32
  • new() khởi tạo count là 100
  • increment() tăng count thêm 1
• #[frb(ui_state)] và #[frb(ui_mutation)] rất nhẹ; được nói là không có “ma thuật” ẩn bên trong và mã chỉ khoảng hơn 10 dòng
• Flutter UI được viết theo kiểu khai báo
  • Text hiển thị count hiện tại
  • TextButton gọi state.increment
  • Hai phần tử được gom thành một column và áp dụng padding
• Khi sửa UI trong lúc chạy, có thể kiểm tra thay đổi ngay lập tức bằng hot reload

Ví dụ ứng dụng todo-list

• Ứng dụng todo-list là mục tùy chọn để hoàn chỉnh, và là một trong nhiều cách tiếp cận mà flutter_rust_bridge có thể hỗ trợ
• Trạng thái Rust bao gồm các mục todo, văn bản nhập, bộ lọc và ID tiếp theo
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item có id, content, completed
• Filter có All, Active, Completed
• Các hành động thay đổi trạng thái được triển khai dưới #[frb(ui_mutation)]
  • add() thêm mục bằng văn bản nhập hiện tại rồi xóa ô nhập
  • remove(id) xóa mục có ID tương ứng
  • toggle(id) đảo trạng thái hoàn thành
• Logic nghiệp vụ gồm filtered_items() và Filter::check()
  • All cho tất cả mục đi qua
  • Active chỉ cho các mục chưa hoàn thành đi qua
  • Completed chỉ cho các mục đã hoàn thành đi qua
• Flutter UI sắp xếp text field, list view và hàng nút lọc thành một column
  • SyncTextField nối thay đổi nhập liệu và submit với thay đổi trạng thái Rust
  • Mỗi mục todo gồm checkbox, văn bản và nút xóa

Vị trí mã và cách chạy

• Toàn bộ mã nằm trong kho flutter_rust_bridge
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• Phần lớn là các file boilerplate tự động sinh do chức năng của Flutter
• Các file cốt lõi là src/app.rs và ui/lib/main.dart
• Chạy demo bằng cách thực thi lệnh sau trong thư mục ui
  • flutter_rust_bridge_codegen generate && flutter run