موجه الواجهة الأمامية للواجهات الأمامية المصغرة: التنقل عبر التطبيقات

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

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

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

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

الحاجة إلى موجه للواجهة الأمامية المصغرة

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

• إدارة عنوان URL: التأكد من أن عنوان URL يعكس بدقة الموقع الحالي للمستخدم داخل التطبيق.
• إدارة الحالة: مشاركة الحالة بين الواجهات الأمامية المصغرة عند الضرورة.
• التحميل البطيء: تحميل الواجهات الأمامية المصغرة فقط عند الحاجة إليها لتحسين الأداء.
• المصادقة والترخيص: معالجة مصادقة المستخدم والترخيص عبر واجهات أمامية مصغرة مختلفة.

استراتيجيات التنقل عبر التطبيقات

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

1. استخدام موجه مركزي (Single-Spa)

Single-Spa هو إطار عمل شائع لبناء واجهات أمامية مصغرة. يستخدم موجهًا مركزيًا لإدارة التنقل بين التطبيقات المختلفة. يعمل التطبيق الرئيسي كمنسق وهو مسؤول عن عرض وإلغاء تحميل الواجهات الأمامية المصغرة بناءً على عنوان URL الحالي.

كيف يعمل:

1. ينتقل المستخدم إلى عنوان URL محدد.
2. يعترض موجه single-spa تغيير عنوان URL.
3. بناءً على عنوان URL، يحدد الموجه أي واجهة أمامية مصغرة يجب أن تكون نشطة.
4. يقوم الموجه بتنشيط الواجهة الأمامية المصغرة المقابلة وإلغاء تحميل أي واجهات أمامية مصغرة نشطة أخرى.

مثال (Single-Spa):

لنفترض أن لديك ثلاث واجهات أمامية مصغرة: home وproducts وcart. سيتم تكوين موجه single-spa كما يلي:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

في هذا المثال، يتم تسجيل كل واجهة أمامية مصغرة في single-spa، ويتم توفير دالة لتحديد متى يجب أن تكون الواجهة الأمامية المصغرة نشطة بناءً على عنوان URL. عندما ينتقل المستخدم إلى /products، سيتم تنشيط الواجهة الأمامية المصغرة products.

المزايا:

• تحكم مركزي في التوجيه.
• إدارة مبسطة للحالة (يمكن معالجتها بواسطة منسق single-spa).
• سهولة التكامل مع التطبيقات الحالية.

العيوب:

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

2. اتحاد الوحدات (Webpack 5)

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

كيف يعمل:

1. يتم بناء كل واجهة أمامية مصغرة كمشروع Webpack منفصل.
2. يتم تعيين واجهة أمامية مصغرة واحدة كتطبيق مضيف.
3. يحدد التطبيق المضيف الوحدات التي يريد استهلاكها من الواجهات الأمامية المصغرة البعيدة.
4. تحدد الواجهات الأمامية المصغرة البعيدة الوحدات التي تريد عرضها للتطبيق المضيف.
5. في وقت التشغيل، يقوم التطبيق المضيف بتحميل الوحدات المعروضة من الواجهات الأمامية المصغرة البعيدة حسب الحاجة.

مثال (اتحاد الوحدات):

افترض وجود تطبيق host وتطبيق remote.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

في هذا المثال، يستهلك التطبيق host المكون Button من التطبيق remote. يضمن الخيار shared أن كلا التطبيقين يستخدمان نفس الإصدار من react وreact-dom.

المزايا:

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

العيوب:

• أكثر تعقيدًا في الإعداد والتكوين من single-spa.
• يتطلب إدارة دقيقة للتبعيات المشتركة لتجنب تعارضات الإصدار.

3. مكونات الويب

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

كيف يعمل:

1. تعرض كل واجهة أمامية مصغرة واجهة المستخدم الخاصة بها كمجموعة من مكونات الويب.
2. يستهلك التطبيق الرئيسي (أو واجهة أمامية مصغرة أخرى) مكونات الويب هذه عن طريق استيرادها واستخدامها في HTML الخاص به.
3. تتعامل مكونات الويب مع العرض والمنطق الخاص بها.

مثال (مكونات الويب):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Hello from Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (التطبيق الرئيسي):

Main Application

