Amazon Prime Video membangun ulang total UI perangkat ruang keluarga dengan Rust + WebAssembly

 (infoq.com)
8 poin oleh GN⁺ 2025-04-14 | 2 komentar | Bagikan ke WhatsApp
  • Contoh rekonstruksi total UI untuk perangkat ruang keluarga berbasis Rust dan WebAssembly
  • Merancang struktur untuk mewujudkan kinerja tinggi dan latensi input rendah bahkan pada perangkat dengan tingkat performa yang beragam
  • Keluar dari basis React dan mengembangkan sendiri UI SDK khusus Rust, sehingga memperoleh produktivitas tinggi
  • Mengelola kompleksitas kode dan performa melalui arsitektur berbasis Entity-Component-System (ECS)
  • Analisis jujur mengenai kelebihan, kekurangan, dan tantangan dari penggunaan WebAssembly dan Rust

Alasan membangun ulang UI Prime Video dengan Rust dan WebAssembly

  • Amazon menghadapi tantangan untuk menjalankan aplikasi Prime Video yang sama di berbagai perangkat ruang keluarga (konsol, set-top box, streaming stick, TV, dll.)
  • Untuk menghadirkan pengalaman pengguna yang konsisten di perangkat dengan performa yang beragam, dibutuhkan mesin UI berperforma tinggi
  • Sebelumnya digunakan tech stack campuran yang terdiri dari React(TypeScript), JavaScript, C++, WebAssembly, dan Rust
  • Karena kecepatan eksekusi JavaScript yang lambat dan sulitnya pembaruan, diputuskan untuk bermigrasi sepenuhnya ke Rust
  • Dengan memanfaatkan WebAssembly, pembaruan aplikasi menjadi lebih mudah, dan Rust unggul untuk optimasi performa

Tantangan utama pengembangan perangkat ruang keluarga

  • Perlu menangani berbagai spesifikasi performa, dari perangkat kelas tinggi seperti PS5 hingga USB stick berdaya rendah
  • Pengembangan harus dilakukan dengan satu codebase tanpa menyiapkan tim terpisah untuk setiap perangkat
  • Pada sebagian besar perangkat, kode native sulit diperbarui karena hanya pembaruan firmware yang dimungkinkan tanpa app store
  • Jika UI perlu sering diperbarui, penggunaan kode berbasis JavaScript dan WebAssembly lebih menguntungkan
  • Kombinasi Rust + WebAssembly dipilih sebagai titik keseimbangan antara kebutuhan performa tinggi dan siklus pembaruan yang cepat

Perbandingan arsitektur lama dan arsitektur UI baru berbasis Rust

  • Arsitektur lama memiliki struktur sebagai berikut:
    • Logika UI ditulis dengan React, sementara Rust(WebAssembly) menangani mesin UI tingkat rendah
    • React → message bus → mesin UI WebAssembly → backend rendering C++
  • Untuk mengatasi masalah latensi input, semua logika bisnis dimigrasikan ke Rust UI SDK
  • Arsitektur baru:
    • Dari UI SDK hingga rendering, semuanya dibangun dengan Rust
    • Menghapus message bus, dan seluruh proses dijalankan di dalam WebAssembly
    • Kode dikompilasi ke WebAssembly lalu dikirim ke TV, sehingga kecepatan pembaruan dan responsivitas meningkat dibanding sebelumnya

Komponen utama Rust UI SDK yang baru

  • Mengadopsi konsep Composable yang mirip React → unit penyusun UI yang dapat digunakan ulang
  • Sistem UI reaktif berbasis Signal dan Effect
    • Signal: ketika nilai berubah, Effect terkait akan dipicu
    • Memo: hanya bereaksi saat nilainya berbeda dari sebelumnya
  • Hierarki UI didefinisikan melalui makro compose!
  • Elemen UI terdiri dari Widget (komponen bawaan) dan Composables (struktur yang didefinisikan pengguna)
  • Menggunakan arsitektur Entity-Component-System(ECS):
    • Entity: ID
    • Component: data atribut (mis. Layout, RenderInfo, Text)
    • System: fungsi yang menjalankan logika untuk kombinasi Component tertentu

