Angular Academy · درس

بنية الواجهة الأمامية المصغّرة

قسّم التطبيقات إلى وحدات مستقلة قابلة للنشر

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

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

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

المشكلة التي تحلها

يربط تطبيق Angular واحد وضخم («واجهة أمامية أحادية») كل فريق بجدول إصدار واحد وبناء واحد وعملية نشر واحدة. ومع ازدياد حجم الفرق، يؤدي ذلك إلى إبطاء الجميع. وتتيح الواجهات الأمامية الصغيرة للفرق النشر وفق جداولها الخاصة.

قابلية النشر المستقلة

الخاصية الأساسية هي قابلية النشر المستقلة: إذ يستطيع فريق إتمام الشراء نشر تدفق جديد لإتمام الشراء من دون إعادة بناء كتالوج المنتجات أو إعادة نشره. وكل remote هو ناتج مستقل ضمن مسار CI/CD خاص به.

المضيف والـ remotes

من الناحية المعمارية، يوجد مضيف (shell) يحمّل واحدًا أو أكثر من remotes. ويتولى الـ shell التوجيه والتخطيط على المستوى الأعلى، بينما توفّر الـ remotes مناطق الميزات التي تُحمّل عند الطلب.

// conceptually
host  -> loads -> remote: catalog
        -> loads -> remote: checkout
        -> loads -> remote: account

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

يمكن دمج الـ remotes وقت البناء، أو على الخادم (SSI/edge)، أو وقت التشغيل في المتصفح. ويُعد الدمج وقت التشغيل باستخدام Module Federation الأكثر شيوعًا في Angular، لأنه يحافظ على النشر المستقل.

Module Federation في جملة واحدة

تتيح Module Federation لتطبيق مبني أن يعرِض وحدات يحمّلها تطبيق مبني آخر عبر HTTP وقت التشغيل، مع مشاركة المكتبات المشتركة حتى لا تتكرر. وهي المحرك الذي يقف وراء معظم الواجهات الأمامية الصغيرة في Angular.

استقلالية الفرق والحدود

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

التكاليف

تضيف الواجهات الأمامية الصغيرة تعقيدًا حقيقيًا: اختلاف الإصدارات بين الـ remotes، وتكرار الاعتماديات إذا أسيء إعدادها، وصعوبة أكبر في تصحيح الأخطاء عبر الحدود، إضافة إلى أعطال التحميل وقت التشغيل. لا تعتمدوا هذا الأسلوب إلا عندما يبرر حجم الفرق التكلفة الإضافية.

متى لا تستخدمونها

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

المظهر والطابع الموحدان

لتجنب إنشاء واجهة مستخدم عشوائية، تتشارك الفرق مكتبة نظام تصميم وأنماطًا عامة. فالاتساق عقد مقصود وليس أمرًا يحدث مصادفة، لأن كل remote يُبنى بشكل منفصل.

اعتبارات خاصة بـ Angular

يجب أن تتشارك remotes الخاصة بـ Angular نسخة واحدة من إطار Angular وقت التشغيل؛ إذ يؤدي تحميل نسختين من Angular إلى تعطيل حقن الاعتماديات وتضخيم الحزمة. وتتولى أدوات مثل Native Federation إدارة هذه المشاركة نيابةً عنكم.

تحقق سريع

ما الفائدة الأساسية المحدِّدة للواجهات الأمامية الصغيرة؟

مراجعة

تقسّم الواجهات الأمامية الصغيرة التطبيق الكبير إلى remotes قابلة للنشر المستقل، ويحمّلها shell مضيف، مع ربطها بمجالات الأعمال. ويُعد الدمج وقت التشغيل عبر Module Federation نهجًا قياسيًا في Angular، الذي يجب أن يتشارك نسخة واحدة من الإطار. وهي تحل مشكلة الترابط على مستوى الفرق، لكنها تضيف تكلفة تشغيلية حقيقية.

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

هل درس «بنية الواجهة الأمامية المصغّرة» مجاني؟

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

ماذا ستتعلم في «بنية الواجهة الأمامية المصغّرة»؟

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

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

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

كم من الوقت يستغرق درس «بنية الواجهة الأمامية المصغّرة»؟

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

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

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

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

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