- Oturma odası cihazlarına yönelik UI'ın Rust ve WebAssembly tabanlı olarak baştan yapılandırıldığı bir örnek
- Farklı performans seviyelerindeki cihazlarda da yüksek performans ve düşük giriş gecikmesi sağlamak için bir mimari tasarlandı
- React tabanından çıkılarak Rust'a özel bir UI SDK'sı şirket içinde geliştirildi ve yüksek üretkenlik elde edildi
- Entity-Component-System (ECS) tabanlı mimariyle kod karmaşıklığı ve performans yönetildi
- WebAssembly ve Rust kullanımının getirdiği artılar, eksiler ve sorunlar açıkça analiz edildi
Prime Video UI'ını neden Rust ve WebAssembly ile yeniden inşa ettiler?
- Amazon, aynı Prime Video uygulamasını farklı oturma odası cihazlarında (konsollar, set-top box'lar, streaming stick'ler, TV'ler vb.) çalıştırmak zorundaydı
- Farklı performans özelliklerine sahip cihazlarda tutarlı bir kullanıcı deneyimi sunmak için yüksek performanslı bir UI motoru gerekiyordu
- Önceden React(TypeScript), JavaScript, C++, WebAssembly ve Rust'tan oluşan karma bir teknoloji yığını kullanılıyordu
- JavaScript'in yavaş çalışma hızı ve güncelleme zorlukları nedeniyle tamamen Rust'a geçme kararı alındı
- WebAssembly, uygulama güncellemelerini kolaylaştırırken Rust da performans optimizasyonu açısından avantaj sağladı
Oturma odası cihazlarındaki başlıca geliştirme zorlukları
- PS5 gibi yüksek performanslı cihazlardan düşük güçlü USB stick'lere kadar geniş bir performans yelpazesine uyum sağlamak gerekiyordu
- Her cihaz için ayrı ekip kurmadan tek bir kod tabanı ile geliştirme yapılmalıydı
- Çoğu cihazda uygulama mağazası yerine yalnızca firmware güncellemesi mümkün olduğundan native kodu güncellemek zordu
- UI'ı sık güncellemek için JavaScript ve WebAssembly tabanlı kod kullanmak daha avantajlıydı
- Yüksek performans gereksinimi ile hızlı güncelleme döngüsü arasında denge için Rust + WebAssembly kombinasyonu seçildi
Eski mimari ile yeni Rust tabanlı UI mimarisinin karşılaştırması
- Eski mimari şu yapıdaydı:
- UI mantığı React ile yazılıyor, Rust(WebAssembly) ise düşük seviyeli UI motorunu işliyordu
- React → mesaj veri yolu → WebAssembly UI motoru → C++ rendering backend
- Giriş gecikmesi sorununu çözmek için tüm iş mantığı Rust UI SDK'sına taşındı
- Yeni mimari:
- UI SDK'dan rendering'e kadar her şey Rust ile oluşturuldu
- Mesaj veri yolu kaldırıldı, tüm işleme süreci WebAssembly içinde çalıştırıldı
- Kod WebAssembly'ye derlenip TV'ye gönderiliyor; bu da öncekine göre daha hızlı güncelleme ve daha iyi tepki süresi sağlıyor
Yeni Rust UI SDK'sının temel bileşenleri
- React'e benzer composable kavramı benimsendi → yeniden kullanılabilir UI yapı birimleri
- Signal ve Effect tabanlı reaktif UI sistemi
- Signal: Değer değiştiğinde ilgili Effect'i tetikler
- Memo: Yalnızca önceki değerden farklıysa tepki verir
- UI hiyerarşisi
compose! makrosu ile tanımlanıyor
- UI öğeleri Widget'lardan (yerleşik bileşenler) ve Composables'dan (kullanıcı tanımlı yapılar) oluşuyor
- Entity-Component-System(ECS) mimarisi kullanılıyor:
- Entity: ID
- Component: özellik verisi (örn. Layout, RenderInfo, Text)
- System: Belirli Component kombinasyonları üzerinde mantık çalıştıran fonksiyon
ECS sistem yapısı ve çalışma biçimi
- Her sistem belirli component kombinasyonlarına ihtiyaç duyar ve UI güncellemelerini buna göre işler
- Örnekler:
- Resource Management System: image component → GPU'ya yükleme → RenderInfo güncellemesi
- Layout System: çeşitli layout ile ilgili component'leri hesaplar
- Rendering System: RenderInfo temelinde gerçek ekran çıktısını üretir
- Bu yapı sayesinde farklı sayfalar React'ten Rust'a kademeli olarak taşınabildi
- JavaScript tabanlı sayfalar ile Rust tabanlı sayfaların bir arada çalışması ve geçişi sorunsuz oldu
Elde edilen sonuçlar ve avantajlar
- JavaScript/React geliştiricileri de Rust UI SDK'sına üretkenlik kaybı olmadan geçmeyi başardı
- UI SDK'sının tanıdık yapısı sayesinde Rust'a yeni başlayanlar da hızla uyum sağlayabildi
- Layout animasyonları, hızlı ekran geçişleri gibi önceden mümkün olmayan özellikler hayata geçirilebildi
- İç geliştirme araçları (resource manager, layout inspector vb.) da Rust tabanlı olarak hızla geliştirilebildi
- 250 ms olan giriş gecikmesi 33 ms'ye kadar büyük ölçüde azaltıldı (düşük donanımlı cihazlarda)
Zorlayıcı noktalar ve teknik sınırlamalar
- WebAssembly System Interface(WASI) hâlâ gelişmekte olan bir ekosistem; Rust güncellemeleri mevcut kodu bozabiliyor
- WebAssembly'de panic oluştuğunda tüm uygulama kapanıyor → kararlılığı korumak zor
- JavaScript'teki gibi yeterli exception handling yok →
Result tipinin aktif kullanımı gerekiyor
- Dış kütüphanelere bağımlılık varsa panic-free uygulamaların teşvik edilmesi gerekiyor
- Tarayıcı ortamında WebAssembly ve belirli rendering API'leri desteklenmediğinden web istemcisine uygulanmadı
Bytecode Alliance ve ekosisteme katkı
- Amazon, Bytecode Alliance üyesi olarak WASI standardizasyonu ve ilgili özelliklerin iyileştirilmesine aktif biçimde katılıyor
- Kullanılan WebAssembly Micro Runtime C tabanlı; Rust tabanlı Wasmtime da paralel olarak değerlendiriliyor
- WebAssembly ekosisteminin gelişmesi için doğrudan teknik geri bildirim ve geliştirme katkısı sağlanıyor
Diğer Soru-Cevap
- Web tarayıcısında da mümkün mü? → Bazı WebKit tarayıcılarında WASM desteği yok; performans düşüşü ve uygulama karmaşıklığı nedeniyle şimdilik değerlendiriliyor
- WebGL ile uygulamak mümkün, ancak şu anda yatırımın karşılığı düşük görüldüğü için ertelendi
Özet
- Prime Video'nun Rust+WebAssembly tabanlı UI'ı yüksek performans, düşük giriş gecikmesi ve hızlı güncelleme hedeflerini aynı anda karşıladı
- Şirket içi UI SDK'sı ve ECS mimarisi, karmaşık UI davranışlarını verimli biçimde yönetiyor
- Rust'a geçiş kolay olmasa da sistematik tasarım ve geliştirme kültürüyle üretkenlik ve kararlılık birlikte sağlandı
- WebAssembly ekosistemi hâlâ gelişiyor, ancak gerçek servislerde yeterince uygulanabilir durumda
- Başarılı geçiş, kapsamlı prototipleme ve kademeli geçiş stratejisine dayanıyordu
2 yorum
State management kütüphanesini varsayılan olarak yanında getiren frontend'e kıyasla, oyunun tam da tüm durumların tüm durumlara dokunduğu bir alan olduğu için bunun biraz daha "olduğu gibi" yapıldığını düşünüyordum. Ama tersine, uygulama tarafında ECS kullanmak, her geliştiricinin ya da kurum içi bir kütüphanenin kalıplaştırılmış durum yönetimini kullanmasına benzer olacaktır; bu kısımda bunu nasıl ele aldıklarını merak ediyorum.
Oyun motorlarında görmeye alışık olduğumuz ECS'nin UI'a uygulanması; bu gerçekten biraz sıra dışı bir fikir. Bugün yine yeni bir şey öğrenmiş oldum.