మ్యాచ్ డే మొదలయ్యే వరకు నా ఫుట్బాల్ యాప్ అద్భుతంగా పనిచేసింది
మొదట్లో ఫుట్బాల్ యాప్ను తయారు చేయడం సులభంగా అనిపించింది.
మ్యాచ్లను ఫెచ్ (fetch) చేయడం, టీమ్లను చూపించడం, స్కోర్లను చూపించడం మరియు ప్రతి కొన్ని సెకన్లకు ఒకసారి రిఫ్రెష్ చేయడం వంటి పనులను నేను ప్లాన్ చేసుకున్నాను. టెస్టింగ్ సమయంలో ఇది బాగానే పనిచేసింది. నేను రెండు ట్యాబ్లు మరియు కొన్ని శాంపిల్ మ్యాచ్లను ఉపయోగించాను. అంతా బాగున్నట్లు అనిపించింది.
ఆ తర్వాత మొదటి బిజీ మ్యాచ్ డే (matchday) వచ్చింది.
వందలాది మంది వినియోగదారులు ఒకేసారి యాప్ను ఓపెన్ చేశారు. రిక్వెస్ట్లు ఒకదానిపై ఒకటి ఓవర్ల్యాప్ అయ్యాయి. కొన్ని స్కోర్లు వెనక్కి వెళ్తున్నట్లు అనిపించాయి. ప్రతి విజిటర్ కోసం యాప్ విడివిడిగా ఒకే డేటాను ఫెచ్ చేస్తోంది.
లైవ్ యాప్ అంటే కేవలం ఒక APIకి కనెక్ట్ చేయబడిన వెబ్సైట్ మాత్రమే కాదని నేను తెలుసుకున్నాను. అది ఒక డేటా సింక్రొనైజేషన్ సిస్టమ్ (data synchronization system).
నేను చేసిన తప్పులు మరియు వాటిని నేను ఎలా సరిదిద్దుకున్నానో ఇక్కడ ఉన్నాయి:
క్లయింట్-సైడ్ మాత్రమే పోలింగ్ (polling) చేయడాన్ని నివారించండి నా మొదటి వెర్షన్లో ప్రతి బ్రౌజర్ ప్రతి ఐదు సెకన్లకు డేటాను రిక్వెస్ట్ చేసేది. 1 యూజర్ = నిమిషానికి 12 రిక్వెస్ట్లు. 1,000 యూజర్లు = నిమిషానికి 12,000 రిక్వెస్ట్లు. చాలా రిక్వెస్ట్లు సరిగ్గా ఒకే డేటాను అడుగుతున్నాయి.
సర్వర్-సైడ్ రిక్వెస్ట్లను ఉపయోగించండి నేను API కాల్స్ను సర్వర్కు మార్చాను. ఇది మీకు వీటిపై నియంత్రణను ఇస్తుంది: • API క్రెడెన్షియల్స్ (credentials) • క్యాషింగ్ (Caching) • రేట్ లిమిటింగ్ (Rate limiting) • ఎర్రర్ హ్యాండ్లింగ్ (Error handling) • రెస్పాన్స్ ఫార్మాటింగ్ (Response formatting)
క్లయింట్-సైడ్ కోడ్లో ఎప్పుడూ కీలను (keys) ఉపయోగించకండి. ఎవరైనా మీ కీని దొంగిలిస్తే అది ప్రమాదకరం మరియు ఖర్చుతో కూడుకున్నది.
మ్యాపింగ్ లేయర్ను (mapping layer) సృష్టించండి నేను రా (raw) API డేటాను నేరుగా నా కాంపోనెంట్లకు పంపడం ఆపివేశాను. ఒకవేళ ప్రొవైడర్ ఫీల్డ్ పేరును మార్చితే, నా UI పాడైపోయేది. ఇప్పుడు, నేను ప్రొవైడర్ డేటాను మొదట నా స్వంత అంతర్గత ఫార్మాట్లోకి మ్యాప్ చేస్తాను. ఇది నా UIని స్థిరంగా ఉంచుతుంది.
వేగం కోసం సర్వర్ కాంపోనెంట్స్ (Server Components) ఉపయోగించండి లోడింగ్ స్క్రీన్ను చూపించడానికి బదులుగా, నేను ప్రారంభ మ్యాచ్లను సర్వర్లోనే లోడ్ చేస్తాను. వినియోగదారుడు వెంటనే కంటెంట్ను చూడగలరు.
స్మార్ట్ పోలింగ్ (smart polling) అమలు చేయండి లైవ్ మ్యాచ్లు లేనప్పుడు యాప్ రిఫ్రెష్ అవ్వకూడదు. మ్యాచ్లు ముగిసినప్పుడు పోలింగ్ను ఆపడానికి నేను ఒక చెక్ను జోడించాను. ఇది సర్వర్ వనరులను (resources) భారీగా ఆదా చేస్తుంది.
రేస్ కండిషన్స్ (race conditions) సరిచేయండి కొన్నిసార్లు రిక్వెస్ట్ B, రిక్వెస్ట్ A కంటే ముందే తిరిగి వస్తుంది. దీనివల్ల స్కోర్లు వెనక్కి వెళ్తున్నట్లు కనిపిస్తాయి. కొత్త రిక్వెస్ట్లను ప్రారంభించే ముందు పాత రిక్వెస్ట్లను రద్దు చేయడానికి నేను
AbortControllerని ఉపయోగిస్తాను.ఎర్రర్లను సున్నితంగా (gracefully) హ్యాండిల్ చేయండి ఒకవేళ రిఫ్రెష్ విఫలమైతే, ఖాళీ స్క్రీన్ను చూపించకండి. చివరిసారి విజయవంతంగా వచ్చిన డేటాను కనిపించేలా ఉంచండి. పదిహేను సెకన్ల క్రితం నా స్కోర్ ఉండటం, అసలు స్కోర్ లేకపోవడం కంటే మేలు.
డెమో కేవలం డేటాను ప్రదర్శించడమే చేయాలి. కానీ ఒక నిజమైన ప్రొడక్ట్ క్యాషింగ్, సెక్యూరిటీ మరియు స్టేట్ను (state) నిర్వహించాలి.
మీరు ఎప్పుడైనా లైవ్ యాప్ను నిర్మించారా? నిజమైన వినియోగదారులు వచ్చినప్పుడు ఏది విఫలమైంది?
మూలం: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59