TL;DR: استخدام منتجع واحد لإنشاء واجهات أمامية صغيرة يجعل من السهل تقسيم تطبيق كبير إلى أجزاء صغيرة مستقلة حتى تتمكن الفرق المختلفة من العمل على أجزاء دون التأثير على الآخرين. توضح هذه المدونة كيفية إنشاء الواجهات الأمامية الصغيرة Angular وReact، وربطها بتكوين الجذر، ونشرها.

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

مقدمة إلى منتجع صحي واحد

Single-spa هو إطار عمل قائم على JavaScript مصمم لهندسة الواجهة الأمامية الصغيرة. فهو يتيح لك إنشاء واجهات أمامية صغيرة باستخدام أطر عمل مثل Angular وReact وVue وتقديمها كتطبيق واحد. يحتفظ بسجل للتطبيقات المتصلة ويستخدم طرقًا لإعادة توجيه المستخدمين إلى تطبيقات مختلفة.

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

إنشاء منتجع صحي واحد

المتطلبات الأساسية

لتنفيذ منتجع واحد، من المهم تثبيت Node.js وnpm. لتثبيتها، انتقل إلى موقع Node.js وقم بتنزيل أحدث إصدار لنظام التشغيل الخاص بك. قم بتشغيل برنامج التثبيت لإكمال التثبيت.

ثم تحقق من تثبيت Node.js وnpm عن طريق تنفيذ الأوامر التالية في موجه الأوامر.

npm - version
node - version

الخطوة 1: إعداد المشروع

في هذا المثال، سيتم إنشاء واجهتين أماميتين صغيرتين باستخدام Angular وReact. سوف يخدم تكوين الجذر الواجهتين الأماميتين الصغيرتين.

قم بإنشاء تطبيق

يمكننا إنشاء تطبيق Angular صغير للواجهة الأمامية عن طريق تنفيذ الأمر التالي.

ng new angular-spa-frontend

بمجرد إنشاء المشروع، قم بتنفيذ الأمر التالي لتثبيت مكتبة السبا الفردية.

ng add single-spa-angular

بمجرد تثبيت المكتبة بشكل صحيح، سيتم إنشاء ملف باسم main.single-spa.ts في مشروع Angular، والذي يحتوي على جميع التكوينات المتعلقة بـ Single-spa.

راجع رمز التكوين.

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

يلزم توفير قيمة APP_BASE_HREF للعمل كمنتجع صحي واحد.

علاوة على ذلك، عند إضافة مكتبة المنتجع الصحي الفردية، package.json سوف تحتوي على نصين إضافيين.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

سيتم تعديل ملف angular.json باستخدام التكوينات التالية.

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

"main": "src/main.ts" سيتم استبداله بـ "main": "src/main.single-spa.ts". ستتم إضافة تكوين بناء جديد كوحدة JavaScript.

بمجرد اكتمال التكوينات والتحقق منها، يمكننا خدمة تطبيق Angular باستخدام الأمر التالي.

npm run serve:single-spa:angular-spa-frontend

الآن بعد أن نجحنا في إنشاء تطبيق الواجهة الأمامية المصغرة، دعونا نلقي نظرة على كيفية تنفيذ root-config.

تكوين الجذر

نفذ الأمر التالي لإنشاء تكوين الجذر.

npx create-single-spa

عند إدخال هذا الأمر، سيتم تقديم سلسلة من التكوينات لإنشاء تكوين الجذر.

بعد تحديد التكوينات السابقة، سيتم إنشاء التكوين الجذري لخدمة واجهات أمامية متعددة.

لربط الواجهة الأمامية الصغيرة التي تم إنشاؤها بتكوين الجذر، نحتاج إلى تعديل ملفات root-config.ts وindex.ejs الملفات.

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

كما هو مذكور في مقطع التعليمات البرمجية السابق، يجب استيراد الواجهة الأمامية الصغيرة التي تم إنشاؤها في ملف root-config.ts.

name: "@org/angular-spa-frontend",

يجب إضافة البرامج النصية التالية إلى ملف index.ejs.

تم إنشاء واجهة أمامية صغيرة ( @org/angular-spa-frontend)، بالإضافة إلى عنوان URL ( http://localhost:4200/main.js ) حيث يتم وضع الجزء الصغير تمت استضافة الواجهة الأمامية، ويجب إضافتها في خريطة الاستيراد.

ثم قم بتنفيذ الأمر التالي لتشغيل التطبيق.

npm run start

بافتراض أن هذه الخطوات قد تم تنفيذها بشكل صحيح، يجب أن نكون قادرين على رؤية المنتجع الصحي النهائي في طريقة العرض، على غرار الصورة التالية.

الخطوة 2: النشر في الإنتاج

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

الخطوة 3: إضافة المزيد من الواجهات الأمامية الصغيرة

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

أنشئ واجهة أمامية صغيرة جديدة لـ React باستخدام الأمر التالي.

npx create-single-spa --module-type react

ثم انتقل داخل المشروع الذي تم إنشاؤه وقم بتثبيت Single-spa-react.

npm install single-spa-react

قم بتعديل ملف الإدخال لتصدير أساليب دورة الحياة لجعل التطبيق متوافقًا مع منتجع واحد.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

بمجرد اكتمال التكوينات، يمكننا خدمة الواجهة الأمامية الصغيرة لـ React باستخدام الأمر التالي.

npm start

لدمج الواجهة الأمامية الصغيرة التي تم إنشاؤها مع root-config الحالي، قم بتنفيذ التعديلات التالية على الملفات في root-config.

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

تحتاج أيضًا إلى تحديث ملف index.ejs بمسار الحزمة الرئيسي لتطبيق React.

مرجع جيثب

تحقق من مثال التعليمات البرمجية الكامل لتطبيق المنتجع الصحي الفردي هذا في هذا العرض التوضيحي لـ GitHub.

خاتمة

يؤدي استخدام منتجع واحد لإنشاء واجهات أمامية صغيرة إلى تسهيل تقسيم التطبيق الكبير إلى أجزاء صغيرة مستقلة. بهذه الطريقة، يمكن للفرق المختلفة العمل على أجزائها دون التأثير على الآخرين واستخدام الأطر التي تفضلها، مثل Angular أو React. باتباع الخطوات الواردة في هذا الدليل، يمكنك إعداد مشروع منتجع صحي واحد، وربط عدة واجهات أمامية صغيرة، ومنح المستخدمين تجربة سلسة. يسهّل برنامج Single-spa تطوير تطبيقك بمرور الوقت وإضافة ميزات جديدة حسب الحاجة.

المدونات ذات الصلة

• إتقان جافا سكريبت غير المتزامن باستخدام RxJS
• Axios وFetch API؟ اختيار عميل HTTP المناسب
• أنواع الأدوات المساعدة لـ TypeScript: دليل كامل
• تخزين JWT الآمن: أفضل الممارسات