SingleSPA काम करता है। Import Maps खुद को मैनेज नहीं करते
SingleSPA काम करता है। हम एक ही पेज पर React, Vue, और Angular ऐप्स चलाते हैं। वे स्वतंत्र रूप से लोड होते हैं। यह framework अपना काम बखूबी करता है।
समस्या framework में नहीं है। समस्या इसके आसपास के ecosystem में है।
एक distributed architecture में, आपको ownership की आवश्यकता होती है। आपको auditing की आवश्यकता होती है। आपको governance की आवश्यकता होती है। SingleSPA इन आवश्यकताओं को स्पष्ट बनाता है क्योंकि import map समन्वय (coordination) का एक केंद्रीय बिंदु है।
Import map आपके root config में रहता है। यह एक JSON file है। यह हर micro frontend (MFE) को बताता है कि React का कौन सा version लोड करना है। सिद्धांत रूप में, यह 'source of truth' है। लेकिन व्यवहार में, इसका कोई मालिक नहीं है।
प्रत्येक टीम अपने स्वयं के MFE की मालिक है। लेकिन मैप का कोई मालिक नहीं है।
इससे समस्याएँ पैदा होती हैं:
- टीमें किसी MFE को हटा (retire) देती हैं, लेकिन मैप में उसकी एंट्री बनी रहती है।
- नई dependencies आती हैं, लेकिन कोई उन्हें मैप में नहीं जोड़ता।
- जब आप इसे अनदेखा करते हैं, तो मैप पुराना और बेकार (rots) होता जाता है।
हमें अपने मैप में एक ऐसा MFE मिला जिसे आठ महीनों से deploy नहीं किया गया था। वह निष्क्रिय (dead) था, लेकिन फिर भी production में लोड हो रहा था। किसी ने इस पर ध्यान नहीं दिया क्योंकि कोई इसे देख ही नहीं रहा था।
आप build के दौरान मैप को auto-generate करने के बारे में सोच सकते हैं। हमने ऐसा करने की कोशिश की। इससे एक नई समस्या पैदा होती है: merge conflicts। यदि चौदह टीमें हर deploy के दौरान एक ही JSON file में लिखने की कोशिश करती हैं, तो आपकी CI pipeline अस्त-व्यस्त हो जाएगी।
एक अन्य समस्या 'drift' है। पैटर्न सरल है: अपने config में React को एक external के रूप में चिह्नित करें। import map को इसे serve करने दें। इससे duplicate bundles से बचाव होता है।
लेकिन फिर कोई अपने कोड को refactor करता है। वे गलती से React को अपने MFE में वापस bundle कर देते हैं। build सफल हो जाता है। tests पास हो जाते हैं। deploy भी सफल (green) रहता है।
आपको इसका पता तभी चलता है जब:
- Bundle sizes अचानक बढ़ जाते हैं।
- version mismatch के कारण कोई component टूट जाता है।
- आप Chrome DevTools में React को दो बार लोड होते देखते हैं।
हमने अपने सिस्टम का audit किया और पाया कि दो MFEs अपना खुद का React भेज (ship) रहे थे। उनके builds सफल (green) थे। उन्हें अंदाज़ा भी नहीं था कि वे compliance के बाहर हैं।
Import map और आपकी package.json files दो अलग-अलग inputs हैं। वे चुपचाप एक-दूसरे से अलग (drift) होते जाते हैं।
एक CI check duplicate bundles का पता लगा सकता है। लेकिन यह version mismatches का पता नहीं लगा सकता। यदि MFE A, React 18.2 का उपयोग करता है और MFE B, 18.3 का उपयोग करता है, तो build विफल नहीं होगा। लेकिन आपके shared components runtime पर टूट जाएंगे।
जब हमें React को अपडेट करने की आवश्यकता होती है, तो हम चौदह अलग-अलग repositories में grepping करने में घंटों बिता देते हैं। यह अक्षम (inefficient) है।
हमने इसे ठीक करने के लिए एक टूल बनाया है। यह दो काम करता है:
- यह हर MFE के package.json से एक version matrix बनाता है।
- यह उस matrix की तुलना आपके import map से करता है।
यह टूल आपको अंतर (gap) दिखाता है। यह दिखाता है कि कौन सी टीमें compliant हैं और किन टीमों का तालमेल बिगड़ गया है (drifted)। यह stale entries और broken URLs को भी ढूँढता है। हम इसे हर सोमवार की सुबह चलाते हैं। इसमें 12 सेकंड लगते हैं।
हमारा सबक तकनीकी नहीं था। हर distributed architecture को shared infrastructure के लिए एक owner की आवश्यकता होती है। SingleSPA में, import map infrastructure है। इसे एक shared file की तरह न समझें। इसे एक managed asset की तरह समझें।
आप इसे कैसे संभालते हैं? क्या आपके पास कोई import map owner है? या क्या आप अपने सोमवार की सुबह फ़ाइलों को grep करने में बिताते हैं?
स्रोत: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe