چطوری معماری میکروفرانت اند رو طراحی کنم؟

برای انجام این کار بهتره اول به درک صحیحی از این معماری برسیم.

این معماری از معماری میکرو سرویس در بک اند الهام گرفته، به گونه ای که یک اپلیکیشن میتونه از اپ (یا ماژول) های کاملا مستقلی پیاده سازی بشه که هر کدوم از این میکروفرانت اند ها لزوما هم با یک کتابخانه یا فریم ورک نوشته نمیشن مثلا فرض کنید یک اپ فروشگاهی دارید در حالی که header آن با ریکت نوشته شده ، قسمت سبد خرید با انگولار نوشته شده و بخش محصولات با vue نوشته شده.

این رو صرفا یک مثال در نظر بگیرید زیرا انتخاب کردن اینکه کدوم بخش اپ باید با کدام فریم ورک یا کتابخانه پیاده سازی بشه خودش نیازمند بحث فلسفی و منطقی است (به علاوه که لزوما هم قرار نیست از چند فریم ورک یا کتابخانه استفاده بشه میتونه حتی همه میکروفرانت اند ها انگولاری باشند، این ها رو فقط نیازمندی مشخص میکنه).

در عین حال فرض کنید هر تیم در شرکت قراره روی یکی از این میکروفرانت اند ها کار کنند.

این معماری کمک میکنه تا هر تیم بتونه به صورت کاملا مستقل اپ خودش رو توسعه بده و هر زمان که لازمه بدون نیاز به دیپلوی کل پروژه ، میکروفرانت اند خودش رو بیلد و دیپلوی کند.

در عین حال در UI نهایی فقط همان قسمت آپدیت شود.

حالا که فهمیدیم این معماری قراره چطوری بهمون کمک کنه بریم سراغ اینکه چطوری آن را طراحی کنیم:

• در قدم اول باید بیزنس سازمان را به خوبی درک کرده و به آن مسلط باشید تا بتوانید نیاز مندی ها را به درستی شناسایی کنید و بتوانید بخش های مختلف را که باید به صورت مستقل توسعه یابند را تعیین کنید.
• قدم بعدی تصمیم‌گیری در مورد تکنولوژی‌ها و ابزارهای مورد استفاده است. ممکن است هر میکرو فرانت‌اند از تکنولوژی‌های مختلف استفاده کند (Angular, React, Vue.js).
• طراحی لایه های معماری یعنی:

لایه Composition: که مسئول طراحی نحوه ترکیب و نمایش میکرو فرانت‌اندها درUI است.

لایه Integration: که مسئول طراحی نحوه هماهنگی و ارتباط بین میکرو فرانت‌اندها است.

پیاده‌سازی Composition Layer:

این لایه تعیین میکند که در یک اپ میکروفرانت اند های مختلف باید از نظر UI ای کجای صفحه قرار بگیرند مثلا Header باید بالای صفحه قرار بگیرد یا مثلا وقتی کاربر وارد صفحه سبد خرید خود شد Card باید سمت راست صفحه قرار بگیرد.

این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.

برای طراحی Client Side باید از روش هایی مثل Module Federation برای بارگزاری و ترکیب میکروفرانت ها در مرورگر استفاده کند. خب همونطور که مشخصه هنگام لود شدن اپ میکروفرانت های صفحه جاری به همراه فایل های JS , Css خود لود میشوند و این فایل ها باید با هم ترکیب بشن تا بتونن به صورت یکپارچه در مرورگر نمایش داده بشن.

برای طراحی Server Side، میتوانید از تکنیک‌هایی مانند Edge-Side Includes (ESI) برای ترکیب میکرو فرانت‌اندها در سمت سرور بهره ببریم. خب قاعدتا سرعت بارگزاری صفحه در این روش بیشتر است چون این ترکیب شدن در سمت سرور اتفاق میوفتد.

سپس باید یک Shell Application طراحی و پیاده سازی کنید که مسئولیت بارگذاری و نمایش میکرو فرانت‌اندها را بر عهده دارد.

سپس از Router برای مدیریت مسیریابی و بارگذاری میکرو فرانت‌اندهای مختلف استفاده کنید.

پیاده‌سازی Integration Layer:

همونطور که گفتیم این لایه مسئول طراحی نحوه هماهنگی و ارتباط بین میکرو فرانت‌اندها است.

برای هماهنگی و ارسال و دریافت وضعیت و داده‌ها بین میکرو فرانت‌اندها میتوانید از State Management مانند Redux یا NgRx استفاده کنید.

برای هماهنگی و ارسال و دریافت ایونت ها بین میکرو فرانت‌اندها هم میتوانید از ابزارهایی مانند Event Bus استفاده کنید.

• نکته دیگه که حتما باید به آن توجه کنید اینه که باید حتما یک DSL یا Design System Language برای یکپارچه شدن ظاهر اپلیکیشن داشته باشید.
• مورد دیگری که باید انجام شود اعمال سیاست‌های امنیتی است که مطمئن شوید هر میکروفرانت‌اند فقط به سورس های مجاز دسترسی داشته باشد. مانند URL Whitelisting و OAuth2 یا OpenID Connect و ... که باید به طور مفصل درمورد آنها مطالعه کنید.
• تهیه مستندات جامع برای هر میکرو فرانت‌اند، شامل نحوه استفاده، ساختار کد، و تعاملات با سایر میکرو فرانت‌اندها.

امیدوارم این مقاله براتون مفید واقع بشه :)