مشتریان مدرن نیازهای بیشتری نسبت به قبل برای یک برنامه وب دارند. با انتخاب گسترده ای از برنامه های کاربردی موبایل و وب که امروزه وجود دارد، کافی نیست که یک برنامه به سادگی وظایف خود را همانطور که تبلیغ می شود انجام دهد. همچنین باید بسیار در دسترس، مقیاس‌پذیر و سریع باشد و به‌روزرسانی‌ها و ویژگی‌های جدید باید به طور منظم و بدون مشکل منتشر شوند.
برای مدتی طولانی، ایجاد یک برنامه وب مدرن موفق به معنای غلبه بر محدودیت‌های یک بک اند یکپارچه بوده است. یکی از محبوب ترین رویکردها برای آن استفاده از میکروسرویس ها برای توسعه بک اند شما است. با این حال، این روزها، بیشتر و بیشتر می بینیم که برنامه ها زمانی که دارای یک ظاهر یکپارچه نیز باشند، می توانند با مشکلات جدی مواجه شوند.
با افزایش حجم بسیاری از برنامه‌های وب جدید، و با افزوده شدن مداوم قابلیت‌های جدید، خلاص شدن از مضراتی که یک صفحه ظاهری یکپارچه ارائه می‌دهد به یک سوال داغ تبدیل می‌شود. آیا معماری micro-frontend می تواند پاسخی باشد که تیم های توسعه نرم افزار به آن نیاز دارند؟ ما برخی از اطلاعات ضروری را گردآوری کرده‌ایم که ممکن است به شما در درک بهتر موضوعات کمک کند.
چرا میکروسرویس؟
اگرچه ممکن است قبلاً با میکروسرویس ها آشنایی کامل داشته باشید، بیایید به سرعت مفهوم را مرور کنیم تا مزایای استفاده از این معماری را بهتر درک کنیم. ایده اصلی پشت میکروسرویس ها توسعه اپلیکیشن ها به عنوان مجموعه ای از سرویس های مستقل کوچکتر است که با یکدیگر ارتباط برقرار می کنند تا به عنوان یک راه حل واحد کار کنند.
مزایای متعددی وجود دارد که می توانید از پیاده سازی میکروسرویس برای برنامه وب خود به دست آورید. وقتی اجزای مستقلی دارید که سیستم گسترده‌تری شما را تشکیل می‌دهند، توسعه، آزمایش و استقرار آنها بدون خطر خرابی کل برنامه در صورت بروز مشکل آسان‌تر می‌شود. کل فرآیند توسعه وب نیز سریع‌تر انجام می‌شود، زیرا لازم نیست هر بار که عملکرد جدیدی اضافه می‌کنید، کل پایگاه کد یکپارچه را بررسی کنید.
میکروسرویس‌ها همچنین افزایش یا کاهش مقیاس را آسان‌تر و کم‌هزینه‌تر می‌کنند، زیرا به جای دریافت منابع بیشتر برای کل برنامه، فقط باید سرویس دقیقی را که به آن نیاز دارد، مقیاس کنید.
معماری میکرو-فرانت اند
معماری Micro-frontend تماماً در مورد استفاده از عناصر کوچکتر مانند microservices برای توسعه ظاهر برنامه شما است. خود این اصطلاح از سال 2016 وجود داشته است و همچنان مورد توجه بیشتری قرار می گیرد. ایجاد میکرو فرانت‌اند شامل تقسیم فرانت اند برنامه شما به چندین مؤلفه یا حتی برنامه‌های میکرو است. این عناصر همچنان به‌عنوان یک برنامه کاربردی برای کاربر نهایی کار می‌کنند، اما کار روی آنها را به صورت جداگانه و با چندین تیم مستقل امکان‌پذیر می‌سازند.
به عنوان مثال، یکی از رویکردهای محبوب برای micro-frontend ها، ایجاد یک متا فریم ورک با ReactJS، Vue، Angular و غیره است که سیستمی از برنامه های تک صفحه ای را در یک صفحه وب ترکیب می کند.
به عنوان یک قاعده، هر تیمی که بر روی ریز فرانت‌اندهای مختلف کار می‌کند، دارای عملکرد متقابل است، بنابراین آنها روی هر چیزی که یک سرویس خاص برای عملکرد نیاز دارد، از رابط کاربری گرفته تا پایگاه داده، کار می‌کنند. تیم‌های مختلف معمولاً روی بخش‌های مختلف منطق کسب‌وکار تمرکز می‌کنند و ویژگی‌های جداگانه‌ای را به‌صورت سرتاسر توسعه می‌دهند. هنگامی که برنامه در حال استفاده است، این یک رویکرد محبوب است که همه اجزا را به طور همزمان بارگذاری نکنید. به عنوان مثال بسته به اینکه کدام قسمت از عملکرد در حال استفاده است، ماژول ها یا اجزای مختلف رابط کاربری ممکن است در زمان اجرا بارگذاری شوند.
برخی از نمونه‌های معمولی از micro-frontends را می‌توان در شبکه‌های اجتماعی محبوب یافت. footer ها و هدر یک صفحه وب اغلب به عنوان اجزای جداگانه توسعه داده می شوند و قسمت های مختلف صفحه، به عنوان مثال. مجموعه ای از تصاویر مورد علاقه، به عنوان برنامه های میکرو ساخته شده است. هر یک از این مؤلفه‌ها معمولاً پایگاه‌های کد جداگانه‌ای دارند، می‌توانند stack فناوری متفاوتی داشته باشند، و تیم‌های متعددی که روی آنها کار می‌کنند حتی می‌توانند فرآیندهای انتشار متفاوتی داشته باشند. گزینه دیگر می تواند ایجاد صفحات جداگانه از یک برنامه وب به عنوان برنامه های میکرو باشد.
معماری Micro-frontend در مقایسه با frontendهای یکپارچه به شما آزادی بیشتری می دهد. با تیم‌های مستقلی که روی برنامه‌های میکرو کار می‌کنند، کل فرآیند توسعه frontend می‌تواند سریع‌تر و کارآمدتر شود، اگرچه این بستگی به این دارد که آیا می‌توانید ارتباطات عالی بین تیم‌ها را سازماندهی کنید یا نه.
رویکردهای یکپارچه سازی میکرو فرانت اند
بنابراین، ایده کلی در مورد کارهای مفهومی micro-frontend واضح است، ظاهر شما به عناصر کوچکتر و قابل مدیریت تقسیم می شود. به عنوان یک قاعده، این عناصر کوچکتر توسط یک برنامه کانتینری کنترل می شوند که مسئول رندر کردن عناصر معمول یا سفارشی صفحه در جایی که و در مواقع ضروری است و رسیدگی به نگرانی های سراسری مانند ناوبری، احراز هویت و غیره است. با این حال، دستیابی به این امر به روش های مختلف امکان پذیر است. بیایید نگاهی به برخی از رویکردهای محبوبی که برای پیاده سازی معماری micro-frontend استفاده می شود بیندازیم.
رندر کردن فرانت‌اندهای میکرو
وقتی صحبت از رندر کردن میکرو فرانت‌اند در صفحه می‌شود، روش‌های متعددی وجود دارد، اما iframe یا اجزای وب معمولاً راه‌حل‌های محبوبی در نظر گرفته می‌شوند.
آی فریم ها
ادغام زمان اجرا با استفاده از iframes شاید ساده ترین روش باشد. استفاده از iframe برای ساختن عناصر فرعی مستقل که به نوبه خود برای ایجاد یک صفحه کامل از یک برنامه استفاده می شوند، نسبتاً آسان است. با iframes، وقتی صحبت از استایل و متغیرهای جهانی می شود، می توانید روی درجه خاصی از انزوا حساب کنید.
با این حال، به دلیل همان قابلیت جداسازی، iframe ها انعطاف کمتری دارند. اگر می‌خواهید یک برنامه کاملاً ریسپانسیو بسازید، با مشکلات دیگری روبرو خواهید شد و ادغام بخش‌های جداگانه برنامه و اطمینان از ارتباط مؤثر برای پیوند عمیق یا مسیریابی می‌تواند بسیار پیچیده باشد. این رویکرد یکی از روش های قدیمی است و این روزها از محبوبیت زیادی در بین توسعه دهندگان frontend برخوردار نیست.
اجزای وب
رویکرد دیگری برای یکپارچه سازی زمان اجرا وجود دارد که در آن انواع عناصر کامپوننت وب سفارشی را تعریف می کنید. سپس، یک کانتینر برای ایجاد نمونه ای از این عناصر HTML جزء وب در صورت لزوم و پیوست آن به صفحه وب استفاده می شود. این رویکرد بیشتر در مورد استفاده از قابلیت های بومی ارائه شده توسط مرورگرها و مشخصات مؤلفه وب است.
تغییر محتویات صفحه
همچنین روش‌های مختلفی برای تغییر محتوای یک صفحه وب در هنگام تعامل با یک برنامه وجود دارد.
جاوا اسکریپت
استفاده از جاوا اسکریپت برای ادغام زمان اجرا را می توان پرکاربردترین رویکرد و همچنین انعطاف پذیرترین روش در نظر گرفت. این کار با افزودن چند ریز فرانت اند به صفحه از طریق تگ اسکریپت انجام می شود. هنگامی که ریز فرانت‌اندها بارگذاری می‌شوند، عملکردهای سراسری خاصی را به عنوان نقاط ورودی خود در معرض نمایش می‌گذارند و یک برنامه کانتینری واحد برای کنترل اینکه کدام میکرو فرانت‌اند، کجا و چه زمانی نصب و رندر شوند استفاده می‌شود.
رویکرد جاوا اسکریپت در مقایسه با iframe ها به ما انعطاف پذیری بیشتری می دهد. ایجاد یکپارچگی بین عناصر برنامه، انتقال داده ها در هنگام رندر شدن میکرو فرانت اند و غیره آسان تر است.
گزینه های دیگر
اگرچه ادغام micro-frontends در زمان اجرا معمولاً به عنوان یک راه حل ارجح پذیرفته می شود، راه های دیگری برای توسعه یک برنامه micro-frontend وجود دارد.
به عنوان مثال، می توانید از رندر سمت سرور HTML از چندین عنصر یا قالب استفاده کنید. عناصر رایج یک صفحه وب در فایل index.html گنجانده شده و محتوای HTML مخصوص صفحات مختلف از طریق سمت سرور وصل می شود. این رویکرد نسبتاً قدیمی است و باید برخی از شرایط خاص را برآورده کند تا به عنوان یک معماری micro-frontend در نظر گرفته شود، همه اینها به این بستگی دارد که آیا می‌توانید تیم‌های توسعه و استقلال پایگاه کد را حفظ کنید.
ساختن ریز فرانت‌اندها گاهی اوقات با انتشار هر اپلیکیشن میکرو به‌عنوان یک بسته و گنجاندن این بسته‌ها به‌عنوان وابستگی‌های کتابخانه توسط برنامه کانتینر نیز انجام می‌شود. ادغام micro-frontends در زمان ساخت، اطمینان از اتصال ضعیف عناصر برنامه را دشوارتر می کند، به همین دلیل است که یکپارچه سازی زمان اجرا گزینه بهتری در نظر گرفته می شود.
اصول کلی میکرو-فرانت اند
مهم نیست که چه رویکردی را برای مقابله با میکرو فرانت‌اندها در برنامه وب خود انتخاب می‌کنید، ایده‌های کلی خاصی وجود دارد که ممکن است بخواهید برای دستیابی به بهترین نتایج در ذهن داشته باشید:
به تیم هایتان اجازه دهید استک های خود را انتخاب کنند. مستقل بودن از فناوری راهی است برای اطمینان از اینکه هر یک از برنامه های میکرو شما می توانند عملکردهای خود را به بهترین شکل ممکن انجام دهند. و برای ایجاد یک رابط خنثی و پنهان کردن جزئیات پیاده سازی، تیم های شما می توانند از عناصر سفارشی استفاده کنند.
به اشتراک گذاری زمان اجرا ممکن است بهترین ایده نباشد، بنابراین مطمئن شوید که کد تیم را ایزوله کنید. شما نمی خواهید به متغیرهای جهانی یا وضعیت مشترک وابسته باشید، حتی اگر تیم های شما از چارچوب خود استفاده نمی کنند.
اگر گزینه دیگری برای جداسازی وجود ندارد، با استفاده از قراردادهای نامگذاری، مالکیت واضح را تعریف کنید. پیشوندهای تیم و فضای نام CSS، رویدادها، فضای ذخیره‌سازی محلی و غیره را ایجاد کنید تا مطمئن شوید تیم‌های مختلف با کار یکدیگر تداخل ندارند.
رویدادهای مرورگر معمولاً انتخاب بهتری برای ارتباطات میکرو فرانت اند نسبت به سیستم جهانی PubSub هستند. ساده نگه داشتن آن و انتخاب ویژگی های بومی مرورگر از طریق API های سفارشی، سرعت توسعه را افزایش می دهد و تعداد خطاهای احتمالی را کاهش می دهد.
روی تاب آوری تمرکز کنید. حتی در شرایطی که جاوا اسکریپت نمی تواند اجرا شود، برنامه باید مفید باقی بماند. بهبود پیشرونده و رندر سراسری به ایجاد یک طراحی وب انعطاف پذیر کمک می کند. یافتن راه هایی برای بهبود عملکرد درک شده این است که چگونه می توانید کاربران نهایی خود را خوشحال کنید.
مزایای Micro-frontend
معماری Micro-frontend با گذشت زمان محبوبیت بیشتری پیدا می کند و دلایل متعددی برای آن وجود دارد. اکنون که میکرو فرانت‌اندها را بهتر درک می‌کنیم، بیایید ببینیم این معماری ظاهری دقیقاً چه چیزی می‌تواند به شما بدهد.
توسعه سریع تر
یکی از مزایای واضح‌تر که از پیاده‌سازی معماری micro-frontend حاصل می‌شود، فرصت توسعه و استقرار سریع‌تر کد است. وقتی چندین تیم دارید که روی بخش‌های جداگانه برنامه کار می‌کنند، هر تیم مستقل از تیم‌های دیگر است، بنابراین لازم نیست منتظر بمانید، به عنوان مثال. با آزمایش، تا زمانی که همه وظایف خود را انجام دهند. هر قسمت از برنامه پایگاه کد مخصوص به خود را دارد و می تواند به طور مستقل توسعه یافته و به کار گرفته شود، که به نوبه خود، زمان مورد نیاز برای انتشار یک ویژگی جدید یا رفع اشکال را کوتاه می کند.
یکی دیگر از جنبه‌های معماری micro-frontend که زمان عرضه به بازار را کوتاه می‌کند، اجزای قابل استفاده مجدد است. وقتی کد شما به اجزای مستقل کوچکتر تقسیم می شود، استفاده مجدد از هر یک از آنها آسان است، به عنوان مثال. یک صفحه وب متفاوت یا یک برنامه که متعلق به یک شرکت است، به جای اینکه مجبور باشید هر بار عملکرد را از ابتدا توسعه دهید.
بهترین استک های فناوری
هر تیم از توسعه‌دهندگان می‌توانند بهترین فناوری‌ها را برای ساخت اپلیکیشن میکرو که روی آن کار می‌کنند انتخاب کنند. ماهیت micro-frontendها اجرای پیشرفته‌ترین فناوری‌ها را نیز آسان‌تر می‌کند. می‌توانید هر راه‌حل جدید داغی را به‌عنوان فریمورک میکرو فرانت‌اند خود انتخاب کنید. گزینه های شما قطعاً به اندازه یک برنامه یکپارچه محدود نیستند.
ایزوله سازی اشتباه
داشتن یک صفحه ظاهری که از عناصر به هم پیوسته تشکیل شده باشد، کل صفحه وب را قوی تر می کند. حتی اگر یکی از ریزسرویس‌های شما با مشکل مواجه شود، به این معنی نیست که مشتریان شما با در دسترس نبودن کل برنامه مواجه خواهند شد. همچنین زمانی که به جای کل برنامه فقط باید یک مؤلفه کوچک را تغییر داده و آزمایش کنید، تعیین اینکه دقیقاً کجا مشکل ایجاد شده است و به سرعت آن را برطرف کنید بسیار ساده تر است.
به لطف روشی که معماری micro-frontend کار می کند، نگهداری از برنامه در طول زمان نیز آسان تر است. می توانید بدون اینکه کل برنامه را آفلاین کنید، عناصر کد را یکی یکی بررسی و به روز کنید. مشتریان برای برنامه های کاربردی قابل اعتماد ارزش قائل هستند و رشد درآمد شما منعکس کننده آن خواهد بود.
مقیاس پذیری
فریمورک‌های Micro-frontend به طور گسترده به عنوان یکی از بهترین راه حل‌ها برای ساخت اپلیکیشن‌های بسیار مقیاس‌پذیر پذیرفته شده‌اند. با فرانت‌اندهای یکپارچه، باید کل برنامه را به یکباره مقیاس کنید که نه تنها پیچیده‌تر، بلکه گران‌تر است، زیرا به سرورهای وب و منابع دیگر نیاز دارید. Micro-frontends به شما این امکان را می‌دهد تا اطمینان حاصل کنید که مقیاس‌پذیری تنها با بخشی از برنامه که مسئول منطق تجاری خاص است که در آن لحظه به منابع بیشتری نیاز دارد، اتفاق می‌افتد. همچنین خودکار کردن فرآیند مقیاس‌بندی آسان‌تر است، بنابراین منابع اضافی تقریباً بلافاصله پس از اینکه یک سرویس دیگر به آنها نیاز نداشت، دوباره توزیع می‌شوند.
چه زمانی به میکرو فرانت اند نیاز دارید؟
اگر چه micro-frontends مزایای زیادی دارد، نباید فکر کنید که بهترین راه حل برای هر برنامه ای است. درست مانند میکروسرویس‌ها برای بک‌اند، میکرو فرانت‌اندها برای برنامه‌هایی با قابلیت‌های زیاد و هزاران کاربر نهایی مناسب‌تر هستند، وقتی مقیاس‌پذیری بسیار مهم است. اگر یک برنامه یا وب‌سایت ساده با مشتریان کم دارید یا اگر تیم‌های متعددی که به طور مستقل عمل می‌کنند گزینه‌ای برای شرکت شما نیستند، ممکن است micro-frontends بهترین انتخاب برای شما نباشد. برنامه‌های موبایلی بومی اندروید یا iOS نیز معمولاً دارای فرانت‌اندهای یکپارچه هستند، بنابراین اگر تیم شما روی آن کار می‌کند، ممکن است نخواهید به سمت میکرو فرانت‌اند بروید.
موارد دیگری نیز وجود دارد که باید در نظر بگیرید، به عنوان مثال حتی اگر تصمیم به استفاده از micro-frontends دارید، باید تعداد کل و اندازه میکروسرویس ها یا اجزای مختلفی را که استفاده می کنید به دقت برنامه ریزی کنید. وقتی عناصر میکرو بیش از حد بزرگ می شوند، بیشتر ارزشی را که در وهله اول هدفش بودید حذف می کند. و اگر قطعات زیادی داشته باشید، سربار و هزینه های نگهداری از همه آنها سر به فلک می کشد.
کدهای Micro-frontend را می توان در چندین زبان برنامه نویسی نوشت و از فریمورک های مختلفی مانند Vue، Angular، React و غیره پشتیبانی می شود. بنابراین، در تئوری، توسعه‌دهندگان می‌توانند تصمیمات خود را بگیرند و انتخاب کنند که کدام استک برای بخش خاصی از منطق تجاری که هر تیم مستقل روی آن کار می‌کند، بهترین است. با این حال، در عمل، اگر چندین فناوری برای یک راه حل استفاده شود، معمولاً به این معنی است که هیچ استانداردی وجود ندارد، که در نهایت می تواند منجر به هرج و مرج شود.
ارتباط بین مؤلفه ها نیز باید به طور مؤثر سازماندهی شود، برای مثال استفاده از اتوبوس رویداد استاندارد برای مقابله با رویدادهای ورودی و خروجی. اگر ریز فرانت‌اندهای شما مستقل باشند اما نتوانند با یکدیگر ارتباط برقرار کنند، برنامه وب شما نمی‌تواند آنطور که باید عمل کند.
