𝗠𝘆 𝗙𝗼𝗼𝘁𝗯𝗮𝗹𝗹 𝗔𝗽𝗽 𝗪𝗼𝗿𝗸𝗲𝗱 𝗣𝗲𝗿𝗳𝗲𝗰𝘁𝗹𝘆 𝗨𝗻𝘁𝗶𝗹 𝗠𝗮𝘁𝗰𝗵𝗱𝗮𝘆 𝗦𝘁𝗮𝗿𝘁𝗲𝗱 मेरा फुटबॉल ऐप मैचडे शुरू होने तक बिल्कुल सही काम कर रहा था
शुरुआत में फुटबॉल ऐप बनाना आसान लग रहा था।
मैंने मैच फेच करने, टीमें दिखाने, स्कोर दिखाने और हर कुछ सेकंड में रिफ्रेश करने की योजना बनाई थी। टेस्टिंग के दौरान यह सही काम कर रहा था। मैंने दो टैब और कुछ सैंपल मैचों का उपयोग किया था। सब कुछ ठीक लग रहा था।
फिर पहला व्यस्त मैचडे आया।
सैकड़ों उपयोगकर्ताओं ने एक साथ ऐप खोला। रिक्वेस्ट्स (Requests) एक-दूसरे के ऊपर ओवरलैप होने लगीं। कुछ स्कोर पीछे की ओर जाते हुए प्रतीत हुए। ऐप हर एक विज़िटर के लिए अलग-अलग वही डेटा फेच कर रहा था।
मैंने सीखा कि एक लाइव ऐप केवल API से जुड़ी वेबसाइट नहीं है। यह एक डेटा सिंक्रोनाइज़ेशन सिस्टम (data synchronization system) है।
यहाँ वे गलतियाँ हैं जो मैंने कीं और मैंने उन्हें कैसे ठीक किया:
केवल क्लाइंट-साइड पोलिंग (client-side polling) से बचें मेरे पहले वर्शन में हर ब्राउज़र हर पांच सेकंड में डेटा की रिक्वेस्ट कर रहा था। 1 यूजर = प्रति मिनट 12 रिक्वेस्ट। 1,000 यूजर = प्रति मिनट 12,000 रिक्वेस्ट। ज़्यादातर रिक्वेस्ट्स में बिल्कुल एक जैसा डेटा माँगा जा रहा था।
सर्वर-साइड रिक्वेस्ट का उपयोग करें मैंने API कॉल्स को सर्वर पर स्थानांतरित कर दिया। इससे आपको इन चीज़ों पर नियंत्रण मिलता है: • API credentials • Caching • Rate limiting • Error handling • Response formatting
क्लाइंट-साइड कोड में कभी भी keys का उपयोग न करें। यदि कोई आपकी key चुरा लेता है, तो यह असुरक्षित और महंगा है।
एक मैपिंग लेयर (mapping layer) बनाएँ मैंने अपने कंपोनेंट्स को सीधे रॉ API डेटा पास करना बंद कर दिया। यदि प्रोवाइडर किसी फ़ील्ड का नाम बदल देता, तो मेरा UI टूट जाता। अब, मैं प्रोवाइडर डेटा को पहले अपने स्वयं के इंटरनल फॉर्मेट में मैप करता हूँ। इससे मेरा UI स्थिर रहता है।
स्पीड के लिए Server Components का उपयोग करें लोडिंग स्क्रीन दिखाने के बजाय, मैं सर्वर पर शुरुआती मैच लोड करता हूँ। यूजर को तुरंत कंटेंट दिखाई देता है।
स्मार्ट पोलिंग (smart polling) लागू करें यदि कोई मैच लाइव नहीं है, तो ऐप को रिफ्रेश नहीं होना चाहिए। मैंने मैच खत्म होने पर पोलिंग रोकने के लिए एक चेक जोड़ा। इससे सर्वर संसाधनों की भारी बचत होती है।
रेस कंडीशंस (race conditions) को ठीक करें कभी-कभी Request B, Request A से पहले वापस आती है। इससे स्कोर ऐसे लगते हैं जैसे वे पीछे की ओर जा रहे हों। मैं नए रिक्वेस्ट शुरू करने से पहले पुराने रिक्वेस्ट को रद्द करने के लिए AbortController का उपयोग करता हूँ।
एरर्स को शालीनता से हैंडल करें (Handle errors gracefully) यदि रिफ्रेश विफल हो जाता है, तो खाली स्क्रीन न दिखाएं। पिछले सफल डेटा को दिखाई देने दें। बिना स्कोर के मुकाबले पंद्रह सेकंड पुराना स्कोर बेहतर है।
एक डेमो को केवल डेटा दिखाने की आवश्यकता होती है। एक वास्तविक उत्पाद को caching, security, और state को मैनेज करना चाहिए।
क्या आपने कोई लाइव ऐप बनाया है? जब वास्तविक उपयोगकर्ता आए तो क्या चीज़ खराब हुई?
Source: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59