Vue Academy · درس

مبادئ بنية Micro-Frontend

سبب استخدام Micro-Frontends، واستقلالية الفرق، والنشر المستقل، ومقايضات تنوع التقنيات

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

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

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

مشكلة الواجهة الأحادية

تعني الواجهة الأمامية الكبيرة الأحادية أن كل فريق يلتزم بقاعدة شيفرة واحدة، وينسّق الإصدارات، ويشارك في عملية بناء واحدة. ومع نمو المؤسسة، يتحول ذلك إلى عنق زجاجة — عمليات بناء بطيئة، وتعارضات دمج، وجداول إصدارات متتابعة.

المبدأ: استقلالية الفريق

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

أجزاء رأسية، لا طبقات

تُقسّم الفرق وفقًا لـ قدرة الأعمال (Checkout، Search، Profile)، لا وفقًا للطبقة التقنية. يحتوي كل جزء على واجهة المستخدم والمنطق والوصول إلى البيانات الخاص بهذه القدرة.

المبدأ: النشر المستقل

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

المبدأ: تنوّع التقنيات (اختياري)

يمكن للفرق اختيار أُطر عمل مختلفة لكل جزء. عمليًا، توحّد معظم المؤسسات معاييرها (مثل استخدام Vue في كل الأجزاء) للاستفادة من أدوات مشتركة، لكن المعمارية تسمح بالتنوّع عندما يكون مبررًا.

أسلوب التكامل: وقت البناء

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

// container package.json
{
  "dependencies": {
    "@org/checkout": "^2.1.0",
    "@org/search": "^1.4.0"
  }
}

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

التكامل في وقت البناء بسيط، لكنه يربط الإصدارات: لنشر إصدار جديد من Checkout، يجب على الحاوية إعادة البناء والنشر. وهكذا تفقد ميزة النشر المستقل الحقيقي.

أسلوب التكامل: وقت التشغيل

يحمّل التكامل في وقت التشغيل الواجهات الأمامية المصغّرة في المتصفح أثناء التشغيل — إذ تجلب الحاوية كود الوحدة البعيدة عند الحاجة. وتنشر كل وحدة بعيدة بشكل مستقل؛ وتحصل الحاوية على أحدث إصدار دون إعادة البناء.

Module Federation

التقنية الرائدة للتكامل في وقت التشغيل هي Module Federation: وهي ميزة في عملية البناء تتيح لتطبيق كشف وحدات، ولتطبيق آخر استهلاكها عبر الشبكة أثناء التشغيل، مع مشاركة التبعيات الشائعة. ستستخدمونها في الدروس القادمة.

اختيار الأسلوب

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

تحقق سريع

تحققوا من فهمكم لمبادئ الواجهات الأمامية المصغّرة.

خلاصة

تعلّمتم مبادئ الواجهات الأمامية المصغّرة:

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

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

هل درس «مبادئ بنية Micro-Frontend» مجاني؟

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

ماذا ستتعلم في «مبادئ بنية Micro-Frontend»؟

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

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

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

كم من الوقت يستغرق درس «مبادئ بنية Micro-Frontend»؟

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

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

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

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

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