مشاركة الحالة والتوجيه بين التطبيقات البعيدة

كل وحدة remote في Module Federation هي تطبيق يُبنى ويُنشر بشكل مستقل. وتعيش حالتها (React useState وContext ومتاجر Zustand) ضمن نطاق وحدة JavaScript الخاص بها. لا يشارك المضيف والوحدات البعيدة الحالة تلقائيًا، بل يجب تصميم هذه المشاركة بشكل صريح.

أبسط آلية لمشاركة الحالة هي عنوان URL: إذ يمكن لأي وحدة بعيدة قراءة معاملات URL وسلاسل الاستعلام وقيم التجزئة دون أي اتصال بين الوحدات البعيدة. ويناسب ذلك حالة التنقل الأساسية، وقيم عوامل التصفية، وأي حالة ينبغي حفظها في إشارة مرجعية ومشاركتها عبر رابط.

تسمح CustomEvents عبر EventTarget في المتصفح للوحدات البعيدة بالتواصل دون عمليات استيراد مباشرة. تستدعي إحدى الوحدات البعيدة window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart }))، وتصغي أي وحدة أخرى (المضيف أو وحدة بعيدة أخرى) باستخدام window.addEventListener('cart:updated', handler). ولا حاجة إلى وحدة مشتركة.

أنشئ وحدة بعيدة مخصصة للحالة تعرض متجر Zustand أو Jotai. يستورد كل من المضيف والوحدات البعيدة الأخرى من وحدة الحالة البعيدة هذه، ويحصلون على مثيل المتجر نفسه، لأنه singleton مشترك. يناسب ذلك الحالة المشتركة المعقدة (المصادقة، وسلة التسوق، وتفضيلات المستخدم)، لكنه يضيف اعتمادًا على عملية نشر أخرى.

يملك الغلاف (المضيف) كل الحالة المشتركة ويمررها إلى الوحدات البعيدة على شكل props أو عبر Context. وتتلقى الوحدات البعيدة دوال استدعاء مثل onCartUpdate، كما تتلقى navigate على شكل props. يحافظ ذلك على مركزية الحالة في المضيف، لكنه يتطلب من المضيف معرفة واجهات برمجة الوحدات البعيدة، ما ينشئ اقترانًا وثيقًا.

يوفّر مكوّن Router (BrowserRouter أو createBrowserRouter) حالتي السجل والموقع في React Router. يجب أن يوجد Router واحد بالضبط في إعداد Module Federation، إذ إن وضعه في كل وحدة بعيدة سينشئ سياقات توجيه متعددة متنافسة، ما يؤدي إلى تعارضات في التنقل.

القاعدة المعمارية هي أن المضيف (الغلاف) هو الذي يوفر Router. وتتلقى الوحدات البعيدة خصائص التوجيه من المضيف (أو تقرأ URL مباشرةً). ويجب ألا تنشئ الوحدة البعيدة BrowserRouter خاصًا بها مطلقًا، لأنه سيتعارض مع Router الخاص بالمضيف ويعطّل التنقل في التطبيق بأكمله.

ترتبط قيم React Context بمثيل React وكائن Context محددين. لكي يعمل Context بين المضيف والوحدة البعيدة، يجب أن يستوردا كائن Context نفسه من المصدر نفسه، وعادةً ما يكون وحدة الحالة البعيدة أو حزمة أدوات مشتركة. ويضمن React singleton عمل Context نفسه عبر جميع الوحدات البعيدة.

في بنية Module Federation مرتبة، يملك الغلاف (المضيف): غلاف HTML، وموفّر Router، وسياق Auth، وموفّر السمات/رموز التصميم، والتنقل العام. أما الوحدات البعيدة فتملك محتوى نطاق ميزاتها. ويجمع الغلاف الوحدات البعيدة في التخطيط دون معرفة تفاصيل تنفيذها.

أكبر نمط مضاد في Module Federation هو الاقتران الوثيق بين المضيف والوحدة البعيدة: يستورد المضيف الأنواع من الوحدة البعيدة، أو تستورد الوحدة البعيدة المكوّنات من المضيف، أو يتشاركان حزمة npm مشتركة يجب على كليهما تحديثها في الوقت نفسه. وتُفقد هذه الاقترانات الهدف من النشر المستقل.

حدّد عقودًا واضحة بين المضيف والوحدات البعيدة: الخصائص التي يقبلها مكوّن الوحدة البعيدة، وCustomEvents التي يرسلها، ومعاملات URL التي يقرأها. وثّق هذه العقود على شكل واجهات TypeScript في حزمة أنواع مشتركة. ويسمح ذلك للفرق بالتطور بشكل مستقل ضمن العقد المتفق عليه.

أين ينبغي وضع موفّر React Router‏ (BrowserRouter) في بنية Module Federation؟

يمكن مشاركة الحالة بين الوحدات البعيدة في Module Federation باستخدام حالة URL (وهي الأبسط)، أو CustomEvents (لالقتران غير المحكم)، أو وحدة بعيدة للحالة المشتركة (متجر مركزي)، أو حالة يملكها المضيف ويمررها على شكل props. يجب أن يملك المضيف موفّر Router الوحيد، ويجب ألا تنشئ الوحدات البعيدة Router خاصًا بها مطلقًا. وتحافظ عقود الاتصال الواضحة عبر واجهات TypeScript على استقلالية الفرق وتمكّن النشر المستقل الحقيقي.