Prime Video: Membangun Ulang UI untuk Ruang Keluarga dengan Rust & WebAssembly
Guys, pernah gak sih lagi asik nonton, eh UI di TV lemotnya minta ampun? Scrolling gak beres-beres?! Nah, tim Prime Video punya solusi keren nih: merombak total UI living room kita, pakai Rust dan WebAssembly! Penasaran kan gimana caranya? Yuk, kepoin!
Bicara tentang perangkat ruang keluarga, kita (aslinya) lagi ngomongin TV pintar, set-top box, konsol game, sampai streaming stick. Mereka semua punya spek dan performa yang beda-beda banget. Bayangin aja, ada PS5 Pro yang powerful banget, tapi ada juga streaming stick yang cuma ngandelin daya USB. Kita gak bisa bikin UI yang beda-beda buat tiap perangkat, karena ribetnya nauzubillah.
Alhasil, software harus bisa jalan di semua perangkat. Tantangannya? Performa! Umumnya, kode yang ngebut itu yang dikompilasi secara native, kayak Rust atau C++. Tapi, itu belum cukup di ranah ini. Kita harus mikir gimana caranya bikin UI yang bisa di-update dengan cepat dan mudah di semua perangkat, bahkan yang gak punya app store sekalipun!
Masalahnya lagi, kemampuan hardware antara perangkat itu beragam banget bro. Sebagai developer SDK, kita harus mikirin fallback yang gak bikin developer aplikasi pusing. Seringnya, kita pakai feature flags atau default yang masuk akal. Toh, update kode native juga jelas susah banget. Mau gak mau, kita harus punya siklus iterasi yang cepat dan bisa update aplikasi dengan gampang.
Dulu, UI Prime Video dibangun pakai React dan JavaScript. Tapi karena udah gak match sama kebutuhan, kita mutusin buat bikin yang baru. Perubahan ini memungkinkan kita nambahin fitur-fitur baru, kayak channel atau live event, tanpa harus ngutak-ngatik kode native di level bawah. Hasilnya, update UI jadi lebih cepat daripada update native app di platform!
Sekarang, setiap kali developer nambahin kode, perbaiki bug, atau ubah fitur, semuanya berjalan lewat pipeline CI/CD yang otomatis. Gak ada manual testing sama sekali! Kita testing di perangkat virtual, kayak Linux, dan device farm fisik. Kalau semua tesnya lolos, pengalaman baru langsung nongol di TV kamu.
Nah, sekarang kalau ada update, layout animation jadi smooth, transisi page cepat banget, semua berkat performa Rust. Coba bayangin semua itu gak mungkin kalau pakai JavaScript dan React, bro! Intinya, UI itu structur berupa tree dari node. Tugas UI SDK adalah memanipulasi tree ini secepat mungkin, tergantung input dari user atau event lainnya.
Membangun Arsitektur Tingkat Tinggi
Sebelum migrasi ke Rust, arsitektur kita udah lumayan kompleks. Di bagian bawah UI, kita udah pakai Rust untuk UI engine. Sementara, kode bisnis untuk aplikasi Prime Video ditulis pakai TypeScript yang dikompilasi ke JavaScript. Kode ini yang di-download setiap kali ada perubahan di aplikasi.
Arsitektur dibagi lagi jadi bagian yang ada di perangkat. Bagian ini kita usahakan setipis mungkin karena susah di-update. Di dalamnya ada virtual machine, rendering backend (yang nyambungin kode tingkat tinggi ke OpenGL dan API grafis lainnya), networking (pakai cURL), API media, dan penyimpanan. Semua ini ditulis pakai C++.
Dulu, aplikasi Prime Video menggunakan React-Livingroom (versi React yang udah dimodifikasi untuk perangkat ruang keluarga) untuk mengambil keputusan tingkat tinggi. React ngirim pesan ke mesin WebAssembly, yang selanjutnya menangani node. Misalnya, kalau mau nampilin gambar, React akan meminta mesin WebAssembly untuk bikin node gambar.
Mesin WebAssembly akan mengelola scene tree, termasuk mengecek ketersediaan gambar, minta download, animasi, dan lainnya. Setelah gambar selesai di-download dan diproses. Render akan menggambar pixel di layar.
Nah, masalahnya, JavaScript terlalu lambat, terutama di perangkat yang speknya pas-pasan. Respons dari remote lama. Solusinya, kita memindahkan semua logika UI ke Rust. Hasilnya? Input jadi lebih cepat, layout animation smooth, dan transisi page gak lagi bikin kesel.
Rust UI SDK: Ramuan Ajaib Kita
Sebagai gantinya, kita membuat UI SDK sendiri. SDK ini terinspirasi dari Leptos, menggunakan signal, effects, dan memo, konsep yang cukup familiar buat developer UI. Kita juga pake Composer macro untuk mempermudah penulisan composable, mirip kayak konsep reusable UI di React.
Signal adalah unit yang nilainya bisa berubah. Setiap kali nilai signal berubah, maka akan memicu effects. Effect akan menentukan bagaimana UI menanggapi perubahan signal. Memo adalah signal khusus.
Untuk definisi hierarki UI, kita gunakan compose macro. Di sini, kita bisa menyusun berbagai komponen UI: Row, Label, Button, dan lainnya. Setiap widget punya komponen terpisah yang mengatur layout, render info, dan teks.
Fungsinya mirip dengan UI engine lainnya, tapi semuanya ada di Rust. Saat compose macro dijalankan, kalian akan mendapatkan hierarki UI dalam scene tree. Kita bisa gabungkan UI (row, label, button, etc) dengan widget yang spesifik (gambar, tombol) atau widgets yang dibangun dari komponen.
Kita pakai ECS (Entity Component System): Entitas yang punya ID, component (data tanpa perilaku), dan sistem yang bekerja di atas komponen tersebut. Semuanya diatur sedemikian rupa untuk ngatur kompleksitas.
Misalnya, sistem resource management bacanya dari base components, image components, lalu ditulis (update) ke RenderInfo components. Sistem layout juga punya fungsi yang kompleks buat ngatur layout. Nah, sistem rendering yang terakhir, bacanya dari komponen RenderInfo, terus menampilkan pixel di layar.
Keuntungan dan Kerugian: Plus dan Minus
Keuntungan yang paling kerasa adalah produktivitas developer. Developer yang biasanya cuma jago JavaScript dan TypeScript, gak butuh waktu lama buat adaptasi dengan UI SDK yang baru. Kecepatannya juga lebih unggul, ngalahin developer mobile sekalipun. Karena SDK, kita bisa bikin tools buat debugging, inspeksi layout, dan sejenisnya.
Sebagai contoh, input latency untuk halaman utama turun drastis dari 247 milidetik jadi 33 milidetik. Pada halaman detail, turun dari 440 milidetik hingga 30 milidetik.
Namun, ada juga kerugiannya. WebAssembly System Interface (WASI) masih baru, dan kadang ngalamin kendala. Kode kita bisa rusak kalau ada fitur yang gak kompatibel. Selain itu, kode yang panik (error) bisa bikin crash aplikasi.
Meskipun begitu, dengan usaha yang keras, kita bisa melewatinya. Kita juga harus beradaptasi dengan library pihak ketiga yang kadang mengalami panic.
Terakhir, kita mendapatkan keuntungan karena aktif bergabung dengan Bytecode Alliance, organisasi nirlaba yang membuat standarisasi WebAssembly dan WebAssembly System Interface.
Takeaway: Jangan Takut Berinovasi!
Intinya, merombak UI Prime Video pakai Rust dan WebAssembly itu bukan hal yang mudah. Tapi, hasilnya gak main-main. Performa UI meningkat, developer jadi lebih produktif, dan kita bisa nambahin fitur-fitur keren yang gak bisa dilakuin sebelumnya. So, jangan takut buat berinovasi dan coba-coba teknologi baru, ya, guys! Siapa tau kamu bisa bikin terobosan yang lebih gokil lagi!
