𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀
SingleSPA કામ કરે છે. અમે એક જ પેજ પર React, Vue, અને Angular એપ્સ ચલાવીએ છીએ. તેઓ સ્વતંત્ર રીતે લોડ થાય છે. આ ફ્રેમવર્ક પરિણામ આપે છે.
સમસ્યા ફ્રેમવર્કની નથી. સમસ્યા તેની આસપાસના ઇકોસિસ્ટમની છે.
ડિસ્ટ્રિબ્યુટેડ આર્કિટેક્ચરમાં, તમારે માલિકી (ownership) ની જરૂર છે. તમારે ઓડિટિંગની જરૂર છે. તમારે ગવર્નન્સની જરૂર છે. SingleSPA આ જરૂરિયાતોને સ્પષ્ટ બનાવે છે કારણ કે import map એ સંકલનનું કેન્દ્રીય બિંદુ છે.
Import map તમારા root config માં હોય છે. તે એક JSON ફાઇલ છે. તે દરેક micro frontend (MFE) ને જણાવે છે કે React નું કયું વર્ઝન લોડ કરવું. સૈદ્ધાંતિક રીતે, તે સત્યનો સ્ત્રોત (source of truth) છે. વ્યવહારમાં, તેની માલિકી કોઈની પાસે નથી.
દરેક ટીમ પોતાની MFE ની માલિકી ધરાવે છે. પરંતુ મેપની માલિકી કોઈની પાસે નથી.
આ સમસ્યાઓ ઊભી કરે છે:
- ટીમો MFE ને નિવૃત્ત (retire) કરે છે, પરંતુ તેની એન્ટ્રી મેપમાં રહી જાય છે.
- નવી ડિપેન્ડન્સીઝ (dependencies) આવે છે, પરંતુ કોઈ તેને મેપમાં ઉમેરતું નથી.
- તમે તેને અવગણતા રહો છો ત્યારે મેપ બગડી જાય છે (rots).
અમને અમારા મેપમાં એક એવું MFE મળ્યું જે આઠ મહિનાથી ડિપ્લોય કરવામાં આવ્યું નહોતું. તે બંધ થઈ ગયું હતું, છતાં તે પ્રોડક્શનમાં લોડ થઈ રહ્યું હતું. કોઈએ ધ્યાન આપ્યું નહીં કારણ કે કોઈ તેને જોઈ રહ્યું નહોતું.
તમે બિલ્ડ દરમિયાન મેપને ઓટો-જનરેટ કરવા વિશે વિચારી શકો છો. અમે તે પ્રયત્ન કર્યો હતો. તે એક નવી સમસ્યા ઊભી કરે છે: merge conflicts. જો ચૌદ ટીમો દરેક ડિપ્લોય દરમિયાન એક જ JSON ફાઇલમાં લખવાનો પ્રયાસ કરે, તો તમારી CI પાઇપલાઇન અસ્તવ્યસ્ત બની જાય છે.
બીજી સમસ્યા drift ની છે. પેટર્ન સરળ છે: તમારા કોન્ફિગમાં React ને an external તરીકે માર્ક કરો. Import map ને તેને સર્વ કરવા દો. આ ડુપ્લીકેટ બંડલ્સને અટકાવે છે.
પરંતુ પછી કોઈ તેમના કોડને રિફેક્ટર (refactor) કરે છે. તેઓ અજાણતામાં React ને ફરીથી તેમના MFE માં બંડલ કરી દે છે. બિલ્ડ પાસ થાય છે. ટેસ્ટ પાસ થાય છે. ડિપ્લોય ગ્રીન (green) થાય છે.
તમને ત્યારે જ ખબર પડે છે જ્યારે:
- બંડલ સાઈઝ અચાનક વધી જાય.
- વર્ઝન મિસમેચ (version mismatch) ને કારણે કોઈ કમ્પોનન્ટ બગડી જાય.
- તમે Chrome DevTools માં React બે વાર લોડ થતું જુઓ.
અમે અમારી સિસ્ટમનું ઓડિટ કર્યું અને અમને બે એવા MFEs મળ્યા જે પોતાનું React મોકલી રહ્યા હતા. તેમની બિલ્ડ્સ ગ્રીન હતી. તેમને ખબર જ નહોતી કે તેઓ નિયમોનું પાલન (compliance) કરી રહ્યા નથી.
Import map અને તમારી package.json ફાઇલો બે અલગ ઇનપુટ્સ છે. તેઓ શાંતિથી એકબીજાથી અલગ થઈ જાય છે (drift apart).
CI ચેક ડુપ્લીકેટ બંડલ્સ શોધી શકે છે. તે વર્ઝન મિસમેચ શોધી શકતું નથી. જો MFE A માં React 18.2 વપરાતું હોય અને MFE B માં 18.3 વપરાતું હોય, તો બિલ્ડ ફેલ થશે નહીં. પરંતુ તમારા શેર કરેલા કમ્પોનન્ટ્સ રનટાઇમ (runtime) પર બગડી જશે.
જ્યારે અમારે React અપડેટ કરવાની જરૂર હોય છે, ત્યારે અમારે ચૌદ અલગ-અલગ રિપોઝીટરીઝમાં grep કરવા માટે કલાકો બગાડવા પડે છે. આ બિનકાર્યક્ષમ છે.
અમે આને સુધારવા માટે એક ટૂલ બનાવ્યું છે. તે બે કામ કરે છે:
- તે દરેક MFE ના package.json માંથી એક વર્ઝન મેટ્રિક્સ (version matrix) બનાવે છે.
- તે તે મેટ્રિક્સની તમારી import map સાથે સરખામણી કરે છે.
આ ટૂલ તમને તફાવત (gap) બતાવે છે. તે તમને બતાવે છે કે કઈ ટીમો નિયમોનું પાલન (compliant) કરી રહી છે અને કઈ ટીમો અલગ પડી ગઈ છે (drifted). તે જૂની એન્ટ્રીઓ (stale entries) અને તૂટેલી URL પણ શોધી કાઢે છે. અમે તેને દર સોમવારે સવારે ચલાવીએ છીએ. તેને માત્ર 12 સેકન્ડ લાગે છે.
અમારો પાઠ ટેકનિકલ નહોતો. દરેક ડિસ્ટ્રિબ્યુટેડ આર્કિટેક્ચર (distributed architecture) ને શેર કરેલા ઇન્ફ્રાસ્ટ્રક્ચર માટે એક માલિકની જરૂર હોય છે. SingleSPA માં, import map એ ઇન્ફ્રાસ્ટ્રક્ચર છે. તેને માત્ર એક શેર કરેલી ફાઇલ તરીકે ન ગણો. તેને એક મેનેજ્ડ એસેટ (managed asset) તરીકે ગણો.
તમે આને કેવી રીતે હેન્ડલ કરો છો? શું તમારી પાસે import map માટે કોઈ માલિક છે? અથવા શું તમે તમારા સોમવારની સવાર ફાઇલો grepping કરવામાં વિતાવો છો?
સ્ત્રોત: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe