React.js का उपयोग करके स्मार्टटीवी के लिए विकसित करते समय समस्याएं और बारीकियां

मैं स्मार्टटीवी (टिज़ेन और वेबओएस) के लिए वीडियो सामग्री को देखने और हमें किन समस्याओं का सामना करने के साथ एक एप्लिकेशन विकसित करने में अपना अनुभव साझा करना चाहता हूं।

आधुनिक टीवी पर, जैसा कि हम जानते हैं, आप कुछ संसाधनों और सामग्री के साथ काम को सुविधाजनक बनाने के लिए विभिन्न एप्लिकेशन इंस्टॉल कर सकते हैं। ज्यादातर मामलों में, हुड के तहत ये एप्लिकेशन एक सामान्य ब्राउज़र हैं, टैली पर यह क्रोमियम है।

चूंकि यह एक ब्राउज़र है, इसलिए कुछ भी हमें विकास के लिए React.js का उपयोग करने से रोकता है, जिसने कुछ प्रदर्शन मुद्दों को प्रभावित किया है।

मैं इस बारे में बात नहीं करूंगा कि आपको कोड के उदाहरणों के साथ क्या करने की आवश्यकता है, मैं उन बारीकियों और निर्णयों के बारे में बात करूंगा जो किए गए हैं।

आइए मुख्य बिंदुओं के माध्यम से चलते हैं:

1. सीमित संसाधन
   
2. नेविगेशन
   
3. प्रदर्शन शैलियाँ और प्रतिपादन
   
4. वीडियो प्लेयर
   
5. बैकएंड
   

सीमित संसाधन

हमारे कंप्यूटर पर टीवी पर उतनी मेमोरी और प्रदर्शन नहीं है, इसलिए पहली समस्या संसाधन सीमा है।

उदाहरण के लिए, केवल उपयोग के लिए लगभग 250 मेगाबाइट को आवेदन के लिए आवंटित किया जाता है और हमें ऐसी समस्या का सामना करना पड़ता है जब सामग्री (चित्र, विवरण, रेटिंग) के साथ ग्रिड प्रदर्शित करते समय, स्मृति को सीमा पर खर्च किया जा सकता है, जब ग्रिड में केवल 1000 तत्व होते हैं और हम नीचे स्क्रॉल करते हैं, तो छवि का आकार बढ़ जाती है और बढ़ जाती है और कुछ बिंदु पर एप्लिकेशन उस शिलालेख के साथ दुर्घटनाग्रस्त हो जाता है जो मेमोरी बाहर चला गया है।

इस समस्या का समाधान प्रतिक्रिया-खिड़की है
यह डोम में खिड़की के बाहर सभी तत्वों को संग्रहीत नहीं करता है।

नेविगेशन

यदि कंप्यूटर पर हम साइट पर तत्वों पर क्लिक करने के लिए उपयोग किए जाते हैं, तो टेलीविज़न पर हम एक रिमोट कंट्रोल का उपयोग करते हैं जो माउस के रूप में भी उपयोग किया जा सकता है, लेकिन इनमें से अधिकांश बटन हैं। नेविगेशन समस्या यहाँ से निकलती है, कि हमें रिमोट कंट्रोल के बटन प्रेस को संसाधित करना होगा और कर्सर के बिना पूरे एप्लिकेशन को नेविगेट करना होगा, लेकिन साथ ही हमें "क्लिक" के साथ तत्वों पर क्लिक को संसाधित करने की आवश्यकता है।
एलजी और सैमसंग रीमोट्स के कुछ बटन कोड अलग-अलग होते हैं, साथ ही सामान्य कीबोर्ड से अलग होते हैं, इसलिए प्रत्येक प्लेटफॉर्म के लिए हमारे पास हार्डकोड बटन कोड होते हैं जिन्हें हम प्रोसेस करते हैं।

टिज़ेन उदाहरण
Tizen

export default {   KEY_0: 48,   KEY_1: 49,   KEY_2: 50,   KEY_3: 51,   KEY_4: 52,   KEY_5: 53,   KEY_6: 54,   KEY_7: 55,   KEY_8: 56,   KEY_9: 57,   KEY_UP: 38,   KEY_DOWN: 40,   KEY_LEFT: 37,   KEY_RIGHT: 39,   KEY_OK: 13,   KEY_BACK: 10009,   KEY_CHANNEL_UP: 427,   KEY_CHANNEL_DOWN: 428,   KEY_MEDIA_FAST_FORWARD: 417,   KEY_MEDIA_PAUSE: 19,   KEY_MEDIA_PLAY: 415,   KEY_MEDIA_PLAY_PAUSE: 10252,   KEY_MEDIA_REWIND: 412,   KEY_MEDIA_STOP: 413,   KEY_DEBUG_TOGGLE_CONSOLE: 403,   KEY_DEBUG_TOGGLE_QUICK_EDIT: 404,   KEY_DEBUG_SET_FAVOURITES: 405,   KEY_DEBUG_CLEAR_FAVOURITES: 406,   KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable   KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable }; 

