Amazon Prime Video ने लिविंग रूम डिवाइस UI को Rust + WebAssembly से पूरी तरह फिर से बनाया

• लिविंग रूम डिवाइसों के लिए UI को Rust और WebAssembly के आधार पर पूरी तरह पुनर्निर्मित करने का मामला
• अलग-अलग प्रदर्शन स्तर वाले डिवाइसों पर भी उच्च प्रदर्शन और कम input latency हासिल करने के लिए आर्किटेक्चर डिज़ाइन किया गया
• React-आधारित संरचना से हटकर सिर्फ Rust के लिए UI SDK खुद विकसित किया, जिससे उच्च उत्पादकता मिली
• Entity-Component-System (ECS) आधारित आर्किटेक्चर के जरिए कोड की जटिलता और प्रदर्शन का प्रबंधन
• WebAssembly और Rust के उपयोग से जुड़े फायदे, नुकसान और समस्याओं का ईमानदार विश्लेषण

---

Prime Video UI को Rust और WebAssembly से दोबारा बनाने की वजह

• Amazon के सामने यह चुनौती थी कि वही Prime Video ऐप अलग-अलग लिविंग रूम डिवाइसों (कंसोल, सेट-टॉप बॉक्स, स्ट्रीमिंग स्टिक, TV आदि) पर चलाना है
• अलग-अलग क्षमता वाले डिवाइसों पर एकसमान user experience देने के लिए उच्च-प्रदर्शन वाला UI engine ज़रूरी था
• पहले React(TypeScript), JavaScript, C++, WebAssembly और Rust का मिश्रित tech stack इस्तेमाल किया जा रहा था
• JavaScript की धीमी execution speed और अपडेट की कठिनाई के कारण पूरी तरह Rust पर जाने का फैसला लिया गया
• WebAssembly से ऐप अपडेट आसान हो जाते हैं, और Rust performance optimization के लिए फायदेमंद है

लिविंग रूम डिवाइसों में विकास की मुख्य चुनौतियाँ

• PS5 जैसे high-performance डिवाइसों से लेकर low-power USB stick तक अलग-अलग performance specs को संभालना ज़रूरी था
• हर डिवाइस के लिए अलग टीम बनाए बिना single codebase से विकास करना था
• ज़्यादातर डिवाइसों में app store नहीं होता, सिर्फ firmware update संभव होता है, इसलिए native code अपडेट करना मुश्किल है
• UI को बार-बार अपडेट करना हो तो JavaScript और WebAssembly आधारित कोड अधिक उपयोगी है
• उच्च प्रदर्शन और तेज़ अपडेट cycle के बीच संतुलन के रूप में Rust + WebAssembly का संयोजन चुना गया

पुरानी आर्किटेक्चर और नई Rust-आधारित UI आर्किटेक्चर की तुलना

• पुरानी आर्किटेक्चर की संरचना इस प्रकार थी:
  • React में UI logic लिखा जाता था, और Rust(WebAssembly) low-level UI engine को संभालता था
  • React → message bus → WebAssembly UI engine → C++ rendering backend
• input latency की समस्या हल करने के लिए पूरा business logic Rust UI SDK में migrate किया गया
• नई आर्किटेक्चर:
  • UI SDK से लेकर rendering तक सब कुछ Rust में बना
  • message bus हटा दिया गया, और पूरा processing flow WebAssembly के भीतर चलाया गया
  • कोड को WebAssembly में compile करके TV तक भेजा जाता है, जिससे पहले की तुलना में update speed और responsiveness बेहतर हुई

नए Rust UI SDK के मुख्य घटक

• React जैसे composable कॉन्सेप्ट को अपनाया गया → दोबारा इस्तेमाल होने वाले UI building blocks
• Signal और Effect आधारित reactive UI system
  • Signal: मान बदलने पर संबंधित Effect trigger होता है
  • Memo: केवल तब प्रतिक्रिया देता है जब मान पहले से अलग हो
• UI hierarchy को compose! macro के जरिए परिभाषित किया गया
• UI elements, Widget (बिल्ट-इन कंपोनेंट) और Composables (user-defined संरचना) से मिलकर बने हैं
• Entity-Component-System(ECS) आर्किटेक्चर का उपयोग:
  • Entity: ID
  • Component: property data (जैसे Layout, RenderInfo, Text)
  • System: ऐसे functions जो किसी खास Component संयोजन पर logic चलाते हैं

ECS सिस्टम की संरचना और काम करने का तरीका

