SingleSPA کام کرتا ہے۔ Import Maps خود کو مینیج نہیں کرتے
SingleSPA کام کرتا ہے۔ ہم ایک ہی پیج پر React، Vue، اور Angular ایپس چلاتے ہیں۔ وہ آزادانہ طور پر لوڈ ہوتی ہیں۔ یہ فریم ورک بہترین کارکردگی دکھاتا ہے۔
مسئلہ فریم ورک کا نہیں ہے۔ مسئلہ اس کے گرد موجود ایکوسسٹم (ecosystem) کا ہے۔
ایک ڈسٹریبیوٹڈ آرکیٹیکچر (distributed architecture) میں، آپ کو ملکیت (ownership)، آڈٹ (auditing) اور گورننس (governance) کی ضرورت ہوتی ہے۔ SingleSPA ان ضروریات کو واضح کرتا ہے کیونکہ import map کوآرڈینیشن کا ایک مرکزی نقطہ ہوتا ہے۔
Import map آپ کی root config میں ہوتا ہے۔ یہ ایک JSON فائل ہے۔ یہ ہر مائیکرو فرنٹ اینڈ (MFE) کو بتاتا ہے کہ React کا کون سا ورژن لوڈ کرنا ہے۔ نظریاتی طور پر، یہ حقیقت کا واحد ذریعہ (source of truth) ہے، لیکن عملی طور پر، اس کا کوئی ذمہ دار نہیں ہوتا۔
ہر ٹیم اپنی MFE کی مالک ہوتی ہے۔ لیکن میپ (map) کا کوئی مالک نہیں ہوتا۔
اس سے مسائل پیدا ہوتے ہیں:
- ٹیمیں کسی MFE کو ختم کر دیتی ہیں، لیکن اس کا اندراج میپ میں باقی رہتا ہے۔
- نئی ڈیپینڈنسیز (dependencies) سامنے آتی ہیں، لیکن کوئی انہیں میپ میں شامل نہیں کرتا۔
- جب آپ اسے نظر انداز کرتے ہیں، تو میپ پرانا اور غیر متعلقہ ہوتا جاتا ہے۔
ہمیں اپنے میپ میں ایک ایسا MFE ملا جسے آٹھ ماہ سے ڈیپلائے نہیں کیا گیا تھا۔ وہ ختم ہو چکا تھا، لیکن پھر بھی پروڈکشن میں لوڈ ہو رہا تھا۔ کسی نے اس پر غور نہیں کیا کیونکہ کوئی اسے دیکھ ہی نہیں رہا تھا۔
آپ شاید بلڈ (build) کے دوران میپ کو خودکار طریقے سے تیار (auto-generate) کرنے کے بارے میں سوچیں۔ ہم نے یہ کوشش کی۔ اس سے ایک نیا مسئلہ پیدا ہوتا ہے: مرج کنفلیکٹس (merge conflicts)۔ اگر چودہ ٹیمیں ہر ڈیپلائمنٹ کے دوران ایک ہی JSON فائل میں لکھنے کی کوشش کریں گی، تو آپ کا CI پائپ لائن ایک الجھن بن جائے گا۔
ایک اور مسئلہ 'ڈرفٹ' (drift) کا ہے۔ طریقہ کار سادہ ہے: اپنی کنفیگ میں React کو ایک 'external' کے طور پر نشان زد کریں۔ اسے import map کے ذریعے سروس کرنے دیں۔ یہ ڈپلیکیٹ بنڈلز (duplicate bundles) کو روکتا ہے۔
لیکن پھر کوئی اپنے کوڈ کو ریفیکٹر (refactor) کرتا ہے۔ وہ غلطی سے React کو دوبارہ اپنی MFE میں بنڈل کر دیتا ہے۔ بلڈ کامیاب ہو جاتا ہے۔ ٹیسٹ پاس ہو جاتے ہیں۔ ڈیپلائمنٹ بھی 'گرین' (کامیاب) نظر آتی ہے۔
آپ کو صرف تب پتہ چلتا ہے جب:
- بنڈل کا سائز اچانک بڑھ جائے۔
- ورژن کا فرق (version mismatch) کسی کمپوننٹ کو خراب کر دے۔
- آپ Chrome DevTools میں React کو دو بار لوڈ ہوتے دیکھیں۔
ہم نے اپنے سسٹم کا آڈٹ کیا اور دو ایسے MFEs پائے جو اپنا React ساتھ بھیج رہے تھے۔ ان کے بلڈز کامیاب تھے۔ انہیں اندازہ ہی نہیں تھا کہ وہ اصولوں (compliance) کی خلاف ورزی کر رہے ہیں۔
Import map اور آپ کی package.json فائلیں دو الگ الگ ان پٹس ہیں۔ وہ خاموشی سے ایک دوسرے سے الگ ہو جاتے ہیں۔
ایک CI چیک ڈپلیکیٹ بنڈلز تلاش کر سکتا ہے۔ لیکن یہ ورژن کے فرق (version mismatches) کو نہیں ڈھونڈ سکتا۔ اگر MFE A میں React 18.2 استعمال ہو رہا ہے اور MFE B میں 18.3، تو بلڈ فیل نہیں ہوگا۔ لیکن آپ کے شیئرڈ کمپوننٹس رن ٹائم (runtime) پر خراب ہو جائیں گے۔
جب ہمیں React کو اپ ڈیٹ کرنے کی ضرورت ہوتی ہے، تو ہم چودہ مختلف ریپوزٹریز (repositories) میں 'grep' کرنے میں گھنٹوں ضائع کرتے ہیں۔ یہ غیر موثر طریقہ ہے۔
ہم نے اسے ٹھیک کرنے کے لیے ایک ٹول بنایا ہے۔ یہ دو کام کرتا ہے:
- یہ ہر MFE کے package.json سے ایک version matrix تیار کرتا ہے۔
- یہ اس matrix کا آپ کے import map کے ساتھ موازنہ کرتا ہے۔
یہ ٹول آپ کو فرق دکھاتا ہے۔ یہ آپ کو بتاتا ہے کہ کون سی ٹیمیں اصولوں کی پابند ہیں اور کون سی ٹیمیں ان سے ہٹ چکی ہیں۔ یہ پرانی (stale) انٹریز اور ٹوٹے ہوئے URLs بھی تلاش کرتا ہے۔ ہم اسے ہر پیر کی صبح چلاتے ہیں۔ اس میں صرف 12 سیکنڈ لگتے ہیں۔
ہمارا سبق تکنیکی نہیں تھا۔ ہر distributed architecture کو مشترکہ انفراسٹرکچر کے لیے ایک مالک (owner) کی ضرورت ہوتی ہے۔ SingleSPA میں، import map ہی انفراسٹرکچر ہے۔ اسے محض ایک shared file کی طرح نہ سمجھیں۔ اسے ایک managed asset کی طرح سمجھیں۔
آپ اسے کیسے سنبھالتے ہیں؟ کیا آپ کے پاس import map کا کوئی owner ہے؟ یا کیا آپ اپنے پیر کی صبحیں فائلوں کو grep کرنے میں گزارتے ہیں؟
ماخذ: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe