من فترة كدة وتحديدا مع دخول webpack 5 تم اختراع فكرة جديدة اسمها module federation عملت ثورة في مجال السوفتوير

تعالوا بأة نتعرف علي العظمة الجديدة وازاي نستفيد منها

Webpack

ويب باك يا صديقي هو bundler tool بيجمع أجزاء التطبيق من مصادر مختلفة في bundle واحد

ودة بيقلل عدد الـ round trips بدل ما بنضطر كل شوية نروح نحمل ملف عن طريق الشبكة بنحمل الـ bundle مرة واحدة ودة بيخلي التطبيق اسرع

أثناء عملية التجميع دي ممكن يحصل عمليات transformation داخلية زي مثلا transpiling لكود Typescript لتحويله لكود javascript أو مثلا عمل minify لـ static file

او تقليل حجم الصور عشان تحميلها علي الشبكة يكون أسرع

Module Federation

مع دخول Webpack 5 ظهرت تقنية جديدة اسمها module federation

ودي بتساعدك تقسم التطبيق لتطبيقات صغيرة بحيث لما تجمعهم كلهم تعمل التطبيق النهائي

كل تطبيق ممكن يتعمل بتكنولوجي مختلفة ويتم نشرها بشكل مستقل تماما

يعني مثلا ممكن جزء يتبرمج ب Angular وجزء تاني يتبرمج بـ React وكل جزء يترفع علي سيرفر مستقل

كل تطبيق صغير من دول له تيم مستقل تماما

في النهاية بنجمع التطبيقات الصغيرة دي جوة container بيشكل التطبيق النهائي

التطبيق الرئيسي اللي بيمثل الـ container بنسميه host والتطبيقات الفرعية بنسميهم remotes

خد بالك ان ال host نفسه بكل ال remotes اللي جواه ممكن نخليه remote لـ host تاني اكبر منه

الفكرة دي خلتنا نقد نستخدم أي component لأي تطبيق تاني وكأنه جزء من التطبيق الحالي

البنية التحتية لموقع أمازون

خد عندك مثال

لو شوفنا موقع زي أمازون, موقع ضخم زي دة لا يمكن يتم انجازه بسهولة ولو اتعمل مرة واحدة أكيد هيكون فيه كمية اخطاء كبيرة اوي

دي غير ان عمليات الـ build والـ deploy هتبأة طويلة وهتاخد وقت طويل أوي

يعني كل مرة هتعمل تعديل بسيط جدا في أي جزء من التطبيق هتاخد وقت طويل أوي في الـ build ووقت وتكلفة عالية في ال deployment

الأسوأ من كدة ان أي غلطة في الابليكيشن هتوقف الأبليكيشن كله!

الحل هنا اننا نقسم الابليكيشن بتاعنا لأجزاء صغيرة, كل جزء مساقل بذاته تماما

وكل جزء له تيم متخصص فيه ويفهم تفاصيله كويس جدا وممكن كمان يختار تقنيات و framework مختلفة عن الاجزاء التانية

بل ويتم رفع كل جزء علي سيرفر مختلف

الحلو هنا ان لو حصل خطأ في أي تطبيق, باقية التطبيقات هتفضل شغالة عادي

مثلا ممكن تنقل الـ shopping card لتطبيق مستقل وله تيم مستقل

وتنقل كل مايخص الدفع وال integration مع ال payment gateways وتديها لتيم مساقل

أما عرض الـ products وتفاصيلها واسعارها لتيم تالت خالص

وكل تيم يقرر علي كيفه هيشتغل بأنهو framework

Microservices and micro front-end

الفكرة اللي طبقناها في أمازون اننا نقسم الابليكيشن الضخم لـ apps صغيرة

كل app مستقل تماما بذاته وله تيم مستقل وكل app معمول ب framework او حتي لغة برمجة مختلفة

وكل واحد فيهم بيترفع علي سيرفر مختلف

الفكرة دي بنسميها microservice والتواصل بين ال micro services دي بيكون عن طريق APIs

اما في الفرونت اند بنسميها micro front-end ودي بتكون شبه الـ microservices مع شوية اختلافات

بفضل تقنية module federation نقدر نخلي اي app يستخدم components بتاعة app تاني بعيد تماما عنه ودة تحديدا فكرة الـ micro frontend اللي هنتكلم عنها بتفاصيل أكتر الدروس القادمة

Native Federation

مع مرور الوقت الدنيا اتطورت أكتر وظهرت build tools غير webpack زي esbuild اللي يعتبر أسرع من webpack 10 مرات

هنا بأة مش هنقدر نستفيد بـ module federation لانها خاصية في webpack

لحسن الحظ فكرة ال federation بدأت تبأة مدعومة natively في المتصفحات الحديثة وخصوصا مع تطور ال ES modules

وأكيد هيكون لنا درس نتعلم فيه ازاي نشتغل بالطريقتين