• हर सिस्टम को कुछ खास कंपोनेंट संयोजन चाहिए होते हैं, और उसी आधार पर UI update प्रोसेस किया जाता है
• उदाहरण:
  • Resource Management System: image component → GPU upload → RenderInfo update
  • Layout System: अलग-अलग layout-संबंधित कंपोनेंट का हिसाब
  • Rendering System: RenderInfo के आधार पर वास्तविक स्क्रीन output
• इस संरचना से अलग-अलग पेजों को React से Rust में धीरे-धीरे migrate करना संभव हुआ
• JavaScript-आधारित और Rust-आधारित पेजों का सह-अस्तित्व और ट्रांज़िशन आसानी से हो सका

अच्छे नतीजे और फायदे

• JavaScript/React डेवलपर्स भी Rust UI SDK पर उत्पादकता घटे बिना सफलतापूर्वक शिफ्ट हो गए
• UI SDK की परिचित संरचना की वजह से Rust के नए डेवलपर्स भी जल्दी अनुकूल हो सके
• layout animation, तेज़ screen transition जैसी वे सुविधाएँ भी संभव हुईं जो पहले नहीं थीं
• आंतरिक development tools (resource manager, layout inspector आदि) भी Rust के आधार पर तेज़ी से बनाए जा सके
• 250ms की input latency को घटाकर 33ms तक लाया गया (low-end डिवाइसों के आधार पर)

कठिनाइयाँ और तकनीकी सीमाएँ

• WebAssembly System Interface(WASI) अभी भी विकसित हो रहा ecosystem है, इसलिए Rust अपडेट के समय पुराने कोड के टूटने की संभावना रहती है
• WebAssembly में panic होने पर पूरा ऐप बंद हो जाता है → स्थिरता सुनिश्चित करना कठिन
  • JavaScript के विपरीत exception handling सीमित है → Result type का सक्रिय उपयोग ज़रूरी
  • बाहरी लाइब्रेरी पर निर्भरता होने पर panic-free implementation को बढ़ावा देना पड़ता है
• browser environment में WebAssembly और कुछ rendering API समर्थित नहीं हैं, इसलिए web client पर इसे लागू नहीं किया गया

Bytecode Alliance और ecosystem में योगदान

• Amazon, Bytecode Alliance का सदस्य होने के नाते WASI standardization और संबंधित फीचर सुधार में सक्रिय भागीदारी कर रहा है
• इस्तेमाल हो रहा WebAssembly Micro Runtime, C-आधारित है, और Rust-आधारित Wasmtime पर भी साथ में विचार किया जा रहा है
• WebAssembly ecosystem के विकास के लिए सीधा technical feedback और development contribution दिया जा रहा है

अन्य Q&A

• क्या यह web browser में भी संभव है? → कुछ WebKit browser में WASM सपोर्ट नहीं है, प्रदर्शन घटता है, और implementation जटिल है, इसलिए अभी विचाराधीन है
• WebGL से implementation संभव है, लेकिन अभी निवेश के मुकाबले लाभ कम दिखने के कारण इसे टाला गया है

सारांश

• Prime Video का Rust+WebAssembly आधारित UI उच्च प्रदर्शन, कम input latency और तेज़ updates — इन तीनों जरूरतों को पूरा करता है
• खुद का UI SDK और ECS आर्किटेक्चर जटिल UI behavior को कुशलता से प्रबंधित करते हैं
• Rust अपनाना आसान नहीं है, लेकिन व्यवस्थित डिज़ाइन और development culture के जरिए उत्पादकता और स्थिरता दोनों हासिल की गईं
• WebAssembly ecosystem अभी विकसित हो रहा है, लेकिन real-world service में यह काफी हद तक व्यावहारिक है
• इसकी सफल अपनाने की प्रक्रिया गहन prototyping और क्रमिक migration strategy पर आधारित थी

[seunggi]

State management लाइब्रेरी को आधार बनाकर चलने वाले frontend की तुलना में, मुझे लगता रहा है कि गेम ही ऐसी चीज़ है जहाँ हर state दूसरी हर state को छूती है, इसलिए उसे बस सीधे-सादे तरीके से किया जाता होगा। लेकिन उल्टा अगर application app में ECS इस्तेमाल किया जाए, तो वह शायद pattern-based state management को हर developer द्वारा या किसी internal library के इस्तेमाल से संभालने जैसा होगा; ऐसे हिस्सों को इन्होंने कैसे किया, यह जानने की जिज्ञासा है।

[y15un]

गेम इंजन में ही दिखने वाला ECS को UI पर लागू करना—यह तो काफ़ी नया और दिलचस्प विचार है। आज फिर कुछ नया सीखने को मिला।