نگهداری، توسعه، تست و پیاده‌سازی  Monolithic frontendها دشوار است. راه‌حل این دشواری micro frontendها هستند.و یک نوع معماری است که می‌تواند اثربخشی و کارایی را در بین تیم‌ها افزایش دهد. در سال‌های اخیر، محبوبیت میکروسرویس‌ها افزایش بسیاری یافته است. بسیاری از سازمان‌ها از این نوع معماری برای جلوگیری از محدودیت‌های بزرگ monolithic backendها استفاده می‌کنند. درحالی‌که مطالب زیادی در این باره نوشته شده است، بسیاری از شرکت‌ها همچنان در رابطه‌با monolithic frontendها مقاومت می‌کنند. در این مقاله، ما روندی را توصیف می‌کنیم که frontend monolithها را به قطعات بسیار کوچک‌تر و قابل‌کنترل‌تر تقسیم می‌کند و اینکه این معماری چگونه می‌تواند اثربخشی و کارایی را در بین تیم‌ها افزایش دهد. شکل 1 یک اپلیکیشن را نشان می‌دهد که در آن frontend از یک frontend monolith و backend آن از چندین میکروسرویس تشکیل شده است.
 .اگر تمایل دارد با معماری میکروسرویس بیشتر آشنا شوید .به دوره رایگان آموزش میکروسرویس در سایت سر بزنید و این دوره رایگان رو دانلود کنید وببینید

شکل (1)

Micro Frontend  چیست؟
تعریف micro frontends: ایده micro frontends این است که مفاهیم میکروسرویس‌ها را به دنیای frontend گسترش دهد. ایده اصلی micro frontends این است که frontend خود را به مجموعه‌ای از اپلیکیشن‌های frontend که به طور مستقل و با loosely coupled (حداقل وابستگی) قابل‌اجرا هستند، تقسیم می‌کند (micro frontends  نامیده می‌شوند). سپس این micro frontendها برای ایجاد یک اپلیکیشن frontend واحد، با هم ادغام شده و باندل می‌شوند (شکل 2 را ببینید). این مجموعه micro frontends در پاراگراف Integration Approaches Micro Front Ends موردبحث قرار می‌گیرد.

اولین سؤال چگونگی split کردن اپلیکیشن‌های front-end است؟ شما می‌توانید یک micro frontend در هر پیج نشان دهید و آن را با هایپر لینک‌ها کانکت کنید. همچنین آیا امکان نمایش چندین micro frontend در یک پیج وجود دارد؟ (شکل 2 را ببینید).

شکل (2)

برای سرعت بخشیدن به توسعه یک اپلیکیشن،micro frontendها را به‌عنوان بخش‌های عمودی جداگانه یک برنامه وب در نظر بگیرید (همچنینverticalsنامیده می‌شود). هرverticalمسئول یک دامنه تجاری واحد مورداستفاده مانند Profile،Catalog،Orderاست.اینpresentation layer(لایه نمایشی) ، لایه سرویس(microservice)، لایه ماندگاری و دیتابیس جداگانه خود را دارد.از نظر توسعه، هرverticalتوسط یک تیم اجرا می‌شود.

چرا این کار روند توسعه را سرعت می‌بخشد؟ هر تیمverticalبر یک دامنه تجاری متمرکز است و بنابراین نیاز به هماهنگی کمتری با سایر تیم‌ها دارد.ترجیحاً هیچ کدی بینverticalهای مختلف به اشتراک گذاشته نمی‌شود.این باعث افزایش سرعت پردازش توسعه می‌شود. برای سادگی، در این مقاله، ما فقط بر روی لایه نمایشیverticalتمرکز می‌کنیم.

اپلیکیشن نمونه

در ادامه یک اپلیکیشن را به‌عنوان‌مثال توصیف می‌کنیم که ازmicro frontendها استفاده می‌کند. وب‌سایتی را تصور کنید که در آن کاربران می‌توانند غذا را برای تحویل سفارش دهند.اول، شما یک صفحه فرود دارید که در آن کاربران می‌توانند رستوران‌ها را جستجو کرده و فیلتر کنند.اینmicro frontendبرای این مورداستفاده می‌شود (شکل 4 را ببینید):micro-frontend-browse-restaurants.

سپس هر رستوران پیج مخصوص خود را دارد که آیتم‌های منو در آن نمایش داده می‌شود و مشتری می‌تواند سفارش خود را انتخاب کند (شکل 3 را ببینید).برای این منظور ازmicro-frontend-order-food  استفاده می‌شود.در نهایت، مشتریان یک پیج پروفایل دارند که می‌توانند سابقه سفارش خود را مشاهده کرده، سفارش را پیگیری کرده و گزینه‌های پرداخت خود را سفارشی کنند micro-frontend-user-profile.برای این کار استفاده می‌شود.