Struktur dan cara kerja sistem ECS

  • Setiap system memerlukan kombinasi component tertentu, dan berdasarkan itu menangani pembaruan UI
  • Contoh:
    • Resource Management System: component gambar → upload ke GPU → memperbarui RenderInfo
    • Layout System: menghitung berbagai component terkait layout
    • Rendering System: menampilkan layar aktual berdasarkan RenderInfo
  • Struktur ini memungkinkan berbagai halaman dimigrasikan secara bertahap dari React ke Rust
  • Koeksistensi dan perpindahan antara halaman berbasis JavaScript dan halaman berbasis Rust berjalan mulus

Hasil positif dan manfaat

  • Developer JavaScript/React pun berhasil beralih ke Rust UI SDK tanpa kehilangan produktivitas
  • Berkat struktur UI SDK yang familier, pemula Rust juga bisa cepat beradaptasi
  • Dimungkinkan untuk mengimplementasikan fitur yang sebelumnya tidak mungkin, seperti animasi layout dan perpindahan layar yang cepat
  • Tool pengembangan internal (resource manager, layout inspector, dll.) juga dapat dibuat dengan cepat berbasis Rust
  • Latensi input yang sebelumnya 250ms berkurang drastis menjadi 33ms (berdasarkan perangkat spesifikasi rendah)

Kesulitan dan keterbatasan teknis

  • WebAssembly System Interface(WASI) masih merupakan ekosistem yang terus berkembang, sehingga ada kemungkinan kode lama rusak saat Rust diperbarui
  • Di WebAssembly, saat panic terjadi aplikasi langsung berhenti seluruhnya → menyulitkan upaya menjaga stabilitas
    • Tidak seperti JavaScript, penanganan exception masih kurang matang → perlu aktif menggunakan tipe Result
    • Saat bergantung pada library eksternal, perlu mendorong implementasi yang bebas panic
  • Di lingkungan browser, WebAssembly dan API rendering tertentu tidak didukung, sehingga belum diterapkan ke klien web

Bytecode Alliance dan kontribusi ke ekosistem

  • Amazon aktif berpartisipasi dalam standardisasi WASI dan peningkatan fitur terkait sebagai anggota Bytecode Alliance
  • WebAssembly Micro Runtime yang digunakan berbasis C, dan Wasmtime yang berbasis Rust juga sedang dipertimbangkan secara paralel
  • Untuk memajukan ekosistem WebAssembly, mereka memberikan umpan balik teknis secara langsung dan ikut serta dalam pengembangan

Q&A lainnya

  • Apakah ini juga bisa dijalankan di web browser? → sebagian browser WebKit tidak mendukung WASM, ada penurunan performa, dan kompleksitas implementasi, sehingga masih dalam pertimbangan
  • Implementasi dengan WebGL memang memungkinkan, tetapi untuk saat ini efeknya dinilai belum sebanding dengan investasinya sehingga ditunda

Ringkasan

  • UI Prime Video berbasis Rust+WebAssembly memenuhi tiga hal sekaligus: performa tinggi, latensi input rendah, dan pembaruan cepat
  • UI SDK buatan sendiri dan arsitektur ECS mengelola perilaku UI yang kompleks secara efisien
  • Mengadopsi Rust memang tidak mudah, tetapi melalui desain yang sistematis dan budaya pengembangan yang tepat, mereka mencapai produktivitas dan stabilitas sekaligus
  • Ekosistem WebAssembly masih terus berkembang, tetapi sudah cukup layak diterapkan pada layanan nyata
  • Keberhasilan implementasi didasarkan pada prototyping yang matang dan strategi migrasi bertahap

Bacaan terkait

2 komentar

 
seunggi 2025-04-14

Dibanding frontend yang pada dasarnya memakai library manajemen state, saya cenderung berpikir justru game itu semua state saling menyentuh semua state, jadi ya dikerjakan begitu saja dengan gaya yang apa adanya? Namun sebaliknya, memakai ECS di aplikasi berarti mirip dengan menggunakan manajemen state yang berpola oleh masing-masing developer atau library internal mereka, jadi saya penasaran bagaimana mereka menangani bagian seperti ini.
 
y15un 2025-04-14

Menerapkan ECS yang biasanya hanya terlihat di game engine ke UI, ini ide yang cukup segar. Hari ini saya belajar satu hal lagi.