في هذا المثال، يحدد الملف micro-frontend-a.js مكون ويب يسمى micro-frontend-a. يستورد الملف index.html هذا الملف ويستخدم مكون الويب في HTML الخاص به. سيقوم المتصفح بعرض مكون الويب، وعرض "Hello from Micro-Frontend A!".

المزايا:

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

العيوب:

• يمكن أن يكون تنفيذه أكثر تفصيلاً من الأساليب الأخرى.
• قد يتطلب polyfills لدعم المتصفحات القديمة.

4. Iframes

تعد Iframes (الإطارات المضمنة) خيارًا أقدم ولكنه لا يزال قابلاً للتطبيق لعزل الواجهات الأمامية المصغرة. تعمل كل واجهة أمامية مصغرة داخل iframe الخاص بها، مما يوفر درجة عالية من العزل. يمكن تحقيق الاتصال بين iframes باستخدام واجهة برمجة تطبيقات postMessage.

كيف يعمل:

1. يتم نشر كل واجهة أمامية مصغرة كتطبيق ويب منفصل.
2. يتضمن التطبيق الرئيسي كل واجهة أمامية مصغرة في iframe.
3. يتم الاتصال بين التطبيق الرئيسي والواجهات الأمامية المصغرة باستخدام واجهة برمجة تطبيقات postMessage.

مثال (Iframes):

index.html (التطبيق الرئيسي):

Main Application

في هذا المثال، يتضمن الملف index.html اثنين من iframes، يشير كل منهما إلى واجهة أمامية مصغرة مختلفة.

المزايا:

• درجة عالية من العزل. الواجهات الأمامية المصغرة معزولة تمامًا عن بعضها البعض، مما يمنع التعارضات.
• سهولة التنفيذ. Iframes هي تقنية بسيطة ومفهومة جيدًا.

العيوب:

• قد يكون من الصعب التواصل بين iframes.
• يمكن أن يكون لها مشكلات في الأداء بسبب الحمل الزائد لإطارات iframe المتعددة.
• تجربة مستخدم سيئة بسبب نقص التكامل السلس.

إدارة الحالة عبر الواجهات الأمامية المصغرة

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

• الحالة المستندة إلى عنوان URL: ترميز الحالة داخل عنوان URL. يجعل هذا النهج حالة التطبيق قابلة للمشاركة عبر عناوين URL وقابلة للإشارة المرجعية بسهولة.
• إدارة الحالة المركزية (Redux, Vuex): استخدام مكتبة إدارة الحالة العالمية لمشاركة الحالة بين الواجهات الأمامية المصغرة. هذا مفيد بشكل خاص للتطبيقات المعقدة ذات الحالة المشتركة الكبيرة.
• الأحداث المخصصة: استخدام الأحداث المخصصة لتوصيل تغييرات الحالة بين الواجهات الأمامية المصغرة. يسمح هذا النهج بالاقتران الفضفاض بين الواجهات الأمامية المصغرة.
• تخزين المتصفح (LocalStorage, SessionStorage): تخزين الحالة في تخزين المتصفح. هذا النهج مناسب للحالة البسيطة التي لا تحتاج إلى مشاركتها عبر جميع الواجهات الأمامية المصغرة. ومع ذلك، كن منتبهًا لاعتبارات الأمان عند تخزين البيانات الحساسة.

المصادقة والترخيص

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

• خدمة مصادقة مركزية: تتعامل خدمة مخصصة مع مصادقة المستخدم وتصدر الرموز (مثل JWT). يمكن للواجهات الأمامية المصغرة بعد ذلك التحقق من صحة هذه الرموز لتحديد ترخيص المستخدم.
• وحدة مصادقة مشتركة: وحدة مشتركة مسؤولة عن معالجة منطق المصادقة. يمكن استخدام هذه الوحدة من قبل جميع الواجهات الأمامية المصغرة.
• مصادقة الحافة: تتم معالجة المصادقة على حافة الشبكة (مثل استخدام وكيل عكسي أو بوابة API). يمكن أن يبسط هذا النهج منطق المصادقة في الواجهات الأمامية المصغرة.

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

فيما يلي بعض أفضل الممارسات التي يجب وضعها في الاعتبار عند تنفيذ توجيه الواجهة الأمامية المصغرة:

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

الخلاصة

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