تكمن الفكرة وراء microfront-end في تقسيم جانب العميل المتجانس من مشروع الويب إلى أجزاء أصغر يسهل إدارتها. مع هذا النهج ، يكون لكل فريق مشارك في المشروع منطقة عمل خاصة به ، وتكون الفرق مسؤولة فقط عن جزء معين من المشروع وتشارك بشكل مستقل تمامًا في تطويره. لذلك ، يعمل كل فريق مع قاعدة الكود الخاصة به ، بشكل مستقل عن الآخرين ، ويصدر إصدارات جديدة من نظامه الفرعي ، ويقوم باستمرار بإجراء تحسينات تدريجية صغيرة عليه. يتم تنفيذ تكامل هذا النظام الفرعي مع أجزاء أخرى من التطبيق الذي تعمل عليه الفرق الأخرى من خلال API. باستخدام مخطط العمل هذا ، يتم تجميع أجزاء واجهة المشروع من أجزاء مستقلة تعمل معًا.
دان أبراموف، في مايو الماضي، كتبعلى تويتر أنه لا يفهم الواجهات المصغرة. إنه يعتقد أن المشكلات التي يجب حلها قد تم حلها بالفعل من خلال نماذج المكونات الجيدة. "ربما تكون الواجهات المصغرة حلاً لمشاكل تنظيمية وليست تقنية؟ على سبيل المثال ، عندما لا يتمكن فريقان من فرق التطوير من الاتفاق على أي شيء ، بما في ذلك البنية التحتية للمشروع ، "يقول.
هناك العديد من الأساليب لتطوير واجهات صغيرة: من التكامل الذكي للمكونات أثناء تجميع المشروع إلى تنظيم أجزاء مختلفة من التطبيق للعمل معًا أثناء تنفيذ التعليمات البرمجية باستخدام أساليب توجيه محددة. في هذه المقالة ، قمت بجمع أبرز الأدوات التي تهدف إلى تطوير الأجهزة ذات الواجهة الدقيقة.
1. منصة بت
تسمح لك منصة Bit بتجميع الواجهات الأمامية من مكونات مستقلة. يساعدك على تصميم وإدارة المكونات. ربما يكون هذا هو الحل الأكثر شيوعًا في قائمتي وهو الأفضل استعدادًا لتطوير الإنتاج.
إذا نظرت إلى الصفحة الرئيسية لـ bit.dev ، ستلاحظ أنه تم تجميعها من مكونات مستقلة. يتم إنشاء هذه المكونات من قبل فرق مختلفة ولها قواعد كود مختلفة وراء هذه المكونات. لكنها تتكامل جميعها مع بعضها البعض ، مما يسمح لك في النهاية بتكوين واجهة مشروع شاملة.
تم إنشاء Homepage bit.dev باستخدام المكونات ، وهو العمل الذي تم تنظيمه بمساعدة Bit
Command Line Tool Bit - وهو برنامج شائع يستخدم للتطوير ، بناءً على المكونات. باستخدام Bit ، يمكنك إنشاء مكونات وتجميع واجهات منها.
عادةً ما يُفهم Micro-frontend على أنه تجميع الواجهة أثناء تنفيذ كود المشروع. وتهدف منصة Bit إلى تشكيل واجهة أمامية أثناء بناء المشروع. يمنح هذا أولئك الذين يستخدمون هذه المنصة كلاً من الإمكانات المفيدة لـ "الأحجار المتراصة التقليدية" في شكل أمان وموثوقية ، ومزايا الأطراف الأمامية الدقيقة - بساطة الحلول وقابليتها للتوسع.
باستخدام Bit ، يمكن للفرق المختلفة إنشاء ونشر مكوناتها الخاصة بشكل مستقل ، والتفاعل مع الفرق الأخرى على مستوى API المكون. يتيح لك هذا تحويل تطوير الويب إلى عملية بناء مشاريع من وحدات منفصلة.
بالإضافة إلى أدوات التطوير المستند إلى المكونات ، يقدم مشروع Bit نظامًا أساسيًا قائمًا على السحابة للمطورين. تتيح لك المنصة التعاون في المكونات وإدارة عملية التطوير بفعالية وتوسيع نطاقها. في الوقت نفسه ، تظل الفرق المشاركة في العمل على الأجزاء الخاصة بها من مشروع معين مستقلة تمامًا.
يوفر Bit عملية CI / CD فريدة ، تعتمد بالكامل على المكونات ، والتي تهدف إلى تنظيم التجميع السريع للمشاريع. هذا يعني أنه يمكن للفرق المختلفة ، دون خوف من العواقب السلبية للمشروع ، إجراء تغييرات على أجزاء المشروع التي يقومون بتطويرها. لا يتعين عليهم انتظار الفرق الأخرى أو التنافس من أجل التغييرات على الفرع الرئيسي للمشروع. يمكن للمطورين بشكل مستمر وآمن ، دون خوف من العبث في تلك الأجزاء من المشاريع التي لا يشغلونها ، إجراء تغييرات على مكوناتهم. تنطبق هذه التغييرات على جميع التطبيقات التي تستخدم هذه المكونات.
نظام التكامل المستمر المعتمد على المكونات أسرع 50 مرة من النظام التقليدي
، ونتيجة لذلك يتم إثراء عملية التطوير بالقدرات التالية:
- قاعدة بيانات بسيطة بأجزاء منفصلة مستقلة عن بعضها البعض.
- فرق مستقلة.
- واجهات برمجة تطبيقات مدمجة ومحددة جيدًا.
- عمليات مستقلة لإطلاق المكونات النهائية.
- إمكانية التحسين التدريجي المستمر للمكونات.
فيما يلي مثال على تنظيم مماثل للعمل في المشاريع.
إذا كان فريقك يعمل في مجال التطوير القائم على المكونات ويبحث عن حل يستفيد من تقنية microfront-end ونهج معياري للعمل على التطبيقات الكبيرة ، فإنني أوصي بإلقاء نظرة على نظام Bit الأساسي . من الممكن أن يكون هذا هو بالضبط ما تحتاجه.
2. Webpack 5 و Module Federation Architecture
اقترح زاك جاكسون اتحاد الوحدات المعمارية لجافا سكريبت (MF). بدأ أيضًا في إنشاء مكون إضافي webpack لتنفيذ هذه البنية. بفضل جهود فريق webpack ، ظهر هذا المكون الإضافي في Webpack 5 وهو الآن في مرحلة تجريبية.
الفكرة وراء MF هي أن التجميعات المنفصلة المتعددة يجب أن تشكل طلبًا واحدًا. يجب ألا تحتوي هذه التجميعات المنفصلة على تبعيات لبعضها البعض ، مما يسمح لك بتطويرها ونشرها بشكل فردي. هذا مخطط بأسلوب واجهة ميكرو.
يسمح استخدام MF لتطبيق JavaScript باستيراد التعليمات البرمجية ديناميكيًا من التطبيقات الأخرى في وقت التشغيل. تقوم الوحدة النمطية بإنشاء ملف يقوم بتصدير قدراته ، وهو نقطة الدخول إلى الكود الذي يمكن تحميله بواسطة التطبيقات الأخرى. يتم ذلك عن طريق تكوين حزمة الويب وفقًا لذلك.
هذا النهج ، من بين أمور أخرى ، يحل مشكلة تبعيات الكود ومشكلة زيادة حجم الحزمة من خلال تنظيم مشاركة التبعية. على سبيل المثال ، إذا قمت بتحميل مكون React ، فلن يقوم التطبيق الذي قام بالفعل باستيراد React بإعادة استيراد رمز المكتبة. سيستخدم النظام كود React الذي تم استيراده بالفعل ويستورد رمز المكون فقط. أخيرًا ، يمكنك استخدام React.lazy و React.suspense لتوفير احتياطي في حالة فشل الشفرة المستوردة لسبب ما. سيساعد هذا في ضمان تجربة المستخدم الصحيحة حتى إذا كان التجميع الذي يعتمد عليه المشروع لا يعمل.
تفتح بنية اتحاد الوحدات النمطية إمكانيات مثيرة للغاية لتطوير واجهات صغيرة. يمكن العثور على تفاصيل حول هذه العمارة ومثال على استخدامها هنا .
3. مشروع سبا منفرد
يعرفه منشئو مشروع المنتجع الصحي الفردي بأنه "إطار عمل JavaScript لاستخدام الخدمات المصغرة في تطوير الواجهة الأمامية". إذا وصفنا جوهرها بإيجاز ، فيمكننا القول إنها تنفذ فكرة دورة حياة كيان ما كما هو مطبق على كل تطبيق فردي يتكون من المشروع. يمكن لكل تطبيق الاستجابة لأحداث التوجيه ويحتاج إلى معرفة كيفية النشر والتركيب في DOM وإلغاء التحميل من DOM. يتمثل الاختلاف الرئيسي بين SPA العادي (تطبيق صفحة واحدة) وما تحصل عليه في منتجع واحد هو أن تطبيقات السبا الفردية يجب أن تكون قادرة على التعايش مع التطبيقات الأخرى التي تشكل جزءًا من المشروع. ومع ذلك ، لا تحتوي هذه التطبيقات على صفحات HTML الخاصة بها.
نتيجة لذلك ، اتضح أنه إذا كنت بحاجة إلى استخدام أطر عمل أو مكتبات مختلفة في نفس الصفحة والتي تحتاج إلى التكامل مع بعضها البعض أثناء تنفيذ كود المشروع ، فيجب عليك إلقاء نظرة على المنتجع الصحي الفردي. إليك مقطع فيديو يوفر معلومات أساسية عن المشروع. يمكن العثور على بعض الأمثلة هنا .
4. محمل وحدة SystemJS
لا يعد مُحمل الوحدة SystemJS إطارًا لتطوير واجهات صغيرة ، ولكن هذا المشروع يحل مشكلة إدارة المستعرضات المتقاطعة للوحدات المستقلة ، والتي تعد مفتاح تنفيذ البنى الأساسية ذات الواجهة الدقيقة (يُستخدم هذا النهج بالفعل في المنتجع الصحي الفردي أيضًا).
يمكن اعتبار SystemJS بمثابة منسق وحدة JS. يسمح لك باستخدام ميزات متنوعة لهذه الوحدات ، مثل عمليات الاستيراد الديناميكية واستيراد الخرائط ، دون الاعتماد على آليات المتصفح القياسية. وكل هذا - بمستوى أداء قريب من ذلك الذي توفره الإمكانات المدمجة للمتصفحات. من بين الميزات المثيرة للاهتمام في SystemJS ، يمكننا ملاحظة وجود polyfill للمتصفحات القديمة ، واستيراد وحدات باستخدام الأسماء (عن طريق مطابقة أسماء الوحدات والمسارات معها) ، وتحميل عدة وحدات بطلب واحد (باستخدام API لتمثيل عدة وحدات كملف واحد)
يتيح لك SystemJS أيضًا العمل مع "وحدة تسجيل" بحيث يمكن للمطور معرفة الوحدات المتاحة في المتصفح في أي وقت. هنا الشروع في العمل مع SystemJS البرنامج التعليمي.
5. إطار بيرال
تم تصميم إطار عمل Piral لتسهيل تطوير تطبيقات البوابة باستخدام تقنيات microfront-end. يسمح لك Piral بإنشاء تطبيقات أمامية معيارية يمكن تمديدها في وقت التشغيل باستخدام بنية microfront-end باستخدام وحدات مستقلة تسمى pilet. يمكن تطوير التذاكر بشكل مستقل عن أجزاء أخرى من النظام ، بما في ذلك الرمز والموارد الضرورية الأخرى. إليك مقطع فيديو يوضح كيفية العمل مع Piral.
إذا كنت ترغب في استخدام Piral ، فأنت تحتاج فقط إلى محرر كود ومحطة طرفية ومتصفح و Node.js. يمكن تشغيل مثيل Piral (غلاف التطبيق) والأكوام (الوحدات النمطية) وتصحيحهما في المحاكي على جهاز التطوير المحلي.
العمل مع بيرال
6. افتح مشروع المكونات
يهدف مشروع Open Components إلى "جلب تكنولوجيا بدون خادم إلى عالم الواجهة الأمامية". بتعبير أدق ، تم إنشاء هذا المشروع كإطار عمل لتطوير microfront-end ، والذي يمنح المطور كل ما يحتاجه ، وإنشاء نظام بيئي يتضمن أدوات للعمل مع المكونات ، وسجل المكونات ، والقوالب ، وحتى أداة سطر الأوامر. يتكون مشروع Open Components من جزأين:
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
يوصف مشروع Qiankun بأنه "تنفيذ microfront-end على أساس منتجع صحي واحد ، ولكنه جاهز للاستخدام الإنتاجي." يهدف هذا المشروع إلى حل بعض المشكلات الأساسية المرتبطة بتجميع التطبيقات الكبيرة من الأنظمة الفرعية الصغيرة (التطبيقات الفرعية). تتضمن هذه المهام نشر الموارد الثابتة ، والجمع بين الأنظمة الفرعية ، وضمان استقلالية الأنظمة الفرعية عن بعضها البعض أثناء تطويرها ونشرها ، وضمان عزل النظام الفرعي أثناء تنفيذ التعليمات البرمجية ، ومعالجة التبعيات ، وضمان الأداء العالي للحلول.
مشروع Qiankun
8. إطار لويجي
Luigi هو إطار عمل JavaScript يركز على الأعمال لتطوير واجهات صغيرة تسمح لك بإنشاء واجهات مستخدم تستخدم مكونات محلية وخارجية. Luigi هو إطار عمل لتطوير تطبيقات الويب مستقل عن أطر عمل ومكتبات محددة. يوفر هذا الإطار للمطور الوسائل اللازمة لضمان عمل الأجزاء الفردية للتطبيق معًا.
يتكون إطار عمل لويجي من نظامين فرعيين. هذا هو التطبيق الرئيسي ومكتبات العميل. يعتمد التفاعل بينهما على واجهة برمجة تطبيقات postMessage.
هنا صندوق رمل حيث يمكنك تجربة Luigi. و هنا هو مستودع المشروع. بالمناسبة ، تعمل SAP على ذلك.
9. إطار عمل FrintJS
FrintJS هو "إطار عمل JavaScript نمطي لتطوير تطبيقات تفاعلية قابلة للتطوير." يتيح لك تحميل التطبيقات التي تم تجميعها بواسطة حزم مختلفة ، ويساعد في تنظيم التطبيقات ، ويحافظ على عمل آليات مثل معالجة التبعية والتوجيه بشكل صحيح. هذا الإطار ، بالإضافة إلى React (العمل مع هذه المكتبة موثق جيدًا ومختبر) ، يدعم ، من خلال حزم إضافية ، React Native و Vue.
FrintJS
→ هنا هو صندوق الحماية التفاعلي FrintJS
10. فسيفساء 9
Mosaic عبارة عن مجموعة من الخدمات والمكتبات التي توحدها المواصفات التي تحدد كيفية تفاعل المكونات عند تنظيم مواقع ويب كبيرة الحجم تم إنشاؤها باستخدام بنية الخدمات المصغرة. يستخدم Mosaic ما يسمى بـ "الأجزاء" ، والتي يتم صيانتها بواسطة خدمات منفصلة ويتم دمجها في وقت التشغيل وفقًا للترتيب المحدد في النموذج.
العمارة الفسيفسائية
يتم تمثيل مشروع الفسيفساء بمجموعة متنوعة من الحزم التي تهدف إلى حل المشكلات المختلفة. من بينها - التوجيه ، وتشكيل تخطيطات الصفحة ، وتخزين القوالب ، وعرض الواجهات.
11. إطار PuzzleJS
PuzzleJS هو "إطار عمل ذو واجهات صغيرة لتطوير مواقع ويب سريعة وقابلة للتطوير." يسمح لك بإنشاء مشاريع تسمى "بوابات" و "واجهات" (واجهة محل) تتواصل مع بعضها البعض. استلهم مبتكرو PuzzleJS من مشروع Facebook BigPipe ، فيما يتعلق بهندسة الواجهة المصغرة .
يتيح لك PuzzleJS PuzzleJS إنشاء "بوابات" و "واجهات" مستقلة عن طريق تخصيص تفاعلهم باستخدام ملف التكوين. يسمح لك بتحويل قوالب HTML إلى وظائف JavaScript في وقت الترجمة. هذه العملية مستقلة عن طلبات تحميل البيانات. نتيجة لذلك ، تبدأ الوظيفة ، استجابة لطلب ما ، في نقل البيانات بسرعة كبيرة ، مما يحسن مؤشر أداء صفحات الويب كوقت للبايت الأول. هذا الإطار ، نظرًا لاستخدام عرض المواد من جانب الخادم فيه ، يعد جيدًا من حيث تحسين محركات البحث. بالإضافة إلى ذلك ، إذا توقفت واجهة برمجة التطبيقات المطلوبة لتشغيل جزء معين من الصفحة عن الاستجابة للطلبات ، فإن هذا لا يعطل عمل الأجزاء الأخرى. هنا مثال واقعي لاستخدام PuzzleJS.
النتيجة
تشمل الأطر الأخرى التي يمكن استخدامها لتطوير واجهات صغيرة المنصة .
كما ترى ، إذا قررت إنشاء مشروع بناءً على بنية الواجهة الأمامية المصغرة ، فمن المؤكد أن لديك الكثير للاختيار من بينها.
ما هو شعورك حيال الواجهات الدقيقة؟
