મેચના દિવસની શરૂઆત ન થાય ત્યાં સુધી મારી ફૂટબોલ એપ બરાબર કામ કરતી હતી

મારી ફૂટબોલ એપ મેચડે શરૂ થાય ત્યાં સુધી બરાબર કામ કરતી હતી

શરૂઆતમાં ફૂટબોલ એપ બનાવવી સરળ લાગતી હતી.

મેં મેચો ફેચ (fetch) કરવા, ટીમો બતાવવા, સ્કોર બતાવવા અને દર થોડી સેકન્ડે રિફ્રેશ કરવાના આયોજન કર્યા હતા. ટેસ્ટિંગ દરમિયાન તે બરાબર કામ કરતું હતું. મેં બે ટેબ્સ અને થોડી સેમ્પલ મેચોનો ઉપયોગ કર્યો હતો. બધું બરાબર લાગતું હતું.

પછી પહેલો વ્યસ્ત મેચડે (matchday) આવ્યો.

સેંકડો વપરાશકર્તાઓએ એકસાથે એપ ખોલી. રિક્વેસ્ટ્સ (Requests) એકબીજા પર ઓવરલેપ થવા લાગી. કેટલાક સ્કોર પાછા જતાં હોય તેવું લાગતું હતું. એપ દરેક વિઝિટર માટે અલગથી સમાન ડેટા ફેચ કરતી હતી.

મેં શીખ્યું કે લાઈવ એપ એ માત્ર API સાથે જોડાયેલી વેબસાઇટ નથી. તે ડેટા સિંક્રનાઇઝેશન સિસ્ટમ છે.

અહીં મેં કરેલી ભૂલો અને મેં તેને કેવી રીતે સુધારી તે છે:

• માત્ર ક્લાયન્ટ-સાઇડ પોલિંગ (client-side 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) લાગુ કરો જો કોઈ મેચ લાઈવ ન હોય તો એપ રિફ્રેશ થવી જોઈએ નહીં. મેં મેચો પૂરી થાય ત્યારે પોલિંગ બંધ કરવા માટે એક ચેક ઉમેર્યો. આનાથી સર્વરના સંસાધનોનો મોટો બચાવ થાય છે.

• રેસ કન્ડિશન (race conditions) સુધારો ક્યારેક રિક્વેસ્ટ B, રિક્વેસ્ટ A પહેલા પાછી આવે છે. આના કારણે સ્કોર પાછા જતાં હોય તેવું લાગે છે. હું નવી રિક્વેસ્ટ શરૂ કરતા પહેલા જૂની રિક્વેસ્ટ રદ કરવા માટે AbortController નો ઉપયોગ કરું છું.

• એરરને યોગ્ય રીતે હેન્ડલ કરો જો રિફ્રેશ નિષ્ફળ જાય, તો ખાલી સ્ક્રીન ન બતાવો. છેલ્લો સફળ ડેટા દેખાતો રાખો. સ્કોર ન હોવા કરતાં પંદર સેકન્ડ જૂનો સ્કોર વધુ સારો છે.

એક ડેમોને માત્ર ડેટા બતાવવાની જરૂર હોય છે. વાસ્તવિક પ્રોડક્ટમાં કેશિંગ, સુરક્ષા અને સ્ટેટ (state) નું સંચાલન કરવું આવશ્યક છે.

શું તમે ક્યારેય લાઈવ એપ બનાવી છે? જ્યારે વાસ્તવિક વપરાશકર્તાઓ આવ્યા ત્યારે શું બગડ્યું?

સ્ત્રોત: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59