WebOS

 export default {  KEY_0: 48,  KEY_1: 49,  KEY_2: 50,  KEY_3: 51,  KEY_4: 52,  KEY_5: 53,  KEY_6: 54,  KEY_7: 55,  KEY_8: 56,  KEY_9: 57,  KEY_UP: 38,  KEY_DOWN: 40,  KEY_LEFT: 37,  KEY_RIGHT: 39,  KEY_OK: 13,  KEY_BACK: 461,  KEY_MEDIA_FAST_FORWARD: 417,  KEY_MEDIA_PAUSE: 19,  KEY_MEDIA_PLAY: 415,  KEY_MEDIA_PLAY_PAUSE: 10252,  KEY_MEDIA_REWIND: 412,  KEY_MEDIA_STOP: 413,  KEY_CHANNEL_UP: 33,  KEY_CHANNEL_DOWN: 34,  KEY_DEBUG_SET_EMAIL: 403,  KEY_DEBUG_TOGGLE_CONSOLE: 404,  KEY_DEBUG_TOGGLE_QUICK_EDIT: 405,  KEY_DEBUG_SET_FAVOURITES: 406,  KEY_DEBUG_CLEAR_FAVOURITES: 407,  KEY_SHOW_REMOTE_POINTER: 1536,  KEY_HIDE_REMOTE_POINTER: 1537, }; 

कीबोर्ड

 export default {  KEY_0: 48,  KEY_1: 49,  KEY_2: 50,  KEY_3: 51,  KEY_4: 52,  KEY_5: 53,  KEY_6: 54,  KEY_7: 55,  KEY_8: 56,  KEY_9: 57,  KEY_UP: 38,  KEY_DOWN: 40,  KEY_LEFT: 37,  KEY_RIGHT: 39,  KEY_OK: 13,  KEY_BACK: 8, // backspace  KEY_MEDIA_FAST_FORWARD: 70, // f  KEY_MEDIA_PLAY_PAUSE: 80, // p  KEY_MEDIA_REWIND: 66, // b  KEY_MEDIA_STOP: 83, // s  KEY_CHANNEL_UP: 70, // f  KEY_CHANNEL_DOWN: 71, // g  KEY_DEBUG_SET_EMAIL: 81, // q  KEY_DEBUG_TOGGLE_CONSOLE: 87, // w  KEY_DEBUG_TOGGLE_QUICK_EDIT: 69, // e  KEY_DEBUG_SET_FAVOURITES: 88, // w  KEY_DEBUG_CLEAR_FAVOURITES: 82, // r  KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable  KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable }; 

जैसा कि आप देख सकते हैं, कीबोर्ड पर ये अक्षरों के साथ बटन हैं (टिप्पणियों में दर्शाया गया है)।

बटनों को क्लिक करने और माउस के साथ क्लिक करने के लिए नेविगेशन को संभालने के लिए, हमारे पास हमेशा एक घटना - माउस क्लिक का परिणाम होता था, इसलिए हमने सभी घटनाओं को उसी तरह संसाधित किया।

नेविगेशन की एक अन्य विशेषता फोकस है, प्रत्येक स्क्रीन पर फोकस में एक तत्व होना चाहिए, क्योंकि फोकस खो जाने के बाद, हम अब स्क्रीन को नेविगेट करने में सक्षम नहीं होंगे। प्रत्येक तत्व को फ़ोकस का फ़ोकस और आईडी गुण दिया गया था। नेविगेट करते समय, इसे हमेशा ध्यान में रखना आवश्यक था, लेकिन कभी-कभी, पूरी तरह से पिछली स्क्रीन की स्थिति को पुनर्स्थापित करने के लिए वापस लौटते समय एक आवश्यकता होती है, इसलिए नेविगेशन पूरी तरह से कस्टम लिखा गया था।

प्रदर्शन शैलियाँ और प्रस्तुतियाँ

CSS पर एनीमेशन टीवी पर धीरे-धीरे काम करता है, खासकर जब बहुत सारे DOM तत्व हैं जो एनिमेशन में आते हैं, तो आप एक सहज बदलाव नहीं, बल्कि एक स्लाइड शो देख सकते हैं। इस समस्या का एक समाधान कैनवास है। इस पर आकर्षित, एनीमेशन, नेविगेशन के दौरान प्रकाश व्यवस्था कई बार काम को गति देती है, लेकिन अगर आपके पास स्वचालन है, तो वे इस कार्यान्वयन को पसंद नहीं कर सकते हैं, क्योंकि उनके लिए चित्र से सामग्री की जांच करना मुश्किल है।

पृष्ठ पर बहुत सारे प्रतिपादन एक और दर्द है, सब कुछ धीमा करना शुरू हो जाता है, चिकोटी। इस प्रक्रिया को जितना संभव हो सके नियंत्रित करना आवश्यक था, जिसके बाद घटकों काComponentUpdate इस तरह दिखता है:



नतीजतन, हमने वेनिला जेएस पर एप्लिकेशन के संवेदनशील भागों को फिर से लिखा, यह तेज हो गया।

वीडियो प्लेयर

एलजी और सैमसंग के पास अलग-अलग वीडियो प्लेयर हैं, जो अतिरिक्त विकास कठिनाइयों को भी बनाता है। एलजी के लिए, सैमसंग एवीप्ले एसडीके के लिए एक वीडियो टैग का उपयोग किया जाता है। इसलिए, कार्यक्षमता में अंतर हैं, यह ध्यान में रखना होगा कि सभी विशेषताएं समान नहीं हैं और संस्करण से ओएस संस्करण तक भिन्न हो सकती हैं।

वीडियो शुरू करते समय लोड के साथ भी समस्याएं थीं - इसे कैशिंग, समानांतरकरण और अनुरोधों के प्रसंस्करण, प्रसंस्करण द्वारा हल किया गया था।

बैकएंड

बैकएंड की गति, प्रसंस्करण अनुरोधों की गति और उनकी संख्या काम की गति को प्रभावित करती है। FE पक्ष में डेटा प्रोसेसिंग की न्यूनतम मात्रा होनी चाहिए। यदि आपको बड़ी मात्रा में डेटा लोड करने की आवश्यकता है, तो आप वेब कर्मचारियों का उपयोग कर सकते हैं।