SingleSPA يعمل بكفاءة. خرائط الاستيراد (Import Maps) لا تدير نفسها
SingleSPA يعمل بكفاءة. نحن نشغل تطبيقات React و Vue و Angular على صفحة واحدة. يتم تحميلها بشكل مستقل. الإطار البرمجي (framework) يؤدي المهمة.
المشكلة ليست في الإطار البرمجي، بل في النظام البيئي (ecosystem) المحيط به.
في البنية الموزعة (distributed architecture)، أنت بحاجة إلى الملكية، والتدقيق، والحوكمة. يجعل SingleSPA هذه الاحتياجات مرئية لأن خريطة الاستيراد (import map) هي نقطة التنسيق المركزية.
تعيش خريطة الاستيراد في إعدادات الجذر (root config) الخاصة بك. إنها ملف JSON. وهي تخبر كل واجهة أمامية مصغرة (MFE) بإصدار React الذي يجب تحميله. من الناحية النظرية، هي المصدر الموثوق للحقيقة (source of truth)، ولكن من الناحية العملية، لا أحد يملكها.
كل فريق يملك الـ MFE الخاص به، ولكن لا أحد يملك الخريطة.
وهذا يخلق مشاكل:
- تقوم الفرق بإيقاف MFE، ولكن يظل الإدخال موجوداً في الخريطة.
- تظهر تبعيات (dependencies) جديدة، ولكن لا أحد يضيفها إلى الخريطة.
- تتعطل الخريطة (rots) بينما تتجاهلها.
وجدنا MFE في خريطتنا لم يتم نشره منذ ثمانية أشهر. كان معطلاً، ومع ذلك كان لا يزال يُحمّل في بيئة الإنتاج (production). لم يلاحظ أحد ذلك لأن أحداً لم يكن يراقب.
قد تفكر في إنشاء الخريطة تلقائياً أثناء عملية البناء (build). لقد جربنا ذلك، لكنه يخلق مشكلة جديدة: تعارضات الدمج (merge conflicts). إذا حاولت أربعة عشر فرقة الكتابة في ملف JSON واحد خلال كل عملية نشر (deploy)، فستصبح خطوط أنابيب CI الخاصة بك في حالة فوضى.
مشكلة أخرى هي الانحراف (drift). النمط بسيط: حدد React كـ external في إعداداتك، واترك خريطة الاستيراد تتولى خدمته. هذا يمنع تكرار الحزم (duplicate bundles).
ولكن بعد ذلك، يقوم شخص ما بإعادة هيكلة (refactor) الكود الخاص به، فيقوم عن طريق الخطأ بتضمين React مرة أخرى داخل الـ MFE الخاص به. تنجح عملية البناء، وتنجح الاختبارات، وتظهر عملية النشر باللون الأخضر.
لن تلاحظ ذلك إلا عندما:
- ترتفع أحجام الحزم (bundle sizes) بشكل مفاجئ.
- يتسبب عدم تطابق الإصدارات في تعطل أحد المكونات (component).
- ترى React يتم تحميله مرتين في Chrome DevTools.
قمنا بتدقيق نظامنا ووجدنا اثنين من الـ MFEs يقومان بإرسال React الخاص بهما. كانت عمليات البناء الخاصة بهما ناجحة، ولم يكن لديهما أي فكرة بأنهما غير ممتثلين للمعايير.
خريطة الاستيراد وملفات package.json هي مدخلات منفصلة، وهي تنحرف عن بعضها البعض بهدوء.
يمكن لفحص CI العثور على الحزم المكررة، لكنه لا يستطيع العثور على عدم تطابق الإصدارات. إذا كان MFE A يستخدم React 18.2 و MFE B يستخدم 18.3، فلن تفشل عملية البناء، ولكن المكونات المشتركة ستتعطل أثناء وقت التشغيل (runtime).
عندما نحتاج إلى تحديث React، نقضي ساعات في البحث (grepping) عبر أربعة عشر مستودعاً (repositories) مختلفاً. هذا أمر غير فعال.
لقد قمنا ببناء أداة لإصلاح ذلك. وهي تقوم بشيئين:
- تقوم بإنشاء مصفوفة إصدارات (version matrix) من ملف
package.jsonالخاص بكل MFE. - تقارن تلك المصفوفة بـ import map الخاصة بك.
تُظهر لك الأداة الفجوة الموجودة؛ حيث توضح لك الفرق الممتثلة (compliant) والفرق التي انحرفت عن المعايير (drifted). كما تكتشف المدخلات القديمة (stale entries) والروابط المعطلة (broken URLs). نحن نقوم بتشغيلها كل صباح يوم اثنين، وتستغرق 12 ثانية فقط.
لم يكن درسنا تقنيًا. فكل بنية موزعة (distributed architecture) تحتاج إلى مالك للبنية التحتية المشتركة. في SingleSPA، تُعد الـ import map جزءًا من البنية التحتية. لا تعاملها كملف مشترك، بل عاملها كأصل مُدار (managed asset).
كيف تتعامل مع هذا الأمر؟ هل لديك مالك لـ import map؟ أم أنك تقضي صباحات يوم الاثنين في البحث باستخدام grep داخل الملفات؟
المصدر: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe