React Academy · درس

مفاهيم Micro-Frontend والمفاضلات

افهم سبب اعتماد الفرق على Micro-Frontend ونهجي الفصل أثناء التشغيل وأثناء البناء.

مفاهيم Micro-Frontend والمفاضلات درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

ما الواجهات الأمامية المصغّرة؟

توسّع الواجهات الأمامية المصغّرة مفهوم الخدمات المصغّرة ليشمل طبقة واجهة المستخدم. إذ تُقسّم تطبيقات الويب المنفردة إلى أجزاء من الواجهة الأمامية، تملكها فرق منفصلة وتطوّرها وتنشرها باستقلالية.

استراتيجيات التكامل

هناك ثلاث استراتيجيات رئيسية للتكامل: في وقت البناء (حزم npm)، ومن جانب الخادم (التركيب عند الحافة)، وفي وقت التشغيل (Module Federation وiframes ومكوّنات الويب).

التكامل في وقت البناء

انشر المكوّنات المشتركة بوصفها حزم npm. هذا الأسلوب بسيط، لكن أي تغيير يتطلب إعادة إصدار جميع المستهلكين وإعادة نشرهم — لذلك لا يوفّر نشرًا مستقلًا فعليًا.

// Team A publishes:
npm publish @company/design-system

// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independent

التكامل في وقت التشغيل عبر Module Federation

يتيح Module Federation في Webpack 5 لتطبيق واحد (المضيف) تحميل مكوّنات من تطبيق آخر (البعيد) في وقت التشغيل — ما يوفّر نشرًا مستقلًا فعليًا.

التكامل باستخدام iframe

ضمّن الواجهات الأمامية المصغّرة داخل iframes لتحقيق أقصى درجات العزل. المزايا: عدم وجود أي تعارضات في CSS/JS. العيوب: تجربة مستخدم ضعيفة (التمرير والتركيز وتحديد الحجم)، وصعوبة مشاركة الحالة، وعدم ملاءمة محركات البحث.

مكوّنات الويب

غلّف كل واجهة أمامية مصغّرة داخل عنصر مخصص. يعمل هذا الأسلوب مع أي إطار عمل ويوفّر عزلًا أصليًا، لكنه يفتقر إلى ميزات خاصة بـ React مثل مشاركة السياق.

// Remote team builds:
customElements.define('product-detail', ProductDetailElement);

// Host team embeds:
<product-detail product-id="123" />

المفاضلات: الفوائد

النشر المستقل (نشر واجهة فريق واحد دون المساس بواجهات الفرق الأخرى)، واستقلالية الفريق (اختيار الحزمة التقنية والتبعيات الخاصة به)، وقابلية التوسع (عمل الفرق بالتوازي دون تعارضات في الشيفرة).

المفاضلات: التكاليف

التعقيد التشغيلي (المزيد من المستودعات وخطوط CI وعمليات النشر)، وتكرار الحزم (تحميل React عدة مرات دون المشاركة)، والتكاليف الإضافية على الأداء، وصعوبة تصحيح الأخطاء عبر الحدود.

متى تختار الواجهات الأمامية المصغّرة؟

تكون الواجهات الأمامية المصغّرة مفيدة خصوصًا عند وجود فرق كبيرة متعددة تعمل على المنتج نفسه، أو استخدام حزم تقنية مختلفة لأقسام مختلفة، أو الحاجة إلى نشر الأقسام باستقلالية تامة.

متى لا تختار الواجهات الأمامية المصغّرة؟

تجنّبها مع الفرق الصغيرة (إذ تفوق التكاليف الإضافية فوائدها)، أو في التطبيقات البسيطة، أو عندما تكون لديك سيطرة كاملة على الواجهة الأمامية بأكملها — فعادةً ما تكون المستودعات الأحادية باستخدام Nx/Turborepo كافية.

نظام تصميم مشترك

بغض النظر عن استراتيجية التكامل، يضمن نظام التصميم المشترك (المنشور كحزمة أو المكشوف عبر Module Federation) الاتساق البصري بين الواجهات الأمامية المصغّرة.

تحقق سريع

أي أسلوب تكامل يتيح النشر المستقل فعليًا للواجهات الأمامية المصغّرة في وقت التشغيل؟

مراجعة

تُجزّئ الواجهات الأمامية المصغّرة واجهة المستخدم لتحقيق استقلالية الفرق والنشر المستقل. وتتراوح خيارات التكامل من حزم npm (البسيطة، لكنها لا تتيح النشر المستقل) إلى Module Federation (في وقت التشغيل، وتتيح النشر المستقل فعليًا). احسب التكاليف التشغيلية جيدًا — فالواجهات الأمامية المصغّرة تناسب المنتجات الكبيرة متعددة الفرق، لكنها تضيف تعقيدًا إلى المشاريع الأصغر.

الأسئلة الشائعة

هل درس «مفاهيم Micro-Frontend والمفاضلات» مجاني؟

نعم — نص درس «مفاهيم Micro-Frontend والمفاضلات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «مفاهيم Micro-Frontend والمفاضلات»؟

افهم سبب اعتماد الفرق على Micro-Frontend ونهجي الفصل أثناء التشغيل وأثناء البناء. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «مفاهيم Micro-Frontend والمفاضلات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy