𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀
SingleSPA പ്രവർത്തിക്കുന്നു. ഞങ്ങൾ ഒരു പേജിൽ തന്നെ React, Vue, Angular ആപ്പുകൾ പ്രവർത്തിപ്പിക്കുന്നു. അവ സ്വതന്ത്രമായി ലോഡ് ആകുന്നു. ഈ ഫ്രെയിംവർക്ക് മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.
പ്രശ്നം ഫ്രെയിംവർക്കല്ല. പ്രശ്നം അതിനു ചുറ്റുമുള്ള ഇക്കോസിസ്റ്റമാണ് (ecosystem).
ഒരു ഡിസ്ട്രിബ്യൂട്ടഡ് ആർക്കിടെക്ചറിൽ (distributed architecture), നിങ്ങൾക്ക് ഉടമസ്ഥാവകാശം (ownership), ഓഡിറ്റിംഗ് (auditing), ഗവേണൻസ് (governance) എന്നിവ ആവശ്യമാണ്. SingleSPA ഈ ആവശ്യങ്ങളെ ദൃശ്യമാക്കുന്നു, കാരണം ഇംപോർട്ട് മാപ്പ് (import map) എന്നത് ഏകോപനത്തിന്റെ ഒരു കേന്ദ്രബിന്ദുവാണ്.
ഇംപോർട്ട് മാപ്പ് നിങ്ങളുടെ റൂട്ട് കോൺഫിഗിൽ (root config) ആണ് ഇരിക്കുന്നത്. ഇതൊരു JSON ഫയലാണ്. ഏത് വേർഷൻ React ആണ് ലോഡ് ചെയ്യേണ്ടതെന്ന് ഇത് ഓരോ മൈക്രോ ഫ്രണ്ട് എൻഡ് (MFE)-നോടും പറയുന്നു. സിദ്ധാന്തപരമായി (In theory), ഇതൊരു 'source of truth' ആണ്. എന്നാൽ പ്രായോഗികമായി (In practice), ഇതിന് ഉടമസ്ഥതയുള്ള ആരും തന്നെയില്ല.
ഓരോ ടീമിനും അവരുടെ സ്വന്തം MFE-യുടെ ഉടമസ്ഥാവകാശമുണ്ട്. എന്നാൽ മാപ്പിന് ആരും ഉടമസ്ഥതയുള്ളവരല്ല.
ഇത് ചില പ്രശ്നങ്ങൾ ഉണ്ടാക്കുന്നു:
- ടീമുകൾ ഒരു MFE നിർത്തലാക്കുന്നു (retire), പക്ഷേ അതിന്റെ എൻട്രി മാപ്പിൽ തന്നെ അവശേഷിക്കുന്നു.
- പുതിയ ഡിപെൻഡൻസികൾ (dependencies) വരുന്നു, പക്ഷേ ആരും അവ മാപ്പിൽ ചേർക്കുന്നില്ല.
- നിങ്ങൾ ശ്രദ്ധിക്കാതെ വരുമ്പോൾ മാപ്പ് കാലഹരണപ്പെടുന്നു (rots).
എട്ട് മാസമായി ഡിപ്ലോയ് ചെയ്യാത്ത ഒരു MFE ഞങ്ങളുടെ മാപ്പിൽ ഞങ്ങൾ കണ്ടെത്തി. അത് ഉപയോഗശൂന്യമായിരുന്നു, എങ്കിലും പ്രൊഡക്ഷനിൽ (production) അത് ഇപ്പോഴും ലോഡ് ചെയ്തുകൊണ്ടിരിക്കുകയായിരുന്നു. ആരും ശ്രദ്ധിക്കാത്തതുകൊണ്ട് ആരും അത് കണ്ടില്ല.
ബിൽഡ് സമയത്ത് മാപ്പ് ഓട്ടോമാറ്റിക്കായി ജനറേറ്റ് ചെയ്യുന്നതിനെക്കുറിച്ച് നിങ്ങൾ ചിന്തിച്ചേക്കാം. ഞങ്ങൾ അത് പരീക്ഷിച്ചു നോക്കി. അത് പുതിയൊരു പ്രശ്നത്തിന് കാരണമാകുന്നു: മെർജ് കോൺഫ്ലിക്റ്റുകൾ (merge conflicts). പതിനാല് ടീമുകളും ഓരോ ഡിപ്ലോയ്മെന്റ് സമയത്തും ഒരേ JSON ഫയലിൽ എഴുതാൻ ശ്രമിച്ചാൽ, നിങ്ങളുടെ CI പൈപ്പ്ലൈൻ (CI pipeline) കുഴപ്പത്തിലാകും.
മറ്റൊരു പ്രശ്നം 'ഡ്രിഫ്റ്റ്' (drift) ആണ്. ഇതിന്റെ രീതി ലളിതമാണ്: നിങ്ങളുടെ കോൺഫിഗറിൽ React-നെ ഒരു 'external' ആയി അടയാളപ്പെടുത്തുക. ഇംപോർട്ട് മാപ്പ് അത് നൽകട്ടെ. ഇത് ഡ്യൂപ്ലിക്കേറ്റ് ബണ്ടിലുകൾ (duplicate bundles) ഒഴിവാക്കാൻ സഹായിക്കുന്നു.
എന്നാൽ പിന്നീട് ആരെങ്കിലും അവരുടെ കോഡ് റീഫാക്ടർ (refactor) ചെയ്യുന്നു. അവർ അബദ്ധവശാൽ React വീണ്ടും അവരുടെ MFE-യിലേക്ക് ബണ്ടിൽ ചെയ്യുന്നു. ബിൽഡ് വിജയിക്കുന്നു. ടെസ്റ്റുകൾ വിജയിക്കുന്നു. ഡിപ്ലോയ്മെന്റും വിജയകരമായി പൂർത്തിയാകുന്നു (green).
താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ മാത്രമേ നിങ്ങൾ ഇത് ശ്രദ്ധിക്കൂ:
- ബണ്ടിൽ സൈസ് (Bundle size) പെട്ടെന്ന് കൂടുന്നു.
- വേർഷൻ വ്യത്യാസം (version mismatch) കാരണം ഒരു കമ്പോണന്റ് തകരാറിലാകുന്നു.
- Chrome DevTools-ൽ React രണ്ട് തവണ ലോഡ് ചെയ്യുന്നത് നിങ്ങൾ കാണുന്നു.
ഞങ്ങൾ ഞങ്ങളുടെ സിസ്റ്റം ഓഡിറ്റ് ചെയ്തപ്പോൾ രണ്ട് MFE-കൾ സ്വന്തമായി React ഉപയോഗിക്കുന്നത് കണ്ടെത്തി. അവരുടെ ബിൽഡുകൾ വിജയകരമായിരുന്നു (green). തങ്ങൾ നിയമങ്ങൾ പാലിക്കുന്നില്ല (out of compliance) എന്നതിനെക്കുറിച്ച് അവർക്ക് idea പോലും ഉണ്ടായിരുന്നില്ല.
ഇംപോർട്ട് മാപ്പും നിങ്ങളുടെ package.json ഫയലുകളും രണ്ട് വ്യത്യസ്ത ഇൻപുട്ടുകളാണ്. അവ പതുക്കെ തമ്മിൽ അകന്നുപോകുന്നു (drift apart).
ഡ്യൂപ്ലിക്കേറ്റ് ബണ്ടിലുകൾ കണ്ടെത്താൻ ഒരു CI ചെക്കിന് സാധിക്കും. എന്നാൽ വേർഷൻ വ്യത്യാസങ്ങൾ കണ്ടെത്താൻ അതിന് കഴിയില്ല. MFE A ഉപയോഗിക്കുന്നത് React 18.2-ഉം MFE B ഉപയോഗിക്കുന്നത് 18.3-ഉം ആണെങ്കിൽ, ബിൽഡ് പരാജയപ്പെടില്ല. എന്നാൽ റൺടൈമിൽ (runtime) നിങ്ങളുടെ ഷെയർഡ് കമ്പോണന്റുകൾ തകരാറിലാകും.
ഞങ്ങൾക്ക് React അപ്ഡേറ്റ് ചെയ്യേണ്ടി വരുമ്പോൾ, പതിനാല് വ്യത്യസ്ത റെപ്പോസിറ്ററികളിലൂടെ (repositories) മണിക്കൂറുകളോളം തിരയേണ്ടി വരുന്നു. ഇത് കാര്യക്ഷമമല്ല.
We built a tool to fix this. It does two things:
- It builds a version matrix from every MFE's package.json.
- It compares that matrix against your import map.
The tool shows you the gap. It shows you which teams are compliant and which teams have drifted. It also finds stale entries and broken URLs. We run it every Monday morning. It takes 12 seconds.
Our lesson was not technical. Every distributed architecture needs an owner for shared infrastructure. In SingleSPA, the import map is infrastructure. Do not treat it like a shared file. Treat it like a managed asset.
How do you handle this? Do you have an import map owner? Or do you spend your Monday mornings grepping files?
Source: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe