Egui, GUI chế độ tức thời được viết bằng Rust

 (egui.rs)
10 điểm bởi GN⁺ 2024-12-27 | 1 bình luận | Chia sẻ qua WhatsApp
  • egui là thư viện GUI chế độ tức thời (Immediate Mode) được viết bằng Rust, hoạt động trên cả web và môi trường native
  • Trên web, nó được biên dịch thành WebAssembly và render thông qua WebGL; trong môi trường native, nó hỗ trợ nhiều nền tảng như Mac, Linux, Windows
  • Được triển khai hoàn toàn bằng Rust thuần, không cần DOM, HTML, JS hay CSS
  • Được thiết kế để dễ sử dụng, có tính di động cao và mang lại hiệu năng nhanh

Các đặc điểm chính

1. Chế độ tức thời (Immediate Mode)

  • Cách tiếp cận giúp việc tạo GUI trở nên đơn giản hơn và luồng mã ngắn gọn hơn
  • Ví dụ: 
    if ui.button("Save").clicked() {  
    my_state.save();  
}
  • Không cần lưu trạng thái của nút hoặc sử dụng callback
  • Chế độ tức thời cải thiện tính dễ dùng và giảm độ phức tạp, nhưng có một số hạn chế nhỏ về bố cục và hiệu năng

2. Khả năng tương thích nền tảng

  • Web: hoạt động thông qua WebAssembly và WebGL
  • Native: hỗ trợ Mac, Linux, Windows, Android và nhiều nền tảng khác
  • Có thể tích hợp với game engine (ví dụ: tích hợp với Bevy)

3. Tích hợp với hệ sinh thái Rust

  • Cung cấp framework chính thức eframe:
  • Có thể viết ứng dụng web và native bằng cùng một mã nguồn
  • Phụ thuộc gọn nhẹ:
  • egui chỉ dùng các phụ thuộc tối thiểu của Rust như ab_glyph, ahash
  • Các phụ thuộc nặng được tách thành crate riêng (egui_extras v.v.)

Các chức năng chính

  • Widget: nút bấm, thanh trượt, checkbox, radio button, chỉnh sửa văn bản, bộ chọn màu, v.v.
  • Bố cục: hỗ trợ ngang, dọc, theo cột, tự động xuống dòng
  • Chỉnh sửa văn bản: hỗ trợ nhiều dòng, sao chép/dán, emoji
  • Cửa sổ: di chuyển, thay đổi kích thước, thu nhỏ/đóng
  • Render: render văn bản và hình dạng có áp dụng anti-aliasing
  • Khả năng truy cập: hỗ trợ trình đọc màn hình thông qua tích hợp AccessKit

Ưu điểm và nhược điểm

  • Ưu điểm
    • Tính đơn giản: có thể viết GUI bằng mã ngắn gọn mà không cần callback
    • Tính di động: cùng một mã nguồn có thể chạy trên web và môi trường native
    • Tính dễ dùng: không có vấn đề đồng bộ giữa trạng thái ứng dụng và trạng thái GUI
  • Nhược điểm
    • Độ phức tạp bố cục: do đặc tính của chế độ tức thời, các bố cục phức tạp cần thêm công sức
    • Mức dùng CPU: vì cần tính toán toàn bộ bố cục ở mỗi frame, UI quy mô lớn có thể bị giảm hiệu năng

Đối tượng người dùng

  • Nhà phát triển muốn nhanh chóng tạo GUI đơn giản
  • Người dùng muốn thêm GUI vào game engine hoặc dự án dựa trên Rust
  • Người viết ứng dụng cần hỗ trợ cả web lẫn môi trường native

Giải thích thêm về chế độ tức thời

  • Khác với retained mode dựa trên callback, chế độ tức thời xử lý trạng thái ngay tại mỗi frame
  • Ví dụ: if ui.button("Save").clicked() { save(); }
  • Ưu điểm: luồng mã đơn giản hơn và không có vấn đề đồng bộ trạng thái
  • Nhược điểm: việc tính toán bố cục phức tạp hơn và có thể ảnh hưởng hiệu năng ở UI quy mô lớn

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-12-27
Ý kiến trên Hacker News

  • Đã cố dùng framework Rust để hiểu các bài toán toán học, nhưng chu kỳ edit-compile-run quá dài nên gặp khó khăn. Tò mò liệu việc chia dự án thành các module có thể cải thiện điều này không

  • Nếu trình duyệt không hỗ trợ render subpixel, các thư viện render UI dựa trên canvas sẽ bất lợi so với nền tảng DOM, trừ trên thiết bị độ phân giải cao. Thư viện egui cũng nhận thức được vấn đề này

  • Trang demo được biên dịch để chạy trong môi trường trình duyệt gây ấn tượng về mặt kỹ thuật, nhưng khó hình dung các ứng dụng có thể làm với egui. Tò mò liệu có ví dụ thú vị nào dùng egui không

  • Vào dịp Giáng sinh đã làm điều nghịch ngợm là ép unwrap Option thay vì pattern matching nên gây ra lỗi. Xảy ra trên bản Brave Mobile

  • Hỗ trợ quốc tế hóa còn hạn chế. Ví dụ, khi dán từ "hello" bằng tiếng Ả Rập thì nó hiện thành các ô vuông

  • Tò mò "immediate mode" là gì. Cách thêm widget vào UI dùng .add(). Không rõ liệu một builder API trôi chảy cho các widget như vậy có phải là thứ khiến nó trở thành "immediate mode" hay không

  • Tò mò cách debug các giao diện như thế này trong trình duyệt web. Không rõ có thể debug giống như JavaScript hay C++ WebAssembly hay không

  • Có vấn đề với việc thay đổi kích thước cửa sổ. Trong ví dụ "Highlighting", khi bấm vào vùng nắm ở góc dưới bên phải thì mũi tên chéo đổi thành mũi tên dọc, nên chỉ có thể đổi kích thước theo chiều dọc. Ở các ví dụ mặc định khác cũng có vẻ như có thể đổi kích thước đồng thời theo chiều dọc và ngang, nhưng lại không thể đổi theo chiều dọc

  • Phản hồi nhập liệu rất chậm. Khi gõ nhanh thì phần nhập không theo kịp. Không thể chọn và sao chép văn bản, đây là vấn đề lớn đối với một GUI tự triển khai. Chúc mọi người cuối năm vui vẻ