این اپلیکیشن نمونه در سراسر ادامه این مقاله استفاده می‌شود.

شکل (3)

معماری

معماری این اپلیکیشن به شرح زیر است:

چندینmicro frontendsدر هر پیج نشان داده می‌شود و یک اپلیکیشن کانتینر به‌عنوان نقطه ورود اصلی استفاده می‌شود (شکل 4 را ببینید) و مسئول موارد زیر است:

• مسیریابی درخواست‌ها و تجمیع پاسخ‌هایbackend
• مدیریت Cross-cutting concernsمانند احراز هویت و سندیت، مجوز، لاگین، کَش کردن وجهت‌یابی مسیرهای مختلف.
• micro frontendهای مختلف (توزیع شده) را با هم در پیج قرار می‌دهد و تعیین می‌کند که کدامmicro frontendباید در کجا و در چه زمانی ارائه شود.

شکل (4)

Integration Approaches Micro Front Ends

منظور ازintegration approachesاین است که چگونه می‌توانmicro frontendsرا درfrontendباندل کرد؟ شکل 5 سهintegration approachesرا نشان می‌دهد.

شکل (5)

برایBuild time integration، ما هر یک ازmicro frontendرا به‌عنوان یک پکیج منتشر می‌کنیم.درBuild time، اینmicro frontendsجداگانه با استفاده ازpackage.jsonاپلیکیشن کانتینر، بسته‌بندی می‌شوند .Monorepoبرای ادغامBuild timeاستفاده می‌شود. با استفاده ازMonorepoمی‌توانید تمام کد خود را در چندین کتابخانه در یک مخزن مدیریت کنید.کتابخانه‌ها می‌توانند شامل ویژگی‌ها، اجزاء، ابزارهای کاربردی یا کیتUIباشند.ایدهMonorepo  این است که به‌راحتی می‌توانید از ویژگی‌های ایجاد شده در   monorepoاستفاده مجدد کنید.عیب بزرگ Monorepoاین است که باید مجدداً کامپایل کرده و هرmicro frontendرا درMonorepoمنتشر کنیم که باعث ایجاد تغییر در یکmicro frontendجداگانه شود. برای ایجاد و نگهداریMonorepoمی‌توانید ازLerna،NrwlیاAngular Workplaceاستفاده کنید.

Server-Side Integration

SSIدر حال ارائهHTMLروی سرور از چندین فرمت یا قطعه است. این قطعات نمایانگرmicro frontendها هستند.در مثال زیر،index.htmlنشان‌داده‌شده است که ازserver-sideشامل قطعاتی از فایل‌هایHTMLاستفاده می‌کند (شکل 6 را ببینید).

 شکل (6)

index.html

ما این فایل را با وب سرورNginxارائه می‌دهیم (شکل 7 را ببینید) ، متغیر$ PAGEرا مطابق باURL(Uniform Resource Locator)درخواست شده پیکربندی می‌کنیم؛ بنابراین اگر کاربرURL /browseرا انتخاب کند، متغیر$ PAGEبا قطعه HTML browse پر می‌شود.

شکل (7)

Nginx

موردی که اینجا نشان داده نشده است نحوه پایان یافتن بخش‌های مختلف قطعهHTMLدر سرور وب است.فرض بر این است که هرکدامpipelineساخت خود را دارند و به ما اجازه می‌دهند بدون تأثیر بر پیج دیگر، در یک قطعه تغییراتی ایجاد کنیم.

Runtime Integration

Runtime Integration باندل کردن و پیکربندیmicro frontendsدرfrontendدرRuntimeاست (شکل 5 را ببینید). در این وضعیت،package.json  برای باندل کردن micro frontendها استفاده نمی‌شود. در مثال زیر،Web Components  به‌عنوان تکنیکی برای ایجادmicro frontendsاستفاده می‌شود.اینWeb Componentsهمچنین می‌توانند برایintegration approachesقبلی استفاده شوند.

Web Componentsچیست؟

به طور خلاصه،Web Componentsاجزای ایزوله شده‌ای هستند که می‌توانید (مجدداً) در پیج‌های     HTML  و اپلیکیشن‌های وب استفاده کنید. Web Componentsهمچنین به‌عنوان عناصر خاص (Custom Element)شناخته می‌شوند. به‌عنوان یک توسعه‌دهنده، می‌توانیدCustom Elementخود را بنویسید که اساساً عنصرHTMLشما باCSS،HTMLوJavascriptاست.اینCustom Elementبر اساس استانداردهای وب بوده و می‌تواند در رایج‌ترین مرورگرها استفاده شود. Web Componentها به دلیل عدم وابستگی آنها به فریم‌ورک یا کتابخانه،یکی از تکنولوژی‌های بسیار محبوب در آینده خواهند بود (منسوخ نخواهند شد).یعنی به هیچ فریم‌ورکی نیاز نداشته و با تمام فریم‌ورک‌ها سازگار هستند وبنابراین به‌عنوان یک تکنیک برای ساختن یکmicro frontendبسیار مناسب است.

چگونگی ساخت یکWeb Component

در این مثال، ما قصد داریمWeb Component خود را از پیجorder food(شکل 3 را ببینید) از اپلیکیشن مثالی خود ایجاد کنیم. نام این وب کامپوننتmicro-frontend-order-foodاست و در این مثال (شکل 8 را ببینید) دارای پارامترهای زیر است: data-name،data-imgوdata-menu.

شکل (8)

پیاده سازی اینWeb Componentبه این شکل است (شکل 9 را ببینید).برای حفظ سادگی مثال، آیتم‌های منو حذف شده است.

برای اینWeb Component، ابتدا یک کلاس تعریف می‌کنیم کهHTMLElementرا گسترش می‌دهد.باHTMLElement می‌توانید یک عنصرCustom HTML  ایجاد کنید.در سازنده، اول super ()فراخوانی می‌شود، بدین معنی که می‌توان از تمام منطقHTMLElementبرای ساخت یکWeb Componentاستفاده کرد.بعد، یک((Document Object Model  shadow DOMرا بهWeb Componentضمیمه می‌کنیم .shadow DOMیکDOM ایزوله شده یاViewاست که چیزی را برای اینWeb Componentنمایش دهد.

ما تصویر موردنظر را باdocument.createElement ('img')به‌عنوان‌مثال ذکر می‌کنیم و مشخصه‌های'alt'و'src'را با استفاده از پارامترهای پاس شده تنظیم می‌کنیم: data-name و data-img. سپس تصویر به shadow DOMما باshadow.appendChild (img)اضافه می‌شود.

شکل (9)

و در نهایت، یکCustom Element / Web Componentجدید با موارد زیر تعریف شده است:

JavaScript

customElements.define(‘ micro-frontend-order-food’, MicroFrontendOrderFood)

اینWeb Componentراmicro-frontend-order-foodمی‌نامند. ما می‌توانیم از این موارد در صفحاتHTMLخود برای نمایش تصویر با متن استفاده کنیم.

مثالRuntime Integrationبا Web Components

یکindex.html در شکل 10 نشان‌داده‌شده است که اپلیکیشن نمونه ما(ordering food)را شبیه‌سازی می‌کند. اینindex.htmlدر اینجا نشان‌دهنده اپلیکیشن کانتینری است که از مسیریابی و رندرینگmicro frontendها میان سایر چیزها محافظت می‌کند.در بالا،micro frontendهای ما دارای<script> tags هستند.micro-frontend-order-foodکه موردبحث قرار گرفت، دربسته نرم‌افزاری جاوا اسکریپت تعریف شده است:https: // order.example.com/bundle.js

<div id="micro-frontend-root">یکplaceholderاست که در آنmicro frontendها انتخاب شده و ارائه می‌شوند.webComponentsByRouteثابت دارای یک جدول جستجو برای تعیینweb component / micro frontendاست که می‌خواهید هنگام انتخاب یک مسیر ارائه دهید. webComponentType  ثابت شاملmicro frontendانتخاب شده واقعی بر اساس مسیر انتخاب شده از طریقwindow.location.pathname  می‌باشد.

شکل (10)

با استفاده از) document.createElement web ComponentType)ماmicro frontendانتخاب شده را به‌عنوان‌مثال در نظر می‌گیریم. درنهایت بهplaceholder: <div id="micro-frontend-root">لینک داده می‌شود.این کار باroot.appendChild(webComponent) انجام می‌شود.مثال بالا صریحاً یک مثال اولیه و بدوی است، اما رویکرد ادغامRuntimeرا نشان می‌دهد.

از کدام رویکردIntegrationاستفاده کنیم؟

باتوجه‌به نمودار زیر (در شکل 11) متوجه خواهید شد که در کدام موقعیت از کدام رویکردIntegrationمی‌توانید استفاده کنید.برای اپلیکیشن‌های کوچک یا غیر پیچیده (جایی که 1 یا 2 تیم روی آن کار می‌کنند) می‌توانید رویکردهایintegrationرا نادیده بگیرید و فقطfrontend monolithرا فرض کنید.

شکل (11)

کتابخانه کامپوننتUIشامل مجموعه‌ای از بلوک‌های ساختUI، مانند عناصر ورودی، لیست‌ها، تب بارها، و شبکه‌ها و غیره است.

شما می‌توانید انتخاب کنید که هرmicro frontendدارای کتابخانهUI Componentمختص به خود باشد (شکل 12 را ببینید). از معایب آن می‌توان به کد تکراری (duplicate)و امکان سازگاری و ثبات کمتر در طراحی و عملکرد اجزایUIاشاره کرد. همچنین برای ثبات بیشتر، می‌توانیم کتابخانه کامپوننتUIژنریک را به کار ببریم.از معایبش این است کهmicro frontendها از طریق این کتابخانه به هم لینک داده می‌شوند. اگر یک کامپوننتUIژنریک را انتخاب می‌کنید، مطمئن شوید که فقط حاوی منطقUIاست و هیچ منطق تجاری یا دامنه‌ای ندارد.قراردادن منطق دامنه (domain logic)در یک کتابخانه مشترک، وابستگی بالایی رابینmicro frontendایجاد می‌کند.

 شکل (12)

ارتباط بینMicro Frontends

یکی از سؤالات متداول در موردmicro frontendها نحوه ایجاد ارتباط آنها با یکدیگر است. عموماً توصیه می‌شود ارتباطاتmicro frontendها تا حد کم و ممکن برقرار شود چون این یک لینک ناخواسته را معرفی می‌کند که ابتدا سعی می‌کنیم از آن اجتناب کنیم.بااین‌وجود، اغلب مقدار معینی ارتباط بین micro frontendها موردنیاز است. Custom events(رویدادهای سفارشی) باعث می‌شود تاmicro frontendها با هم ارتباط غیرمستقیم برقرار کنند. Eventها را می‌توان باEvent constructor(سازنده رویداد) به شرح زیر ایجاد کرد:New Event(build) (شکل 13 را ببینید).

 به‌عنوان‌مثال،dispatchEvent  می‌تواند درmicro frontend Xبرای ارسال رویدادی به نام"build"آغاز شود. سپسMicro frontend Yشنونده این رویداد می‌شود (با استفاده از متد addEventListener) و پردازش‌های بیشتری را انجام می‌دهد.

شکل (13)

نتیجه‌گیریMicro Frontends

Micro frontendها همه در مورد تجزیه یک برنامه وب بزرگ بهVerticalsهستند.انتخاب‌های تکنولوژی ما، پایگاه‌های کد، تیم‌ها و فرایندهای انتشار ما(CI/CD)در حالت ایدئال می‌توانند بدون هماهنگی بیش از حد بین سایر تیم‌ها، مستقل از یکدیگر کارکرده و تکامل یابند.این معماری جنبه منفی نیز دارد. در اینجا به چند مورد اشاره می‌کنیم:

اگر بخواهید در کل برنامه وب تغییری ایجاد کنید، باید تغییراتی را درmicro frontendهایی (و میکروسرویس‌ها) که توسط تیم‌های مختلف دیگر اجرا شده است، ایجاد کنید.

برای تستintegrationکل برنامه وب، باید اپلیکیشن‌ها و سرورهای مختلفی را راه‌اندازی کنید.مشکل در آزمایش وابستگی‌ها و ارتباط بینmicro frontendها (توزیع شده) است.

micro frontendهای مستقل می‌توانند حاوی کد تکراری باشند که باعث افزایش تعداد بایت‌هایی می‌شود که باید برای کاربران نهایی خود در شبکه ارسال کنیم.کد تکراری همچنین به معنی تعمیر و نگهداری بیشتر، احتمال خطای بیشتر و سازگاری کمتر در طراحی و عملکرد اجزایUIاست.

علاوه بر این، موارد کاربردی زیادی وجود دارد که در آنهاmicro frontendمزایایی را ارائه می‌دهد.سازمان‌های بزرگی مانندSpotifyیاIKEAموفق شده‌اند به‌تدریج ازmicro frontendها در کدبیس های قدیمی و جدید استفاده کنند.این شرکت‌ها با استفاده ازmicro frontendها می‌توانند سریع‌تر به تغییرات در بازار پاسخ دهند و تجربیات مشتری را ارائه دهند و با این کار برند خود توسعه دهند.