بنية Micro-Frontends: تنفيذ Module Federation و Single-SPA

مقدمة

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

متى تفكر في الواجهات المصغرة

قبل التنفيذ، قيّم بصدق إذا كنت تحتاجها:

المرشحون الجيدون:

• فرق كبيرة (20+ مطور واجهة أمامية)
• نطاقات عمل متميزة بملكية منفصلة
• الحاجة لدورات نشر مستقلة
• تحديث الأنظمة القديمة (نمط الخانق)

المرشحون السيئون:

• فرق صغيرة تريد "أن تكون مثل Netflix"
• تطبيقات بسيطة
• فرق بدون قدرات DevOps قوية

بنية اتحاد الوحدات

اتحاد وحدات Webpack 5 هو النهج الأكثر نضجاً:

// تطبيق المضيف (الهيكل) webpack.config.js
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        catalog: 'catalog@http://localhost:3001/remoteEntry.js',
        checkout: 'checkout@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
};

استراتيجية التبعيات المشتركة

إدارة التبعيات المشتركة حاسمة لحجم الحزمة.

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

نمط ناقل الأحداث

class EventBus {
  private listeners: Map<string, Set<EventCallback>> = new Map();

  subscribe(event: string, callback: EventCallback): () => void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event)!.add(callback);
    return () => this.listeners.get(event)?.delete(callback);
  }

  publish(event: string, data: unknown): void {
    this.listeners.get(event)?.forEach(callback => callback(data));
  }
}

export const eventBus = new EventBus();

استراتيجية التوجيه

// الهيكل يتعامل مع التوجيه على المستوى الأعلى
function ShellApp() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/catalog/*" element={<CatalogApp />} />
          <Route path="/checkout/*" element={<CheckoutApp />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}

// كل واجهة مصغرة تتعامل مع مساراتها الفرعية
function CatalogApp() {
  return (
    <Routes>
      <Route index element={<ProductList />} />
      <Route path=":productId" element={<ProductDetail />} />
    </Routes>
  );
}

الخلاصة

الواجهات المصغرة نمط قوي لتوسيع نطاق تطوير الواجهة الأمامية عبر الفرق الكبيرة. القرارات الرئيسية هي:

1. نهج التكامل: اتحاد الوحدات للتركيب في وقت التشغيل
2. التبعيات المشتركة: إدارة دقيقة لتجنب الانتفاخ
3. التواصل: ناقل الأحداث للترابط المرن
4. التوجيه: الهيكل يمتلك المستوى الأعلى، الواجهات المصغرة تمتلك المسارات الفرعية

تذكر: الواجهات المصغرة تضيف تعقيداً. اعتمدها فقط عندما تفوق الفوائد التنظيمية التكاليف التقنية.