माझे फुटबॉल ॲप मॅचडे सुरू होईपर्यंत अगदी व्यवस्थित काम करत होते
सुरुवातीला फुटबॉल ॲप बनवणे सोपे वाटले.
मी मॅचेस मिळवणे (fetch), संघ दाखवणे, स्कोअर दाखवणे आणि दर काही सेकंदांनी रिफ्रेश करणे असे नियोजन केले होते. टेस्टिंग दरम्यान ते व्यवस्थित चालले. मी दोन टॅब आणि काही नमुना मॅचेस वापरल्या होत्या. सर्व काही ठीक दिसत होते.
मग पहिला व्यस्त मॅचडे (matchday) आला.
शेकडो वापरकर्त्यांनी एकाच वेळी ॲप उघडले. विनंत्या (Requests) एकमेकांवर ओव्हरलॅप होऊ लागल्या. काही स्कोअर मागे जात असल्यासारखे वाटू लागले. ॲप प्रत्येक स्वतंत्र व्हिजिटरसाठी तेच डेटा वेगळ्या पद्धतीने फेच (fetch) करत होते.
मला समजले की, लाइव्ह ॲप म्हणजे केवळ API शी जोडलेली वेबसाइट नसते. ते एक डेटा सिंक्रोनाइझेशन सिस्टम (data synchronization system) असते.
मी केलेल्या चुका आणि त्या मी कशा सुधारल्या ते खालीलप्रमाणे आहेत:
केवळ क्लायंट-साइड पोलिंग (client-side polling) टाळा माझ्या पहिल्या व्हर्जनमध्ये प्रत्येक ब्राउझर दर पाच सेकंदांनी डेटाची विनंती करत होता. 1 वापरकर्ता = मिनिटाला 12 विनंत्या. 1,000 वापरकर्ते = मिनिटाला 12,000 विनंत्या. बहुतेक विनंत्या अगदी तोच डेटा मागत होत्या.
सर्व्हर-साइड विनंत्या (server-side requests) वापरा मी API कॉल्स सर्व्हरवर हलवले. यामुळे तुम्हाला खालील गोष्टींवर नियंत्रण मिळते: • API credentials • Caching • Rate limiting • Error handling • Response formatting
क्लायंट-साइड कोडमध्ये कधीही keys वापरू नका. जर कोणी तुमची key चोरली, तर ते असुरक्षित आणि खर्चिक ठरू शकते.
मॅपिंग लेअर (mapping layer) तयार करा मी थेट API डेटा माझ्या कंपोनंट्सना पास करणे थांबवले. जर डेटा प्रोव्हायडरने एखाद्या फील्डचे नाव बदलले, तर माझे UI बिघडत होते. आता, मी प्रोव्हायडरचा डेटा प्रथम माझ्या स्वतःच्या अंतर्गत फॉरमॅटमध्ये मॅप करतो. यामुळे माझे UI स्थिर राहते.
वेगासाठी Server Components वापरा लोडिंग स्क्रीन दाखवण्याऐवजी, मी सुरुवातीचे मॅचेस सर्व्हरवर लोड करतो. वापरकर्त्याला मजकूर (content) लगेच दिसतो.
स्मार्ट पोलिंग (smart polling) लागू करा जर कोणतेही मॅच लाईव्ह नसतील, तर ॲपने रिफ्रेश होऊ नये. मॅचेस संपल्यावर पोलिंग थांबवण्यासाठी मी एक चेक जोडला आहे. यामुळे सर्व्हर रिसोर्सेसची मोठी बचत होते.
Race conditions सुधारा कधीकधी विनंती B ही विनंती A च्या आधी परत येते. यामुळे स्कोअर मागे जात असल्यासारखे वाटतात. नवीन विनंत्या सुरू करण्यापूर्वी जुन्या विनंत्या रद्द करण्यासाठी मी AbortController वापरतो.
एरर व्यवस्थित हाताळा (Handle errors gracefully) जर रिफ्रेश अयशस्वी झाले, तर रिकामी स्क्रीन दाखवू नका. शेवटचा यशस्वी डेटा दृश्यमान ठेवा. पंधरा सेकंद जुना स्कोअर असणे हे स्कोअर नसण्यापेक्षा केव्हाही चांगले.
डेमोसाठी फक्त डेटा दाखवणे पुरेसे असते. परंतु, वास्तविक उत्पादनासाठी कॅशिंग, सुरक्षा आणि स्टेट (state) व्यवस्थापित करणे आवश्यक आहे.
तुम्ही कधी लाइव्ह ॲप बनवले आहे का? जेव्हा वास्तविक वापरकर्ते आले तेव्हा काय बिघडले?
स्रोत: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59