GUI mode immediate yang ditulis dengan Rust, Egui

 (egui.rs)
10 poin oleh GN⁺ 2024-12-27 | 1 komentar | Bagikan ke WhatsApp
  • egui adalah library GUI mode immediate (Immediate Mode) yang ditulis dengan Rust dan berjalan di lingkungan web maupun native
  • Di web, egui dikompilasi ke WebAssembly dan dirender melalui WebGL, sementara di lingkungan native mendukung berbagai platform seperti Mac, Linux, dan Windows
  • Diimplementasikan sepenuhnya dengan Rust murni tanpa DOM, HTML, JS, atau CSS
  • Dirancang agar mudah digunakan, sangat portabel, dan memberikan performa cepat

Fitur utama

1. Mode immediate (Immediate Mode)

  • Pendekatan yang menyederhanakan pembuatan GUI dan membuat alur kode lebih ringkas
  • Contoh: 
    if ui.button("Save").clicked() {  
    my_state.save();  
}
  • Tidak perlu menyimpan status tombol atau menggunakan callback
  • Mode immediate meningkatkan kemudahan penggunaan dan mengurangi kompleksitas, meski ada sedikit keterbatasan pada tata letak dan performa

2. Kompatibilitas platform

  • Web: berjalan melalui WebAssembly dan WebGL
  • Native: mendukung Mac, Linux, Windows, Android, dan lainnya
  • Dapat diintegrasikan dengan game engine (misalnya integrasi dengan Bevy)

3. Integrasi dengan ekosistem Rust

  • Menyediakan framework resmi eframe:
  • Memungkinkan penulisan aplikasi web dan native dengan kode yang sama
  • Dependensi ringan:
  • egui hanya menggunakan dependensi minimal Rust seperti ab_glyph dan ahash
  • Dependensi yang berat dipisahkan ke crate terpisah (seperti egui_extras)

Kemampuan utama

  • Widget: tombol, slider, checkbox, radio button, pengeditan teks, color picker, dan lainnya
  • Tata letak: mendukung horizontal, vertikal, berbasis kolom, dan pembungkusan baris otomatis
  • Pengeditan teks: multiline, salin/tempel, dan dukungan emoji
  • Jendela: dapat dipindah, diubah ukurannya, diminimalkan/ditutup
  • Rendering: rendering teks dan bentuk dengan anti-aliasing
  • Aksesibilitas: dukungan screen reader melalui integrasi AccessKit

Kelebihan dan kekurangan

  • Kelebihan
    • Kesederhanaan: GUI dapat dibuat dengan kode ringkas tanpa callback
    • Portabilitas: dapat dijalankan di lingkungan web dan native dengan kode yang sama
    • Kemudahan penggunaan: tidak ada masalah sinkronisasi antara status aplikasi dan status GUI
  • Kekurangan
    • Kompleksitas tata letak: karena sifat mode immediate, tata letak kompleks memerlukan pekerjaan tambahan
    • Penggunaan CPU: karena seluruh tata letak harus dihitung di setiap frame, UI berskala besar dapat mengalami penurunan performa

Pengguna yang dituju

  • Developer yang ingin cepat membuat GUI sederhana
  • Pengguna yang ingin menambahkan GUI ke game engine atau proyek berbasis Rust
  • Pembuat aplikasi yang mendukung lingkungan web dan native sekaligus

Penjelasan tambahan tentang mode immediate

  • Berbeda dari retained mode berbasis callback, mode immediate memproses status secara langsung pada setiap frame
  • Contoh: if ui.button("Save").clicked() { save(); }
  • Kelebihan: alur kode menjadi sederhana dan tidak ada masalah sinkronisasi status
  • Kekurangan: perhitungan tata letak lebih kompleks dan dapat memengaruhi performa pada UI berskala besar

Bacaan terkait

1 komentar

 
GN⁺ 2024-12-27
Komentar Hacker News

  • Mencoba memahami soal matematika menggunakan framework Rust, tetapi mengalami kesulitan karena siklus edit-compile-run terlalu panjang. Penasaran apakah ini bisa membaik jika proyek dipecah menjadi beberapa modul

  • Jika browser tidak mendukung subpixel rendering, pustaka rendering UI berbasis canvas akan kalah dibandingkan yang berbasis DOM kecuali pada perangkat beresolusi tinggi. Pustaka egui juga menyadari masalah ini

  • Halaman demo yang dikompilasi di lingkungan browser memang mengesankan secara teknis, tetapi sulit membayangkan kemungkinan aplikasi yang dibuat dengan egui. Penasaran apakah ada contoh menarik yang memanfaatkan egui

  • Saat Natal, melakukan hal naughty dengan memaksa unwrap Option alih-alih pattern matching sehingga memunculkan error. Terjadi di Brave versi mobile

  • Dukungan internasionalisasi terbatas. Misalnya, saat menempelkan "hello" dalam bahasa Arab, yang muncul adalah kotak-kotak

  • Penasaran apa yang dimaksud dengan "immediate mode". Cara menambahkan widget ke UI menggunakan .add(). Penasaran apakah builder API yang lancar untuk widget seperti ini yang membuatnya menjadi "immediate mode"

  • Penasaran bagaimana cara men-debug antarmuka seperti ini di browser web. Apakah bisa di-debug seperti JavaScript atau C++ WebAssembly

  • Ada masalah pada pengubahan ukuran jendela. Pada contoh "Highlighting", saat mengklik area pegangan di sudut kanan bawah, panah diagonal berubah menjadi panah vertikal sehingga ukuran hanya bisa diubah secara vertikal. Di contoh bawaan lain juga terlihat seolah ukuran bisa diubah sekaligus secara vertikal dan horizontal, tetapi ternyata tidak bisa diubah secara vertikal

  • Respons input sangat lambat. Saat mengetik cepat, input tidak bisa mengimbangi. Pemilihan dan penyalinan teks juga tidak bisa dilakukan, sehingga ini menjadi masalah besar untuk implementasi GUI kustom. Semoga semua orang menikmati akhir tahun yang bahagia